Canvas: Update new element type with rotation (#85690)

public/app/features/canvas/elements/button.tsx

@@ -126,6 +126,7 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
       height: options?.placement?.height ?? 78,
       top: options?.placement?.top ?? 100,
       left: options?.placement?.left ?? 100,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/cloud.tsx

@@ -99,6 +99,7 @@ export const cloudItem: CanvasElementItem = {
       height: options?.placement?.height ?? 70,
       top: options?.placement?.top,
       left: options?.placement?.left,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/droneFront.tsx

@@ -93,6 +93,7 @@ export const droneFrontItem: CanvasElementItem = {
       height: options?.placement?.height ?? 26,
       top: options?.placement?.top,
       left: options?.placement?.left,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/droneSide.tsx

@@ -92,6 +92,7 @@ export const droneSideItem: CanvasElementItem = {
       height: options?.placement?.height ?? 26,
       top: options?.placement?.top,
       left: options?.placement?.left,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/ellipse.tsx

@@ -106,6 +106,7 @@ export const ellipseItem: CanvasElementItem<CanvasElementConfig, CanvasElementDa
       height: options?.placement?.height ?? 138,
       top: options?.placement?.top,
       left: options?.placement?.left,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/icon.tsx

@@ -79,6 +79,7 @@ export const iconItem: CanvasElementItem<IconConfig, IconData> = {
       height: options?.placement?.height ?? 100,
       top: options?.placement?.top ?? 100,
       left: options?.placement?.left ?? 100,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/metricValue.tsx

@@ -174,6 +174,7 @@ export const metricValueItem: CanvasElementItem<TextConfig, TextData> = {
       height: options?.placement?.height,
       top: options?.placement?.top ?? 100,
       left: options?.placement?.left ?? 100,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/parallelogram.tsx

@@ -99,6 +99,7 @@ export const parallelogramItem: CanvasElementItem = {
       height: options?.placement?.height ?? 150,
       top: options?.placement?.top,
       left: options?.placement?.left,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/server/server.tsx

@@ -80,6 +80,7 @@ export const serverItem: CanvasElementItem<ServerConfig, ServerData> = {
       height: options?.placement?.height ?? 100,
       top: options?.placement?.top,
       left: options?.placement?.left,
+      rotation: options?.placement?.rotation ?? 0,
     },
     config: {
       type: ServerType.Single,

public/app/features/canvas/elements/text.tsx

@@ -146,6 +146,7 @@ export const textItem: CanvasElementItem<TextConfig, TextData> = {
       height: options?.placement?.height ?? 100,
       top: options?.placement?.top,
       left: options?.placement?.left,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/triangle.tsx

@@ -100,6 +100,7 @@ export const triangleItem: CanvasElementItem = {
       height: options?.placement?.height ?? 138,
       top: options?.placement?.top,
       left: options?.placement?.left,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/elements/windTurbine.tsx

@@ -90,6 +90,7 @@ export const windTurbineItem: CanvasElementItem = {
       height: options?.placement?.height ?? 155,
       top: options?.placement?.top,
       left: options?.placement?.left,
+      rotation: options?.placement?.rotation ?? 0,
     },
   }),
 

public/app/features/canvas/runtime/scene.tsx

@@ -436,6 +436,7 @@ export class Scene {
       // Setup rotatable
       rotatable: allowChanges,
       throttleRotate: 5,
+      rotationPosition: ['top', 'right'],
 
       // Setup snappable
       snappable: allowChanges,