Resizable: Grid now respects min/max dimensions. Fixed #8435 - grid does not respect min/max dimensions

Author: Ethan Romba

tests/unit/resizable/resizable_options.js

@@ -117,6 +117,20 @@ test("grid", function() {
 	equal( target.height(), 120, "compare height");
 });
 
+test("grid (min/max dimensions)", function() {
+	expect(4);
+
+	var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: 20, minWidth: 65, minHeight: 65, maxWidth: 135, maxHeight: 135 });
+
+	TestHelpers.resizable.drag(handle, 50, 50);
+	equal( target.width(), 120, "grid should respect maxWidth");
+	equal( target.height(), 120, "grid should respect maxHeight");
+
+	TestHelpers.resizable.drag(handle, -100, -100);
+	equal( target.width(), 80, "grid should respect minWidth");
+	equal( target.height(), 80, "grid should respect minHeight");
+});
+
 test("grid (wrapped)", function() {
 	expect(4);
 

ui/jquery.ui.resizable.js

@@ -769,25 +769,39 @@ $.ui.plugin.add("resizable", "grid", {
 	resize: function() {
 		var that = $(this).data("resizable"), o = that.options, cs = that.size, os = that.originalSize, op = that.originalPosition, a = that.axis;
 		o.grid = typeof o.grid == "number" ? [o.grid, o.grid] : o.grid;
-		var ox = Math.round((cs.width - os.width) / (o.grid[0]||1)) * (o.grid[0]||1), oy = Math.round((cs.height - os.height) / (o.grid[1]||1)) * (o.grid[1]||1);
+		var gridX = (o.grid[0]||1), gridY = (o.grid[1]||1),
+			ox = Math.round((cs.width - os.width) / gridX) * gridX, oy = Math.round((cs.height - os.height) / gridY) * gridY,
+			newWidth = os.width + ox, newHeight = os.height + oy,
+			isMaxWidth = o.maxWidth && (o.maxWidth < newWidth), isMaxHeight = o.maxHeight && (o.maxHeight < newHeight),
+			isMinWidth = o.minWidth && (o.minWidth > newWidth), isMinHeight = o.minHeight && (o.minHeight > newHeight);
+
+		if (isMinWidth) {
+			newWidth = newWidth + gridX;
+		}
+		if (isMinHeight) {
+			newHeight = newHeight + gridY;
+		}
+		if (isMaxWidth) {
+			newWidth = newWidth - gridX;
+		}
+		if (isMaxHeight) {
+			newHeight = newHeight - gridY;
+		}
 
 		if (/^(se|s|e)$/.test(a)) {
-			that.size.width = os.width + ox;
-			that.size.height = os.height + oy;
-		}
-		else if (/^(ne)$/.test(a)) {
-			that.size.width = os.width + ox;
-			that.size.height = os.height + oy;
+			that.size.width = newWidth;
+			that.size.height = newHeight;
+		} else if (/^(ne)$/.test(a)) {
+			that.size.width = newWidth;
+			that.size.height = newHeight;
 			that.position.top = op.top - oy;
-		}
-		else if (/^(sw)$/.test(a)) {
-			that.size.width = os.width + ox;
-			that.size.height = os.height + oy;
+		} else if (/^(sw)$/.test(a)) {
+			that.size.width = newWidth;
+			that.size.height = newHeight;
 			that.position.left = op.left - ox;
-		}
-		else {
-			that.size.width = os.width + ox;
-			that.size.height = os.height + oy;
+		} else {
+			that.size.width = newWidth;
+			that.size.height = newHeight;
 			that.position.top = op.top - oy;
 			that.position.left = op.left - ox;
 		}