use layout for horizontal and vertical oriantation / add binary tree test / bump version

bin/cli.js

@@ -47,7 +47,7 @@ var opts = require('nomnom')
   })
   .option('style', {
     abbr: 's',
-    help: 'file to write css to, if ommited no css is written'
+    help: 'file to write css to, if omitted no css is written'
   })
   .option('watch', {
     abbr: 'w',
@@ -61,14 +61,14 @@ var opts = require('nomnom')
   .option('orientation', {
     choices: ['vertical', 'horizontal', 'binary-tree'],
     default: 'vertical',
-    help: 'orientation of the sprite image'
+    help: 'orientation of the sprite image (vertical|horizontal|binary-tree)'
   })
   .option('prefix', {
     help: 'prefix for the class name used in css (without .)'
   })
   .script('css-sprite')
   .parse();
-  
+
 if (opts.watch) {
   gaze(opts.src, function () {
     console.log('Watching for file changes ...');

lib/css-sprite.js

@@ -17,43 +17,22 @@ json2css.addTemplate('sprite', require(path.join(__dirname, 'templates/sprite.js
 module.exports = function (opt) {
   opt = lodash.extend({}, {name: 'sprite.png', margin: 5, processor: 'css', cssPath: '../images', orientation: 'vertical'}, opt);
   opt.styleExtension = (opt.processor === 'stylus') ? 'styl' : opt.processor;
-  var sprites = [];
   var ctxHeight = 0;
   var ctxWidth = 0;
-  var layer = layout('binary-tree');
+  var layoutOrientation = opt.orientation === 'vertical' ? 'top-down' : opt.orientation === 'horizontal' ? 'left-right' : 'binary-tree';
+  var layer = layout(layoutOrientation);
 
   function queue (file, img) {
     var spriteName = replaceExtension(file.relative, '').replace(/\/|\\|\ /g, '-');
-    sprites.push({
-      'img': img,
-      'name': spriteName,
-      'x': opt.orientation === 'vertical' ? opt.margin : ctxWidth + opt.margin,
-      'y': opt.orientation === 'vertical' ? ctxHeight + opt.margin: opt.margin,
-      'width': img.width,
-      'height': img.height,
-      'image': path.join(opt.cssPath, opt.name)
-    });
-
-    // binary-tree
-    if (opt.orientation === 'binary-tree') {
-      layer.addItem({
-        height: img.height + 2 * opt.margin,
-        width: img.width + 2 * opt.margin,
-        meta: spriteName
-      });
-    }
-    else if (opt.orientation === 'vertical') {
-      ctxHeight = ctxHeight + img.height + 2 * opt.margin;
-      if (img.width + 2 * opt.margin > ctxWidth) {
-        ctxWidth = img.width + 2 * opt.margin;
-      }
-    }
-    else {
-      ctxWidth = ctxWidth + img.width + 2 * opt.margin;
-      if (img.height + 2 * opt.margin > ctxHeight) {
-        ctxHeight = img.height + 2 * opt.margin;
+    layer.addItem({
+      height: img.height + 2 * opt.margin,
+      width: img.width + 2 * opt.margin,
+      meta: {
+        name: spriteName,
+        img: img,
+        image: path.join(opt.cssPath, opt.name)
       }
-    }
+    });
   }
 
   function queueImages (file, enc, cb) {
@@ -80,28 +59,11 @@ module.exports = function (opt) {
     img.src = file.contents;
   }
 
-  function createCanvas () {
-    var canvas = new Canvas(ctxWidth, ctxHeight);
-    var ctx = canvas.getContext('2d');
-    lodash.each(sprites, function (sprite) {
-      sprite.total_width = ctxWidth;
-      sprite.total_height = ctxHeight;
-      ctx.drawImage(sprite.img, sprite.x, sprite.y, sprite.width, sprite.height);
-    });
-    return canvas;
-  }
-
-  function createBinaryTreeCanvas () {
-    var layerInfo = layer.export();
+  function createCanvas (layerInfo) {
     var canvas = new Canvas(layerInfo.width, layerInfo.height);
     var ctx = canvas.getContext('2d');
-    lodash.each(sprites, function (sprite, index) {
-      var layerItem = layerInfo.items[index];
-      sprite.total_width = layerInfo.width;
-      sprite.total_height = layerInfo.height;
-      sprite.x = layerItem.x;
-      sprite.y = layerItem.y;
-      ctx.drawImage(sprite.img, layerItem.x, layerItem.y, layerItem.width, layerItem.height);
+    lodash.each(layerInfo.items, function (sprite, index) {
+      ctx.drawImage(sprite.meta.img, sprite.x, sprite.y, sprite.width, sprite.height);
     });
     return canvas;
   }
@@ -115,7 +77,21 @@ module.exports = function (opt) {
     return canvas;
   }
 
-  function createStyle (sprite, retinaSprite) {
+  function createStyle (layerInfo, sprite, retinaSprite) {
+    var sprites = [];
+    lodash.each(layerInfo.items, function (sprite, index) {
+      sprites.push({
+        'name': sprite.meta.name,
+        'x': sprite.x,
+        'y': sprite.y,
+        'width': sprite.width,
+        'height': sprite.height,
+        'total_width': layerInfo.width,
+        'total_height': layerInfo.height,
+        'image': sprite.meta.image
+      });
+    });
+
     if (retinaSprite) {
       sprites.unshift({
         name: retinaSprite.relative,
@@ -124,7 +100,7 @@ module.exports = function (opt) {
         total_width: sprite.canvas.width,
         total_height: sprite.canvas.height
       });
-      lodash(sprites).each(function (sprite, i) {
+      lodash(layerInfo.items).each(function (sprite, i) {
         sprites[i].x = Math.floor(sprite.x / 2);
         sprites[i].y = Math.floor(sprite.y / 2);
         sprites[i].width = Math.floor(sprite.width / 2);
@@ -139,12 +115,14 @@ module.exports = function (opt) {
       total_width: sprite.canvas.width,
       total_height: sprite.canvas.height
     });
+
     return json2css(sprites, {'format': 'sprite', formatOpts: {'cssClass': opt.prefix, 'processor': opt.processor}});
   }
 
   function createSprite (cb) {
+    var layerInfo = layer.export();
     var sprite, nonRetinaSprite, style;
-    if (sprites.length === 0) {
+    if (layerInfo.items.length === 0) {
       cb();
       return; // ignore
     }
@@ -152,7 +130,7 @@ module.exports = function (opt) {
       base: opt.out,
       relative: opt.name,
       path: path.join(opt.out, opt.name),
-      canvas: opt.orientation === 'binary-tree' ? createBinaryTreeCanvas() : createCanvas()
+      canvas: createCanvas(layerInfo)
     };
 
     if (opt.retina) {
@@ -182,7 +160,7 @@ module.exports = function (opt) {
     }
 
     if (opt.style || opt.base64) {
-      style = opt.retina ? createStyle(nonRetinaSprite, sprite) : createStyle(sprite);
+      style = opt.retina ? createStyle(layerInfo, nonRetinaSprite, sprite) : createStyle(layerInfo, sprite);
       this.push(new File({
         base: !opt.base64 ? path.dirname(opt.style) : opt.out,
         path: opt.style ? opt.style : path.join(opt.out, replaceExtension(opt.name, '.' + opt.styleExtension)),

package.json

 {
   "name": "css-sprite",
-  "version": "0.7.0-beta3",
+  "version": "0.8.0-beta1",
   "description": "css sprite generator",
   "license": "MIT",
   "repository": {

readme.md

@@ -4,7 +4,7 @@
 
 > A css sprite generator.
 
-> Generates sprites and propper css files out of a directory of images.
+> Generates sprites and proper css files out of a directory of images.
 
 > Supports retina sprites.
 
@@ -44,10 +44,10 @@ Options:
    -n, --name             name of sprite file  [sprite.png]
    -p, --processor        output format of the css. one of css, less, sass, scss or stylus  [css]
    -r, --retina           generate both retina and standard sprites. src images have to be in retina resolution
-   -s, --style            file to write css to, if ommited no css is written
+   -s, --style            file to write css to, if omitted no css is written
    -w, --watch            continuously create sprite
    --margin               margin in px between tiles  [5]
-   --orientation          orientation of the sprite image  [vertical]
+   --orientation          orientation of the sprite image (vertical|horizontal|binary-tree) [vertical]
    --prefix               prefix for the class name used in css (without .) [icon]
 ```
 
@@ -67,7 +67,7 @@ sprite.create(options, cb);
 * **retina:** generate both retina and standard sprites. src images have to be in retina resolution
 * **style:** file to write css to, if omitted no css is written
 * **margin:** margin in px between tiles  [5]
-* **orientation:** orientation of the sprite image [vertical]
+* **orientation:** orientation of the sprite image (vertical|horizontal|binary-tree) [vertical]
 * **prefix:** prefix for the class name used in css (without .) [icon]
 
 

test/css-sprite.js

@@ -66,6 +66,25 @@ describe('css-sprite (lib/css-sprite.js)', function () {
       .on('data', noop)
       .on('end', done);
   });
+  it('should return a object stream with a sprite in binary-tree format', function (done) {
+    vfs.src('./test/fixtures/**')
+      .pipe(sprite({
+        out: './dist/img',
+        name: 'sprites.png',
+        orientation: 'binary-tree'
+      }))
+      .pipe(through2.obj(function (file, enc, cb) {
+        var img = new Image();
+        img.src = file.contents;
+        file.path.should.equal('dist/img/sprites.png');
+        file.relative.should.equal('sprites.png');
+        img.width.should.equal(276);
+        img.height.should.equal(276);
+        cb();
+      }))
+      .on('data', noop)
+      .on('end', done);
+  });
   it('should return a object stream with a sprite and a css file', function (done) {
     var png, css;
     vfs.src('./test/fixtures/**')