handle initial position and size in Grid.js no Section.js & add weights & add size properties of updated items to return value in GridLogic.add()

public/js/components/Dashboard/Section.js

@@ -103,7 +103,20 @@ export default {
 				if(!item?.widgetid && item?.id){
 					item.widgetid = item.id;
 				}
-				return { ...item, ...(item.place[this.gridWidth] || { x: 0, y: 0, w: 1, h: 1 }) };
+
+				let weight = 5;
+				if (!item.source)
+					weight = 6;
+				else if (item.source == 'general')
+					weight = 4;
+
+				let placement = item.place[this.gridWidth];
+				if (!placement) {
+					weight -= 3;
+					placement = {};
+				}
+
+				return { ...item, ...placement, weight };
 			});
 
 			if (this.editModeIsActive)
@@ -155,6 +168,7 @@ export default {
 					delete item.w;
 					delete item.h;
 					delete item.place[this.gridWidth].pinned;
+					delete item.weight;
 					if (update.x !== undefined)
 						item.place[this.gridWidth].x = update.x;
 					if (update.y !== undefined)

public/js/components/Drop/Grid.js

@@ -270,62 +270,55 @@ export default {
 				output[item.index] = result;
 			});
 		},
-		// has item an initial place
-		needsReordering(item) {
-			if (!item?.data?.place[this.cols]) {
-				return true;
-			}
-			return false;
-		},
 		// gridlogic
 		createNewGrid(items) {
 			this.grid = new GridLogic(this.cols);
 			const result = [];
-			let sortedItems = [...items].sort((a, b) => {
-				if (this.needsReordering(a) && this.needsReordering(b)) {
-					return 0;
-				} else if (this.needsReordering(a)) {
-					return 999;
-				} else if (this.needsReordering(b)) {
-					return -999;
-				}
-				
-				return a.weight > b.weight;
-			}); 
+			const sortedItems = [...items].sort((a, b) => a.weight > b.weight);
 			sortedItems.forEach(item => {
-				let freeSlots = this.grid.getFreeSlots();
-				
-				if (this.needsReordering(item)) {
-					let firstFreeSlot = freeSlots.shift();
-					if (!firstFreeSlot) {
-						item.x = 0;
-						item.y = this.grid.h;
-					} else {
-						item.x = firstFreeSlot.x;
-						item.y = firstFreeSlot.y;
-					}
+				const target = { ...item };
+
+				if (target.x === undefined && target.y == undefined) {
+					target.x = 0;
+					target.y = 0;
+					const setup = this.sizeLimits[target.data.widget];
+					target.w = setup.width.min;
+					target.h = setup.height.min;
 				}
-				if (item.x + item.w > this.cols) {
-					let targetW = this.cols-item.x,
+
+				if (target.x + target.w > this.cols) {
+					let targetW = this.cols - target.x,
 						targetX = undefined;
 
-					[ targetW ] = this.cropSizeToAllowed(item.data.widget, targetW, item.h);
+					[ targetW ] = this.cropSizeToAllowed(target.data.widget, targetW, target.h);
 
 					if (targetW > this.cols)
 						targetW = this.cols;
-					if (item.x + targetW > this.cols) {
+					if (target.x + targetW > this.cols) {
 						targetX = this.cols - targetW;
 					}
-					if (targetW == item.w)
+					if (targetW == target.w)
 						targetW = undefined;
-					result[item.index] = {
-						item: item.data,
-						x: targetX,
-						w: targetW
-					};
+
+					if (targetX !== undefined)
+						target.x = targetX;
+					if (targetW !== undefined)
+						target.w = targetW;
 				}
-				item.frame = this.grid.getItemFrame(item);
-				this.convertGridResultToUpdate(this.grid.add(item), result, items);
+
+				target.frame = this.grid.getItemFrame(target);
+				this.convertGridResultToUpdate(this.grid.add(target), result, items);
+				
+				['x', 'y', 'h', 'w'].forEach(prop => {
+					if (target[prop] === item[prop])
+						return;
+					
+					if (!result[target.index])
+						result[target.index] = { item: target.data };
+
+					if (result[target.index][prop] === undefined)
+						result[target.index][prop] = target[prop];
+				});
 			});
 			this.grid.clearWeights();
 			return result;

public/js/composables/GridLogic.js

@@ -71,7 +71,9 @@ class GridLogic {
 					result[move.index] = {
 						index: currItem.index,
 						x: currItem.x,
-						y: currItem.y
+						y: currItem.y,
+						w: currItem.w,
+						h: currItem.h
 					};
 				});
 				item.frame.forEach(f => this.grid[f] = item.index);