diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx index 2af902c68a8..c79fc3d67b3 100644 --- a/public/app/features/canvas/runtime/element.tsx +++ b/public/app/features/canvas/runtime/element.tsx @@ -489,11 +489,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 7a1c404679e..6dc3a8b83d6 100644 --- a/public/app/features/canvas/runtime/scene.tsx +++ b/public/app/features/canvas/runtime/scene.tsx @@ -463,6 +463,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