Skip to content
Snippets Groups Projects
Commit bfd151e0 authored by Alexander Slansky's avatar Alexander Slansky
Browse files

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

parent f08f571c
No related branches found
No related tags found
No related merge requests found
......@@ -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 ...');
......
......@@ -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)),
......
{
"name": "css-sprite",
"version": "0.7.0-beta3",
"version": "0.8.0-beta1",
"description": "css sprite generator",
"license": "MIT",
"repository": {
......
......@@ -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]
......
......@@ -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/**')
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment