From 075b33f0fadd7228b58fdb41d11b3d140d5659b5 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 14 Oct 2024 10:40:43 +0300
Subject: [PATCH 1/2] Fix overlapping widgets when changing layout columns
 count

---
 .../core/services/dashboard-utils.service.ts  | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index 9f1c94a83e..ef51868fa9 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -753,8 +753,46 @@ export class DashboardUtilsService {
       const widget = layout.widgets[w];
       widget.row = Math.round(widget.row * ratio);
       widget.col = Math.round(widget.col * ratio);
-      widget.sizeX = Math.round(widget.sizeX * ratio);
-      widget.sizeY = Math.round(widget.sizeY * ratio);
+      widget.sizeX = Math.max(1, Math.round(widget.sizeX * ratio));
+      widget.sizeY = Math.max(1, Math.round(widget.sizeY * ratio));
+    }
+    for (const w of Object.keys(layout.widgets)) {
+      const widget = layout.widgets[w];
+      for (const w2 of Object.keys(layout.widgets)) {
+        const widget2 = layout.widgets[w2];
+        if (widget !== widget2) {
+          const left = widget.col;
+          const right = widget.col + widget.sizeX;
+          const top = widget.row;
+          const bottom = widget.row + widget.sizeY;
+          const left2 = widget2.col;
+          const right2 = widget2.col + widget2.sizeX;
+          const top2 = widget2.row;
+          const bottom2 = widget2.row + widget2.sizeY;
+          if (left < right2 && right > left2 &&
+            top > bottom2 && bottom < top2 ) {
+            let horizontalOverlapFixed = false;
+            if (right - left2 === 1) {
+              if (widget.sizeX > 1) {
+                widget.sizeX--;
+                horizontalOverlapFixed = true;
+              } else if (widget2.sizeX > 1) {
+                widget2.col++;
+                widget2.sizeX--;
+                horizontalOverlapFixed = true;
+              }
+            }
+            if (!horizontalOverlapFixed && (bottom - top2) === 1) {
+              if (widget.sizeY > 1) {
+                widget.sizeY--;
+              } else if (widget2.sizeY > 1) {
+                widget2.row++;
+                widget2.sizeY--;
+              }
+            }
+          }
+        }
+      }
     }
   }
 

From 61029fd0e0fa70bddfb9936aac087c96334c716b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 14 Oct 2024 11:11:27 +0300
Subject: [PATCH 2/2] Fix overlapping widgets when changing layout columns
 count

---
 .../core/services/dashboard-utils.service.ts    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index ef51868fa9..f0341410bc 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -749,17 +749,24 @@ export class DashboardUtilsService {
         widget.sizeY = 1;
       }
     }
+    const widgets: WidgetLayout[] = [];
     for (const w of Object.keys(layout.widgets)) {
       const widget = layout.widgets[w];
       widget.row = Math.round(widget.row * ratio);
       widget.col = Math.round(widget.col * ratio);
       widget.sizeX = Math.max(1, Math.round(widget.sizeX * ratio));
       widget.sizeY = Math.max(1, Math.round(widget.sizeY * ratio));
+      widgets.push(widget);
     }
-    for (const w of Object.keys(layout.widgets)) {
-      const widget = layout.widgets[w];
-      for (const w2 of Object.keys(layout.widgets)) {
-        const widget2 = layout.widgets[w2];
+    widgets.sort((w1, w2) => {
+      let res = w1.col - w2.col;
+      if (res === 0) {
+        res = w1.row - w2.row;
+      }
+      return res;
+    });
+    for (const widget of widgets) {
+      for (const widget2 of widgets) {
         if (widget !== widget2) {
           const left = widget.col;
           const right = widget.col + widget.sizeX;
@@ -770,7 +777,7 @@ export class DashboardUtilsService {
           const top2 = widget2.row;
           const bottom2 = widget2.row + widget2.sizeY;
           if (left < right2 && right > left2 &&
-            top > bottom2 && bottom < top2 ) {
+            top < bottom2 && bottom > top2 ) {
             let horizontalOverlapFixed = false;
             if (right - left2 === 1) {
               if (widget.sizeX > 1) {