From 19f169aca2349e28ebe8d7c10b1b8fe422379b86 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 15 Apr 2025 13:55:02 +0200
Subject: [PATCH] feature(Dashboard Grid): adds a red border to the widget if
 the user tries to resize the widget over its max width/height or under its
 min width/height

---
 public/js/components/Dashboard/Section.js |  2 +-
 public/js/components/Drop/Grid.js         | 51 +++++++++++++++++++++--
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js
index 8c2826f0c..4a2a4eaaa 100644
--- a/public/js/components/Dashboard/Section.js
+++ b/public/js/components/Dashboard/Section.js
@@ -193,7 +193,7 @@ export default {
 		{{name}}:
 	</h4>
 	<div class="dashboard-section position-relative pb-3 border-bottom" ref="container" :style="getSectionStyle">
-		<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" >
+		<drop-grid v-model:cols="gridWidth" :items="items" :itemsSetup="computedWidgetsSetup" :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.blank || (item.widgetid && item.widgetid == draggedItem?.data.widgetid)" :class="{'dashboard-item-overlay':item.resizeOverlay}" class="dashboard-item card overflow-hidden h-100 position-relative draggedItem" ></div>
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index f5572c639..4b4b181d3 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -16,6 +16,7 @@ export default {
 	props: {
 		cols: Number,
 		items: Array,
+		itemsSetup: Object,
 		resizeLimit: Function,
 		active: {
 			type: Boolean,
@@ -404,6 +405,7 @@ export default {
 			
 			this.mode = MODE_MOVE;
 			
+			this.grid.h += 1;
 			this.draggedItem = item;
 			this.$emit('draggedItem',item);
 			this.draggedNode = evt.target;
@@ -425,9 +427,19 @@ export default {
 			this._dragStart(evt);
 		},
 		dragOver(evt) {
+			if ((this.y + 1) > this.grid?.h && this.mode == MODE_MOVE) {
+				this.positionUpdates = this.positionUpdates.filter(item => {
+					return item.widgetid == this.draggedItem.data.widgetid;
+				})
+				this.dragEnd();
+				this.dragCancel();
+			}
 			if (!this.active)
 				return this.dragCancel();
 			this.checkPinnedWidgetAnimation();
+			if(this.mode == MODE_RESIZE){
+				this.checkWidgetSizeLimitAnimation();
+			}
 			if (this.updateCursor(evt)) {
 				switch(this.mode) {
 					case MODE_MOVE: {
@@ -463,7 +475,6 @@ export default {
 			}
 		},
 		dragCancel() {
-			
 			this.toggleDraggedItemOverlay(false);
 			this.mode = MODE_IDLE;
 			this.positionUpdates = null;
@@ -474,12 +485,19 @@ export default {
 			
 		},
 		dragEnd() {
+			if (this.mode == MODE_IDLE)
+				return;
+			// clean up unused classes
+			let draggedItemNode = document.getElementById(this.draggedItem.data.widgetid);
+			draggedItemNode.classList.remove("border-danger");
+			Array.from(document.getElementsByClassName("denied-dragging-animation"))?.forEach(ele => {
+				ele.classList.remove("denied-dragging-animation");
+			})
 			let widgetClones = document.getElementsByClassName("widgetClone");
 			for(let widget of widgetClones){
 				this.$refs.container.removeChild(widget);
 			}
-			if (this.mode == MODE_IDLE)
-				return;
+			
 			if (!this.active || this.x < 0 || this.y < 0 || this.x >= this.cols)
 				return this.dragCancel();
 			this.mode = MODE_IDLE;
@@ -534,7 +552,7 @@ export default {
 			Array.from(document.getElementsByClassName("denied-dragging-animation"))?.forEach(ele => {
 				ele.classList.remove("denied-dragging-animation");
 			})
-			
+
 			itemAtPosition.forEach(item=>{
 				if (item.place[this.cols] && item.place[this.cols].pinned) {
 					let pinnedWidget = document.getElementById(item.widgetid);
@@ -545,6 +563,31 @@ export default {
 				}	
 			})
 		},
+		checkWidgetSizeLimitAnimation() {
+
+			let draggedItemSetup = this.itemsSetup[this.draggedItem.data.widget];
+			let draggedItemMaxWidth = draggedItemSetup.width.max ?? draggedItemSetup.width;
+			let draggedItemMinWidth = draggedItemSetup.width.min ?? draggedItemSetup.width;
+			let draggedItemMaxHeight = draggedItemSetup.height.max ?? draggedItemSetup.height;
+			let draggedItemMinHeight = draggedItemSetup.height.min ?? draggedItemSetup.height;
+			let draggedItemNode = document.getElementById(this.draggedItem.data.widgetid);
+
+			let width_after_resize = this.x - this.draggedItem.x + 1; 
+			let height_after_resize = this.y - this.draggedItem.y + 1; 
+			if(  
+				(width_after_resize > 0 && (width_after_resize > draggedItemMaxWidth
+				|| width_after_resize < draggedItemMinWidth)
+				)
+				||
+				(height_after_resize > 0 && (height_after_resize > draggedItemMaxHeight
+				|| height_after_resize < draggedItemMinHeight)
+				)
+			){
+				draggedItemNode.classList.add("border-danger");
+			}else{
+				draggedItemNode.classList.remove("border-danger");
+			}
+		},
 		mouseDown(){
 			this.mode = MODE_MOUSE_DOWN;
 		},