remove resizeLimit function and replace it with internal function using the widgetsSetup prop

public/js/components/Dashboard/Section.js

@@ -1,7 +1,6 @@
 import BsConfirm from "../Bootstrap/Confirm.js";
 import DropGrid from '../Drop/Grid.js'
 import DashboardItem from "./Item.js";
-import { useCachedWidgetLoader } from "../../composables/Dashboard/CachedWidgetLoader.js";
 import WidgetIcon from "./Widget/WidgetIcon.js"
 
 export default {
@@ -117,32 +116,6 @@ export default {
 		handleConfigClosed() {
 			this.configOpened = false
 		},
-		checkResizeLimit(item, w, h) {
-			// NOTE(chris): widgets needs to be loaded for this to work
-			let widget = this.widgetState[item.widget];
-			if (widget) {
-				let minmaxW = { ...widget.setup.width };
-				if (minmaxW.max)
-					minmaxW.min = minmaxW.min || 1;
-				else
-					minmaxW = { min: minmaxW, max: minmaxW };
-				if (w < minmaxW.min)
-					w = minmaxW.min; 
-				if (w > minmaxW.max)
-					w = minmaxW.max;
-
-				let minmaxH = { ...widget.setup.height };
-				if (minmaxH.max)
-					minmaxH.min = minmaxH.min || 1;
-				else
-					minmaxH = { min: minmaxH, max: minmaxH };
-				if (h < minmaxH.min)
-					h = minmaxH.min;
-				if (h > minmaxH.max)
-					h = minmaxH.max;
-			}
-			return [w, h];
-		},
 		removeWidget(item, revert) {
 			if (item.custom) {
 				BsConfirm.popup(this.$p.t('dashboard', 'alert_deleteWidget')).then(() => this.$emit('widgetRemove', this.name, item.id));
@@ -203,13 +176,6 @@ export default {
 			this.$emit('widgetUpdate', this.name, payload);
 		}
 	},
-	setup() {
-		const { state: widgetState } = useCachedWidgetLoader();
-
-		return {
-			widgetState
-		};
-	},
 	mounted() {
 		let self = this;
 		let cont = self.$refs.container;
@@ -240,7 +206,6 @@ export default {
 			:items="items"
 			:items-setup="computedWidgetsSetup"
 			:active="editModeIsActive"
-			:resize-limit="checkResizeLimit"
 			:margin-for-extra-row=".01"
 			@rearrange-items="updatePositions"
 			@grid-height="gridHeight=$event"

public/js/components/Drop/Grid.js

@@ -14,7 +14,6 @@ export default {
 		cols: Number,
 		items: Array,
 		itemsSetup: Object,
-		resizeLimit: Function,
 		active: {
 			type: Boolean,
 			default: true
@@ -50,6 +49,32 @@ export default {
 		};
 	},
 	computed: {
+		sizeLimits() {
+			return Object.fromEntries(Object.entries(this.itemsSetup).map(([type, setup]) => {
+				const result = {}; // work on a copy
+				if (setup.height === undefined)
+					result.height = { min: 1, max: undefined };
+				else if (Number.isInteger(setup.height))
+					result.height = { min: setup.height, max: setup.height };
+				else
+					result.height = {
+						min: setup.height.min ?? 1,
+						max: setup.height.max
+					};
+
+				if (setup.width === undefined)
+					result.width = { min: 1, max: undefined };
+				else if (Number.isInteger(setup.width))
+					result.width = { min: setup.width, max: setup.width };
+				else
+					result.width = {
+						min: setup.width.min ?? 1,
+						max: setup.width.max
+					};
+
+				return [type, result];
+			}));
+		},
 		additionalRowComputed: {
 			get() {
 				return this.additionalRow;
@@ -291,11 +316,9 @@ export default {
 				if (item.x + item.w > this.cols) {
 					let targetW = this.cols-item.x,
 						targetX = undefined;
-					if (this.resizeLimit) {
-						[targetW] = this.resizeLimit(item.data, targetW, item.h);
-					}
-					if (targetW < 1)
-						targetW = 1;
+
+					[ targetW ] = this.cropSizeToAllowed(item.data.widget, targetW, item.h);
+
 					if (targetW > this.cols)
 						targetW = this.cols;
 					if (item.x + targetW > this.cols) {
@@ -416,10 +439,9 @@ export default {
 			}
 			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: {
@@ -446,9 +468,13 @@ export default {
 						const dragGrid = new GridLogic(this.grid);
 						let w = Math.min(this.cols - this.draggedItem.x, Math.max(1, this.x - this.draggedItem.x + 1));
 						let h = Math.max(1, this.y - this.draggedItem.y + 1);
-						if (this.resizeLimit)
-							[w, h] = this.resizeLimit(this.draggedItem.data, w, h);
+
+						[ w, h ] = this.cropSizeToAllowed(this.draggedItem.data.widget, w, h);
+
 						this.tempPositionUpdates = dragGrid.resize(this.draggedItem, w, h);
+						
+						this.checkWidgetSizeLimitAnimation();
+						
 						break;
 					}
 				}
@@ -535,25 +561,59 @@ export default {
 				}	
 			});
 		},
+		isSizeAllowed(type, w, h) {
+			if (w < 1 || h < 1)
+				return false;
+			
+			const setup = this.sizeLimits[type];
+
+			if (!setup)
+				return false;
+
+			if (w < setup.width.min)
+				return false;
+			if (h < setup.height.min)
+				return false;
+			if (setup.width.max !== undefined && w > setup.width.max)
+				return false;
+			if (setup.width.max !== undefined && h > setup.height.max)
+				return false;
+
+			return true;
+		},
+		cropSizeToAllowed(type, w, h) {
+			if (w < 1)
+				w = 1;
+			if (h < 1)
+				h = 1;
+
+			const setup = this.sizeLimits[type];
+
+			if (!setup)
+				return [w, h];
+
+			if (w < setup.width.min)
+				w = setup.width.min;
+			if (h < setup.height.min)
+				h = setup.height.min;
+			if (setup.width.max && w > setup.width.max)
+				w = setup.width.max;
+			if (setup.height.max && h > setup.height.max)
+				h = setup.height.max;
+			
+			return [w, h];
+		},
 		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)
-				)
-			) {
+			let width_after_resize = this.x - this.draggedItem.x + 1;
+			let height_after_resize = this.y - this.draggedItem.y + 1;
+
+			if (!this.isSizeAllowed(
+				this.draggedItem.data.widget,
+				width_after_resize,
+				height_after_resize
+			)) {
 				draggedItemNode.classList.add("border-danger");
 			} else {
 				draggedItemNode.classList.remove("border-danger");