From b5da762477d0e568d8db94106d59142e0974fbdd Mon Sep 17 00:00:00 2001
From: Linghao Su <slh001@live.cn>
Date: Fri, 22 Sep 2023 04:36:02 +0800
Subject: [PATCH] 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      |  6 ++++--
 public/app/features/canvas/elements/icon.tsx        | 12 ++++++------
 public/app/features/canvas/elements/metricValue.tsx |  6 ++++--
 public/app/features/canvas/elements/text.tsx        |  6 ++++--
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/public/app/features/canvas/elements/button.tsx b/public/app/features/canvas/elements/button.tsx
index 5771c0621f0..efc01af9d39 100644
--- a/public/app/features/canvas/elements/button.tsx
+++ b/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,
     },
   }),
 
diff --git a/public/app/features/canvas/elements/icon.tsx b/public/app/features/canvas/elements/icon.tsx
index 151e87e35a1..8f3ad8adac3 100644
--- a/public/app/features/canvas/elements/icon.tsx
+++ b/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
diff --git a/public/app/features/canvas/elements/metricValue.tsx b/public/app/features/canvas/elements/metricValue.tsx
index 5ae95019ea1..f98dc1979cf 100644
--- a/public/app/features/canvas/elements/metricValue.tsx
+++ b/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,
     },
   }),
 
diff --git a/public/app/features/canvas/elements/text.tsx b/public/app/features/canvas/elements/text.tsx
index b297778a037..92773b50575 100644
--- a/public/app/features/canvas/elements/text.tsx
+++ b/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,
     },
   }),