atlaspack - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

example/example.js

 // create a canvas
 var canvas = document.createElement('canvas');
 document.body.appendChild(canvas);
-canvas.width = 800;
-canvas.height = 533;
+canvas.width = 128;
+canvas.height = 128;
 
@@ -10,2 +10,9 @@ // create an atlas with our canvas
 
+function atlasPack(img) {
+  var node = atlas.pack(img);
+  if (node === false) {
+    atlas = atlas.expand(img);
+  }
+}
+
 // add images to our atlas
@@ -21,5 +28,6 @@ var texturePath = 'node_modules/painterly-textures/textures/';
   var img = new Image();
+  img.id = name;
   img.src = texturePath + name + '.png';
   img.onload = function() {
-    atlas.pack(img);
+    atlasPack(img);
   };
@@ -45,3 +53,3 @@ });
       img.onload = function() {
-        atlas.pack(img);
+        atlasPack(img);
       };
@@ -48,0 +56,0 @@ };

index.js

@@ -37,2 +37,3 @@ /*
   this.filled = false;
+  this._cache = [];
 }
@@ -49,11 +50,4 @@ module.exports = function() {
 Atlas.prototype.pack = function(rect) {
-  // if rect is an image
-  if (rect.nodeName && rect.nodeName === 'IMG') {
-    this.img = rect;
-    rect = new Rect(rect.x, rect.y, rect.width, rect.height);
-  }
-  // if rect is an object
-  if (!(rect instanceof Rect)) {
-    rect = new Rect(rect.x || 0, rect.y || 0, rect.w || rect.width, rect.h || rect.height);
-  }
+  this._cache = [];
+  rect = this._toRect(rect);
   if (this.left !== null) {
@@ -81,2 +75,54 @@ return this._ontoCanvas(this.left.pack(rect) || this.right.pack(rect));
 
+Atlas.prototype.expand = function(rect) {
+  var self = this;
+  rect = this._toRect(rect);
+
+  var atlas;
+  if (this.rect.w < this.rect.h) {
+    atlas = new Atlas(0, 0, this.rect.w + rect.w, this.rect.h);
+    atlas.right = new Atlas(this.rect.w, 0, rect.w, this.rect.h);
+    atlas.left = this;
+  } else {
+    atlas = new Atlas(0, 0, this.rect.w, this.rect.h + rect.h);
+    atlas.right = new Atlas(0, this.rect.h, this.rect.w, rect.h);
+    atlas.left = this;
+  }
+
+  ['canvas', 'context', 'img'].forEach(function(p) {
+    if (self[p]) {
+      atlas[p] = self[p];
+      self[p] = null;
+    }
+  });
+
+  // resize canvas
+  if (atlas.canvas) {
+    if (!atlas.context) {
+      atlas.context = atlas.canvas.getContext('2d');
+    }
+    var old = atlas.context.getImageData(0, 0, atlas.canvas.width, atlas.canvas.height);
+    atlas.canvas.width = atlas.rect.w;
+    atlas.canvas.height = atlas.rect.h;
+    atlas.context.putImageData(old, 0, 0);
+  }
+
+  return (atlas.pack(rect) === false) ? atlas.expand(rect) : atlas;
+};
+
+Atlas.prototype.index = function() {
+  var self = this;
+  if (self._cache.length > 0) {
+    return self._cache;
+  }
+  (function loop(atlas) {
+    if (atlas.left !== null) {
+      loop(atlas.left);
+      loop(atlas.right);
+    } else if (atlas.rect.name) {
+      self._cache.push(atlas.rect);
+    }
+  }(self));
+  return self._cache;
+};
+
 // if has an image and canvas, draw to the canvas as we go
@@ -89,4 +135,29 @@ Atlas.prototype._ontoCanvas = function(node) {
     this.context.drawImage(this.img, node.rect.x, node.rect.y, node.rect.w, node.rect.h);
+    node.rect.name = this.img.id || this.img.name || this.img.src || null;
   }
   return node;
 };
+
+// make sure we're always working with rects
+Atlas.prototype._toRect = function(rect) {
+  // if rect is an image
+  if (rect.nodeName && rect.nodeName === 'IMG') {
+    this.img = rect;
+    rect = new Rect(rect.x, rect.y, rect.width, rect.height);
+  }
+  // if rect is an object
+  if (!(rect instanceof Rect)) {
+    rect = new Rect(rect.x || 0, rect.y || 0, rect.w || rect.width, rect.h || rect.height);
+  }
+  return rect;
+};
+
+Atlas.prototype._debug = function() {
+  if (!this.canvas) { return; }
+  var context = this.canvas.getContext('2d');
+  this.index().forEach(function(rect) {
+    context.lineWidth = 1;
+    context.strokeStyle = 'red';
+    context.strokeRect(rect.x, rect.y, rect.w, rect.h);
+  });
+};

package.json

 {
   "name": "atlaspack",
-  "description": "Pack images into a texture atlas.",
-  "version": "0.1.0",
+  "description": "Pack rectangles (or images) into a rectangle (or canvas texture atlas).",
+  "version": "0.2.0",
   "homepage": "https://github.com/shama/atlaspack",
@@ -38,4 +38,6 @@ "author": {
     "texture",
-    "atlas"
+    "atlas",
+    "geometry",
+    "spritemap"
   ]
 }

README.md

 # atlaspack
 
-Pack images into a texture atlas. View the
+Pack rectangles (or images) into a rectangle (or canvas texture atlas). View the
 [demo](http://shama.github.com/atlaspack/).
@@ -21,2 +21,3 @@
   var img = new Image();
+  img.id = i;
   img.src = 'images/' + i + '.png';
@@ -44,2 +45,3 @@ img.onload = function() {
   var div = document.createElement('div');
+  div.style.position = 'absolute';
   div.style.width  = width + 'px';
@@ -55,2 +57,83 @@ div.style.height = height + 'px';
 
+## api
+
+### `atlaspack([...])`
+Takes either 1 `canvas` argument, 2 `width, height` arguments or 4
+`x, y, width, height` arguments. Returns an instance of `Atlas`.
+
+### `atlaspack.Atlas([...])`
+Takes either 1 `canvas` argument, 2 `width, height` arguments or 4
+`x, y, width, height` arguments.
+
+#### `atlas.pack(rect || image || object)`
+Recursively tries to pack `rect` (or `image`, `object`) into the atlas. Will
+return `false` if fails to fit the `rect` otherwise will return the atlas node
+the `rect` has been packed into:
+
+```js
+var Atlas = require('atlaspack').Atlas;
+var Rect = require('atlaspack').Rect;
+
+var atlas = new Atlas(128, 128), node;
+
+node = atlas.pack(new Rect(0, 0, 32, 32));
+node = atlas.pack({x: 0, y: 0, w: 32, h: 32});
+
+var img = new Image();
+img.src = 'myimage.png';
+img.onload = function() {
+  node = atlas.pack(img);
+};
+```
+
+#### `atlas.expand(rect || img || object)`
+Will recursively expand the `atlas` to fit a new `rect` then pack the `rect`
+into the expanded `atlas`. Returns the newly expanded `atlas`:
+
+```js
+var atlas = require('atlaspack')(128, 128);
+var dontfit = {x: 0, y: 0, w: 256, h: 256};
+var node = atlas.pack(dontfit);
+if (node === false) {
+  atlas = atlas.expand(dontfit);
+}
+```
+
+#### `atlas.index()`
+Returns a flat array of `rect`s which have images within the atlas. Useful for
+retrieving an atlas key:
+
+```js
+var atlas = require('atlaspack')(128, 128);
+
+function done() {
+  atlas.index().forEach(function(rect) {
+    console.log('Name: ' + rect.name);
+    console.log('Coords: ' + rect.x + ', ' + rect.y);
+  });
+}
+
+for (var i = 0; i < 100; i++) {
+  var img = new Image();
+  img.src = 'images/' + i + '.png';
+
+  // Will use the id || name || src of the image as the rect.name
+  img.id = i;
+
+  img.onload = function() {
+    atlas.pack(img);
+    if (i === 99) done();
+  };
+}
+```
+
+### `atlaspack.Rect(x, y, w, h)`
+Creates a rectangle instance.
+
+#### `rect.fitsIn(rect)`
+Returns a `boolean` whether a `rect` fits within another `rect`.
+
+#### `rect.sameSizeAs(rect)`
+Returns a `boolean` whether a `rect` is the same size as another `rect`.
+
 ## install
@@ -64,2 +147,3 @@ With [npm](http://npmjs.org) do:
 ## release history
+* 0.2.0 - Add expand and index methods.
 * 0.1.0 - initial release
@@ -66,0 +150,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13883

increased by44.71%

Lines of code

254

increased by38.04%

Number of lines in readme file

150

increased by127.27%

No dependency changes