Canvas: Fix inconsistent element placement when changing element type (#74942)

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

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

@@ -83,8 +83,10 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
       },
     },
     placement: {
-      top: 100,
-      left: 100,
+      width: options?.placement?.width,
+      height: options?.placement?.height,
+      top: options?.placement?.top ?? 100,
+      left: options?.placement?.left ?? 100,
     },
   }),
 

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

@@ -58,12 +58,6 @@ export const iconItem: CanvasElementItem<IconConfig, IconData> = {
   display: IconDisplay,
 
   getNewOptions: (options) => ({
-    placement: {
-      width: 100,
-      height: 100,
-      top: 0,
-      left: 0,
-    },
     ...options,
     config: {
       path: {
@@ -77,6 +71,12 @@ export const iconItem: CanvasElementItem<IconConfig, IconData> = {
         fixed: 'transparent',
       },
     },
+    placement: {
+      width: options?.placement?.width ?? 100,
+      height: options?.placement?.height ?? 100,
+      top: options?.placement?.top ?? 100,
+      left: options?.placement?.left ?? 100,
+    },
   }),
 
   // Called when data changes

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

@@ -164,8 +164,10 @@ export const metricValueItem: CanvasElementItem<TextConfig, TextData> = {
       },
     },
     placement: {
-      top: 100,
-      left: 100,
+      width: options?.placement?.width,
+      height: options?.placement?.height,
+      top: options?.placement?.top ?? 100,
+      left: options?.placement?.left ?? 100,
     },
   }),
 

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

@@ -142,8 +142,10 @@ export const textItem: CanvasElementItem<TextConfig, TextData> = {
       size: 16,
     },
     placement: {
-      top: 100,
-      left: 100,
+      width: options?.placement?.width ?? 100,
+      height: options?.placement?.height ?? 100,
+      top: options?.placement?.top,
+      left: options?.placement?.left,
     },
   }),