From bf8bb26f63a87e835b4dfdd4af3c8d1e94d829d1 Mon Sep 17 00:00:00 2001
From: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>
Date: Thu, 21 Jul 2022 13:17:25 -0700
Subject: [PATCH] Canvas: Set element cursor to grab (#52503)

* Only display grab cursor when editing enabled

* Apply grabbing cursor while dragging an element
---
 public/app/features/canvas/runtime/element.tsx | 3 +++
 public/app/features/canvas/runtime/scene.tsx   | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx
index 3f9b2d95ae3..c886728429b 100644
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -81,7 +81,10 @@ export class ElementState implements LayerElement {
     const { vertical, horizontal } = constraint ?? {};
     const placement = this.options.placement ?? ({} as Placement);
 
+    const editingEnabled = this.getScene()?.isEditingEnabled;
+
     const style: React.CSSProperties = {
+      cursor: editingEnabled ? 'grab' : 'auto',
       position: 'absolute',
       // Minimum element size is 10x10
       minWidth: '10px',
diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx
index 19f4dfa0b0b..b7ea2502521 100644
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -415,6 +415,11 @@ export class Scene {
         ?.getSelectedTargets()
         .includes(selectedTarget.parentElement.parentElement);
 
+      // Apply grabbing cursor while dragging, applyLayoutStylesToDiv() resets it to grab when done
+      if (this.isEditingEnabled && isTargetMoveableElement && this.selecto?.getSelectedTargets().length) {
+        this.selecto.getSelectedTargets()[0].style.cursor = 'grabbing';
+      }
+
       if (isTargetMoveableElement || isTargetAlreadySelected) {
         // Prevent drawing selection box when selected target is a moveable element or already selected
         event.stop();