From 59ebd33ba6860df99b4c129c3a81c589c42f667d Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 14 Apr 2025 11:28:13 +0200
Subject: [PATCH] feature(Dashboard resize):adds overlays to the elements when
 resizing widgets on the dashboard

---
 public/js/components/Dashboard/Section.js |  2 +-
 public/js/components/Drop/Grid.js         | 28 +++++++++++++++++++----
 public/js/composables/GridLogic.js        |  3 ++-
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js
index eb37009ae..1631cadcd 100644
--- a/public/js/components/Dashboard/Section.js
+++ b/public/js/components/Dashboard/Section.js
@@ -193,7 +193,7 @@ export default {
 		<drop-grid v-model:cols="gridWidth" :items="items" :active="editModeIsActive" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @draggedItem="draggedItem=$event" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
 			<template #default="item">
 				<div v-if="item.placeholder" class="empty-tile-hover" @click="$emit('widgetAdd', name, { widget: 1, config: {}, place: {[gridWidth]: {x:item.x,y:item.y,w:1,h:1}}, custom: 1 })"></div>
-				<div v-else-if="item.widgetid == draggedItem?.data.widgetid" class="draggedItem" ></div>
+				<div v-else-if="item.blank || item.widgetid == draggedItem?.data.widgetid" :class="{'dashboard-item-overlay':item.resizeOverlay}" class="dashboard-item card overflow-hidden h-100 position-relative draggedItem" ></div>
 				<dashboard-item 
 					v-else
 					:id="item.widget"
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index b73cca9ef..65564c3bb 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -168,19 +168,39 @@ export default {
 		placedItems() {
 			if (!this.positionUpdates)
 				return this.prePlacedItems;
-			return this.prePlacedItems.map(item => {
+			let mappedPlacedItems= this.prePlacedItems.map(item => {
 				if (!this.positionUpdates[item.index] )
 					return item;
+				
+				let height_diff = this.positionUpdates[item.index]?.h - item.h;
+				let width_diff = this.positionUpdates[item.index]?.w - item.w;
 				return {
+					resize: this.positionUpdates[item.index]?.resize,
 					index: item.index,
 					weight: item.weight,
 					data: item.data,
 					x: this.positionUpdates[item.index].x === undefined ? item.x : this.positionUpdates[item.index].x,
 					y: this.positionUpdates[item.index].y === undefined ? item.y : this.positionUpdates[item.index].y,
-					w: this.positionUpdates[item.index].w === undefined ? item.w : this.positionUpdates[item.index].w,
-					h: this.positionUpdates[item.index].h === undefined ? item.h : this.positionUpdates[item.index].h
+					w: width_diff>0?item.w:this.positionUpdates[item.index].w === undefined ? item.w : this.positionUpdates[item.index].w,
+					h: height_diff > 0 ?item.h:this.positionUpdates[item.index].h === undefined ? item.h : this.positionUpdates[item.index].h
+					
 				};
 			});
+
+			let temporaryResizeItems = [];
+			mappedPlacedItems.forEach(item=>{
+				if(item.resize){
+					let newItem = {
+						...item,
+						w:this.positionUpdates[item.index].w === undefined ? item.w : this.positionUpdates[item.index].w,
+						h:this.positionUpdates[item.index].h === undefined ? item.h : this.positionUpdates[item.index].h,
+						resizeOverlay:true,
+						blank:true,
+					};
+					temporaryResizeItems.push(newItem)
+				}
+			})
+			return [...mappedPlacedItems, ...temporaryResizeItems];
 		},
 		showEmptyTileHover() {
 			if (!this.active || !this.grid || this.mode != MODE_IDLE || this.x < 0 || this.y < 0 || this.x >= this.cols || this.y >= this.rows)
@@ -422,7 +442,6 @@ export default {
 							this.draggedOffset[1] -= y;
 							y = 0;
 						}
-
 						this.positionUpdates = this.dragGrid.move(this.draggedItem, x, y);
 						break;
 					}
@@ -539,6 +558,7 @@ export default {
 				class="position-absolute"
 				:active="active"
 				:style="{
+					zIndex: item.resizeOverlay ? -5 : 'auto',
 					top: 'calc(' + item.y + ' * var(--fhc-dg-row-height))',
 					left: 'calc(' + item.x + ' * var(--fhc-dg-col-width))',
 					width: 'calc(' + item.w + ' * var(--fhc-dg-col-width))',
diff --git a/public/js/composables/GridLogic.js b/public/js/composables/GridLogic.js
index ed060e123..d6b6d4723 100644
--- a/public/js/composables/GridLogic.js
+++ b/public/js/composables/GridLogic.js
@@ -164,7 +164,8 @@ class GridLogic {
 		currItem.frame = this.getItemFrame(currItem);
 		
 		const updates = this.add(currItem);
-		updates[item.index] = {index: item.index, w, h};
+		updates[item.index] = {index: item.index, w, h, resize:true};
+
 		return updates;
 	}
 	tryMoving(index, prefer) {