Merge pull request #12232 from vvlladd28/bug/dashboard/copy-widget

Fixed incorrect copy widget in dashboard

ui-ngx/src/app/core/services/dashboard-utils.service.ts

@@ -60,6 +60,7 @@ import { BackgroundType, colorBackground, isBackgroundSettings } from '@shared/m
 import { MediaBreakpoints } from '@shared/models/constants';
 import { TranslateService } from '@ngx-translate/core';
 import { DashboardPageLayout } from '@home/components/dashboard-page/dashboard-page.models';
+import { maxGridsterCol, maxGridsterRow } from '@home/models/dashboard-component.models';
 
 @Injectable({
   providedIn: 'root'
@@ -682,6 +683,10 @@ export class DashboardUtilsService {
     if (row > -1 && column > - 1) {
       widgetLayout.row = row;
       widgetLayout.col = column;
+      if (this.hasWidgetCollision(widgetLayout.row, widgetLayout.col,
+                                  widgetLayout.sizeX, widgetLayout.sizeY, Object.values(layout.widgets))) {
+        this.widgetPossiblePosition(widgetLayout, layout);
+      }
     } else {
       row = 0;
       for (const w of Object.keys(layout.widgets)) {
@@ -703,6 +708,60 @@ export class DashboardUtilsService {
     layout.widgets[widget.id] = widgetLayout;
   }
 
+  private widgetPossiblePosition(widgetLayout: WidgetLayout, layout: DashboardLayout) {
+    let bestRow = 0;
+    let bestCol = 0;
+
+    let maxCol = layout.gridSettings.minColumns || layout.gridSettings.columns || 0;
+    let maxRow = 0;
+
+    const widgetLayouts = Object.values(layout.widgets);
+
+    widgetLayouts.forEach(widget => {
+      maxCol = Math.max(maxCol, widget.col + widget.sizeX);
+      maxRow = Math.max(maxRow, widget.row + widget.sizeY);
+    })
+
+    for (; bestRow < maxRow; bestRow++) {
+      for (bestCol = 0; bestCol < maxCol; bestCol++) {
+        if (!this.hasWidgetCollision(bestRow, bestCol, widgetLayout.sizeX, widgetLayout.sizeY, widgetLayouts)) {
+          widgetLayout.row = bestRow;
+          widgetLayout.col = bestCol;
+          return;
+        }
+      }
+    }
+    const canAddToRows = maxGridsterRow >= maxRow + bestRow;
+    const canAddToColumns = maxGridsterCol >= maxCol + bestCol;
+    const addToRows = bestRow <= bestCol && canAddToRows;
+    if (!addToRows && canAddToColumns) {
+      widgetLayout.col = maxCol;
+      widgetLayout.row = 0;
+    } else if (canAddToRows) {
+      widgetLayout.row = maxRow;
+      widgetLayout.col = 0;
+    }
+  }
+
+  private hasWidgetCollision(row: number, col: number, sizeX: number, sizeY: number, widgetLayouts: WidgetLayout[]) {
+    const left = col;
+    const right = col + sizeX;
+    const top = row;
+    const bottom = row + sizeY;
+
+    for (const widget of widgetLayouts) {
+      const left2 = widget.col;
+      const right2 = widget.col + widget.sizeX;
+      const top2 = widget.row;
+      const bottom2 = widget.row + widget.sizeY;
+
+      if (left < right2 && right > left2 && top < bottom2 && bottom > top2) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   public removeWidgetFromLayout(dashboard: Dashboard,
                                 targetState: string,
                                 targetLayout: DashboardLayoutId,

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts

@@ -41,7 +41,9 @@ import {
   DashboardCallbacks,
   DashboardWidget,
   DashboardWidgets,
-  IDashboardComponent
+  IDashboardComponent,
+  maxGridsterCol,
+  maxGridsterRow
 } from '../../models/dashboard-component.models';
 import { ReplaySubject, Subject, Subscription } from 'rxjs';
 import { WidgetLayout, WidgetLayouts } from '@shared/models/dashboard.models';
@@ -231,10 +233,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
       disableAutoPositionOnConflict: false,
       pushItems: false,
       swap: false,
-      maxRows: 3000,
+      maxRows: maxGridsterRow,
       minCols: this.columns ? this.columns : 24,
       setGridSize: this.setGridSize,
-      maxCols: 3000,
+      maxCols: maxGridsterCol,
       maxItemCols: 1000,
       maxItemRows: 1000,
       maxItemArea: 1000000,

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts

@@ -111,6 +111,9 @@ interface DashboardWidgetUpdateRecord {
   operation: DashboardWidgetUpdateOperation;
 }
 
+export const maxGridsterCol = 3000;
+export const maxGridsterRow = 3000;
+
 export class DashboardWidgets implements Iterable<DashboardWidget> {
 
   highlightedMode = false;