From 5579c59fd1af24985d5f0550bf36551ec84d9c5d Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Thu, 14 Jul 2022 15:53:02 -0700
Subject: [PATCH] Canvas: Improve context menu UX (#52234)

---
 .../panel/canvas/CanvasContextMenu.tsx        | 118 ++++++++++--------
 1 file changed, 64 insertions(+), 54 deletions(-)

diff --git a/public/app/plugins/panel/canvas/CanvasContextMenu.tsx b/public/app/plugins/panel/canvas/CanvasContextMenu.tsx
index e3cb75922ee..13585747c85 100644
--- a/public/app/plugins/panel/canvas/CanvasContextMenu.tsx
+++ b/public/app/plugins/panel/canvas/CanvasContextMenu.tsx
@@ -32,7 +32,8 @@ export const CanvasContextMenu = ({ scene }: Props) => {
   const handleContextMenu = useCallback(
     (event) => {
       event.preventDefault();
-      if (event.currentTarget) {
+      const shouldSelectElement = event.currentTarget !== scene.div;
+      if (shouldSelectElement) {
         scene.select({ targets: [event.currentTarget as HTMLElement | SVGElement] });
       }
       setAnchorPoint({ x: event.pageX, y: event.pageY });
@@ -42,73 +43,82 @@ export const CanvasContextMenu = ({ scene }: Props) => {
   );
 
   useEffect(() => {
-    if (selectedElements && selectedElements.length === 1) {
-      const element = selectedElements[0];
-      element.addEventListener('contextmenu', handleContextMenu);
+    if (scene.selecto) {
+      scene.selecto.getSelectableElements().forEach((element) => {
+        element.addEventListener('contextmenu', handleContextMenu);
+      });
     }
-  }, [selectedElements, handleContextMenu]);
+  }, [handleContextMenu, scene.selecto]);
 
-  if (!selectedElements) {
-    return <></>;
-  }
+  useEffect(() => {
+    if (scene.div) {
+      scene.div.addEventListener('contextmenu', handleContextMenu);
+    }
+  }, [handleContextMenu, scene.div]);
 
   const closeContextMenu = () => {
     setIsMenuVisible(false);
   };
 
   const renderMenuItems = () => {
-    return (
-      <>
-        <MenuItem
-          label="Delete"
-          onClick={() => {
-            contextMenuAction(LayerActionID.Delete);
-            closeContextMenu();
-          }}
-          className={styles.menuItem}
-        />
-        <MenuItem
-          label="Duplicate"
-          onClick={() => {
-            contextMenuAction(LayerActionID.Duplicate);
-            closeContextMenu();
-          }}
-          className={styles.menuItem}
-        />
-        <MenuItem
-          label="Bring to front"
-          onClick={() => {
-            contextMenuAction(LayerActionID.MoveTop);
-            closeContextMenu();
-          }}
-          className={styles.menuItem}
-        />
-        <MenuItem
-          label="Send to back"
-          onClick={() => {
-            contextMenuAction(LayerActionID.MoveBottom);
-            closeContextMenu();
-          }}
-          className={styles.menuItem}
-        />
-        {!scene.isPanelEditing && (
+    const openCloseEditorMenuItem = !scene.isPanelEditing && (
+      <MenuItem
+        label={inlineEditorOpen ? 'Close Editor' : 'Open Editor'}
+        onClick={() => {
+          if (scene.inlineEditingCallback) {
+            if (inlineEditorOpen) {
+              activePanel.panel.inlineEditButtonClose();
+            } else {
+              scene.inlineEditingCallback();
+            }
+          }
+          closeContextMenu();
+        }}
+        className={styles.menuItem}
+      />
+    );
+
+    if (selectedElements && selectedElements.length >= 1) {
+      return (
+        <>
           <MenuItem
-            label={inlineEditorOpen ? 'Close Editor' : 'Open Editor'}
+            label="Delete"
             onClick={() => {
-              if (scene.inlineEditingCallback) {
-                if (inlineEditorOpen) {
-                  activePanel.panel.inlineEditButtonClose();
-                } else {
-                  scene.inlineEditingCallback();
-                }
-              }
+              contextMenuAction(LayerActionID.Delete);
               closeContextMenu();
             }}
             className={styles.menuItem}
           />
-        )}
-      </>
-    );
+          <MenuItem
+            label="Duplicate"
+            onClick={() => {
+              contextMenuAction(LayerActionID.Duplicate);
+              closeContextMenu();
+            }}
+            className={styles.menuItem}
+          />
+          <MenuItem
+            label="Bring to front"
+            onClick={() => {
+              contextMenuAction(LayerActionID.MoveTop);
+              closeContextMenu();
+            }}
+            className={styles.menuItem}
+          />
+          <MenuItem
+            label="Send to back"
+            onClick={() => {
+              contextMenuAction(LayerActionID.MoveBottom);
+              closeContextMenu();
+            }}
+            className={styles.menuItem}
+          />
+          {openCloseEditorMenuItem}
+        </>
+      );
+    } else {
+      return openCloseEditorMenuItem;
+    }
   };
 
   const contextMenuAction = (actionType: string) => {