From b517c940841e8219fbc18fc56c7fc113b241a6ad Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Sat, 4 May 2024 02:16:17 +0300
Subject: [PATCH] [v11.0.x] Canvas: Add support to rotate a group of elements
 (#87362)

Canvas: Add support to rotate a group of elements (#87358)

(cherry picked from commit 1ef1cc7e3f039bf28b0bfdd4f8abac25133cbb5a)

Co-authored-by: Nathan Marrs <nathanielmarrs@gmail.com>
---
 public/app/features/canvas/runtime/element.tsx | 9 ++++++---
 public/app/features/canvas/runtime/scene.tsx   | 8 ++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx
index 3e92b3efae7..b42292ba53e 100644
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -492,11 +492,14 @@ export class ElementState implements LayerElement {
   };
 
   applyRotate = (event: OnRotate) => {
-    const absoluteRotationDegree = event.absoluteRotation;
-
+    const rotationDelta = event.delta;
     const placement = this.options.placement!;
+    const placementRotation = placement.rotation ?? 0;
+
+    const calculatedRotation = placementRotation + rotationDelta;
+
     // Ensure rotation is between 0 and 360
-    placement.rotation = absoluteRotationDegree - Math.floor(absoluteRotationDegree / 360) * 360;
+    placement.rotation = calculatedRotation - Math.floor(calculatedRotation / 360) * 360;
     event.target.style.transform = event.transform;
   };
 
diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx
index 5e1608551aa..23fbda432bc 100644
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -462,6 +462,14 @@ export class Scene {
           targetedElement.applyRotate(event);
         }
       })
+      .on('rotateGroup', (e) => {
+        for (let event of e.events) {
+          const targetedElement = this.findElementByTarget(event.target);
+          if (targetedElement) {
+            targetedElement.applyRotate(event);
+          }
+        }
+      })
       .on('rotateEnd', () => {
         this.enableCustomables();
         // Update the editor with the new rotation