diff --git a/src/js/layout/base.js b/src/js/layout/base.js
index be256e46..a91fe57c 100644
--- a/src/js/layout/base.js
+++ b/src/js/layout/base.js
@@ -89,6 +89,15 @@ function ($) {
}
return intersection;
+ },
+
+ /**
+ * ### @isLimitable
+ * Returns whether rows/colums in layout are limitable
+ * If yes, should implement a setLimit method
+ */
+ isLimitable : function() {
+ return false;
}
};
diff --git a/src/js/layout/horizontal.js b/src/js/layout/horizontal.js
index 317c1ea9..095f2792 100644
--- a/src/js/layout/horizontal.js
+++ b/src/js/layout/horizontal.js
@@ -48,12 +48,31 @@ function ($, util, BaseLayout) {
getDimensions: function (sprites, defaults) {
var width = 0;
var height = 0;
-
- $.map(sprites, function (sprite) {
+
+ var cols = this.columnlimit || 0,
+ rows = 0,
+ minwidth = 0,
+ i = 0,
+ j =0;
+
+ if(cols>0 && cols<sprites.length) {
+ rows = Math.ceil(sprites.length/cols);
+ for(i=0; i<rows; i++) {
+ for(j=0; j<cols; j++) {
+ if(sprites[i*cols+j]) {
+ minwidth += sprites[i*cols+j].width;
+ height += sprites[i*cols+j].height;
+ }
+ }
+ width = Math.max(width, minwidth);
+ minwidth = 0;
+ }
+ }
+ else $.map(sprites, function (sprite) {
height = sprite.height > height ? sprite.height : height;
width += sprite.width;
});
-
+
return {
width: width || defaults.width,
height: height || defaults.height
@@ -76,28 +95,48 @@ function ($, util, BaseLayout) {
var pass = 0;
var x = 0;
var y = 0;
-
+
while (pass++ < this.settings.maxPass) {
- for (x = 0; x <= dimensions.width - sprite.width; x++) {
- sprite.x = x;
- sprite.y = y;
-
- intersection = this.intersection(sprite, placed);
-
- if (!intersection) {
- placed.push(sprite);
- sprite.show();
- return true;
- }
-
- x = intersection.x + intersection.width - 1;
+ for (y = 0; y <= dimensions.height - sprite.height; y++) {
+ for (x = 0; x <= dimensions.width - sprite.width; x++) {
+ sprite.x = x;
+ sprite.y = y;
+
+ intersection = this.intersection(sprite, placed);
+
+ if (!intersection) {
+ placed.push(sprite);
+ sprite.show();
+ return true;
+ }
+
+ x = intersection.x + intersection.width - 1;
+ }
+
+ y = intersection.y + intersection.height - 1;
}
-
+
dimensions.width += sprite.width;
dimensions.height += sprite.height;
}
return false;
+ },
+
+ /**
+ * ### @isLimitable
+ * Returns whether rows/colums in layout are limitable
+ */
+ isLimitable : function() {
+ return true;
+ },
+
+ /**
+ * ### @setLimit
+ * Limit the number of columns
+ */
+ setLimit : function(limit) {
+ this.columnlimit = limit;
}
});
diff --git a/src/js/layout/vertical.js b/src/js/layout/vertical.js
index 38039149..fbad115a 100644
--- a/src/js/layout/vertical.js
+++ b/src/js/layout/vertical.js
@@ -49,11 +49,30 @@ function ($, util, BaseLayout) {
var width = 0;
var height = 0;
- $.map(sprites, function (sprite) {
+ var rows = this.rowlimit || 0,
+ cols = 0,
+ minheight = 0,
+ i = 0,
+ j =0;
+
+ if(rows>0 && rows<sprites.length) {
+ cols = Math.ceil(sprites.length/rows);
+ for(i=0; i<cols; i++) {
+ for(j=0; j<rows; j++) {
+ if(sprites[i*rows+j]) {
+ minheight += sprites[i*rows+j].height;
+ width += sprites[i*rows+j].width;
+ }
+ }
+ height = Math.max(height, minheight);
+ minheight = 0;
+ }
+ }
+ else $.map(sprites, function (sprite) {
width = sprite.width > width ? sprite.width : width;
height += sprite.height;
});
-
+console.log(width, height, sprites.length, this.rowlimit);
return {
width: width || defaults.width,
height: height || defaults.height
@@ -76,21 +95,25 @@ function ($, util, BaseLayout) {
var pass = 0;
var x = 0;
var y = 0;
-
+console.log(sprite.name);
while (pass++ < this.settings.maxPass) {
- for (y = 0; y <= dimensions.height - sprite.height; y++) {
- sprite.x = x;
- sprite.y = y;
-
- intersection = this.intersection(sprite, placed);
-
- if (!intersection) {
- placed.push(sprite);
- sprite.show();
- return true;
+ for (x = 0; x <= dimensions.width - sprite.width; x++) {
+ for (y = 0; y <= dimensions.height - sprite.height; y++) {
+ sprite.x = x;
+ sprite.y = y;
+
+ intersection = this.intersection(sprite, placed);
+console.log("-",$(intersection).attr("name"));
+ if (!intersection) {
+ placed.push(sprite);
+ sprite.show();
+ return true;
+ }
+
+ y = intersection.y + intersection.height - 1;
}
-
- y = intersection.y + intersection.height - 1;
+
+ x = intersection.x + intersection.width - 1;
}
dimensions.width += sprite.width;
@@ -98,6 +121,22 @@ function ($, util, BaseLayout) {
}
return false;
+ },
+
+ /**
+ * ### @isLimitable
+ * Returns whether rows/colums in layout are limitable
+ */
+ isLimitable : function() {
+ return true;
+ },
+
+ /**
+ * ### @setLimit
+ * Limit the number of rows
+ */
+ setLimit : function(limit) {
+ this.rowlimit = limit;
}
});
diff --git a/src/js/manager/layout.js b/src/js/manager/layout.js
index 5913c9b3..0c92fd37 100644
--- a/src/js/manager/layout.js
+++ b/src/js/manager/layout.js
@@ -39,6 +39,26 @@ function ($, CompactLayout, VerticalLayout, HorizontalLayout) {
this.manager = new Manager();
},
+ /**
+ * ### @isLimitable
+ * Returns whether working layout manager is limitable
+ *
+ * @param null
+ */
+ isLimitable: function () {
+ return this.manager.isLimitable();
+ },
+ /**
+ * ### @limitRows
+ * Set the working layout manager instance by type
+ *
+ * @param {number} limit value for the limit
+ */
+ setLimit: function (limit) {
+ if(this.manager.isLimitable()) {
+ this.manager.setLimit(limit);
+ }
+ },
/**
* ### @getDimensions
diff --git a/src/js/module/stitches.js b/src/js/module/stitches.js
index 4dbe1166..66690fe7 100644
--- a/src/js/module/stitches.js
+++ b/src/js/module/stitches.js
@@ -165,6 +165,7 @@ function($, Modernizr, store, util, templates, fileManager, layoutManager, style
});
layoutManager.set(this.settings.layout);
stylesheetManager.set(this.settings.stylesheet);
+ this.updateProps();
},
/**
@@ -286,10 +287,18 @@ function($, Modernizr, store, util, templates, fileManager, layoutManager, style
"change": function (e) {
var $checked = this.$element.find("input[name=layout]:checked");
var value = $checked.val();
-
this.source.layout = value;
layoutManager.set(value);
-
+ self.updateSettings();
+ layoutManager.setLimit(
+ this.$element.find("input[name=limit]").val());
+ }
+ },
+ limit: {
+ "change": function (e) {
+ var value = $(e.currentTarget).val();
+ self.settings.limit = value;
+ layoutManager.setLimit(value);
self.updateSettings();
}
},
@@ -416,6 +425,7 @@ function($, Modernizr, store, util, templates, fileManager, layoutManager, style
// update ui
this.showOverlay();
this.canvas.reset();
+ this.updateProps();
// store settings
if (store && !store.disabled) {
@@ -442,6 +452,17 @@ function($, Modernizr, store, util, templates, fileManager, layoutManager, style
hideOverlay: function (e) {
this.$overlay.fadeOut("fast");
},
+
+ /**
+ * ### @updateProps
+ * Update Dependent Properties
+ *
+ * @param {event} e The event object
+ */
+ updateProps: function (e) {
+ this.$element.find("input[name=limit]")
+ .prop('disabled', !layoutManager.isLimitable());
+ },
/**
* ### @openAbout
@@ -793,6 +814,7 @@ function($, Modernizr, store, util, templates, fileManager, layoutManager, style
// update settings
layoutManager.set(this.settings.layout);
+ layoutManager.setLimit(this.settings.limit);
stylesheetManager.set(this.settings.stylesheet);
this.updateSettings();
diff --git a/src/templates/stitches.tpl b/src/templates/stitches.tpl
index db7c89ce..4defbc06 100644
--- a/src/templates/stitches.tpl
+++ b/src/templates/stitches.tpl
@@ -88,6 +88,14 @@
</label>
</div>
</div>
+
+
+ <div class="control-group">
+ <label class="control-label">Fixed Limit</label>
+ <div class="controls">
+ <input name="limit" disabled type="number" placeholder="Limit of rows/columns...">
+ </div>
+ </div>
<div class="control-group">
<label class="control-label">CSS/LESS</label>