[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 1ef1cc7e3f)

Co-authored-by: Nathan Marrs <nathanielmarrs@gmail.com>

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;
   };
 

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