Alpha nodejs support

README.md

@@ -1,4 +1,4 @@
-Before doing all dev stuff make sure you have node installed. After that, run `npm install` in the main directory to install the node module dependencies.
+Before doing all dev stuff make sure you have node installed. After that, run `npm install --dev` in the main directory to install the node module dependencies.
 
 Run `grunt --help` to see all build options.
 
@@ -23,6 +23,48 @@ KineticJS is covered with hundreds of tests and well over a thousand assertions.
 
 Run `grunt gen-doc` and see created 'documentation' folder.
 
+#NodeJS
+
+Support of NodeJS is in alpha state!
+And not published in npm.
+
+We are using (node-canvas)[https://github.com/LearnBoost/node-canvas] to create canvas element.
+
+* You have to install node-canvas depependencies (https://github.com/LearnBoost/node-canvas/wiki/_pages)[https://github.com/LearnBoost/node-canvas/wiki/_pages]
+* Run `npm install KineticJS`
+
+###Example
+```javascript
+var fs = require('fs'),
+    Kinetic = require('KineticJS');
+
+var layer = new Kinetic.Layer({
+    width : 200,
+    height : 200
+});
+
+var rect = new Kinetic.Rect({
+    width : 100,
+    height : 100,
+    x : 50,
+    y : 50,
+    fill : 'green'
+});
+var text = new Kinetic.Text({
+    text : 'Generated inside node js',
+    x : 20,
+    y : 20,
+    fill : 'black'
+});
+layer.add(rect).add(text);
+layer.draw();
+
+var stream = layer.createPNGStream();
+var file = fs.createWriteStream(__dirname + '/helloworld.png');
+stream.on('data', function(chunk) {
+  file.write(chunk);
+});
+```
 
 #Pull Requests
 I'd be happy to review any pull requests that may better the KineticJS project, in particular if you have a bug fix, enhancement, or a new shape (see `src/shapes` for examples).  Before doing so, please first make sure that all of the tests pass (`grunt test`). 

nodejs-demo.js

@@ -0,0 +1,29 @@
+var fs = require('fs'),
+    Kinetic = require('./kinetic');
+
+var layer = new Kinetic.Layer({
+    width : 200,
+    height : 200
+});
+
+var rect = new Kinetic.Rect({
+    width : 100,
+    height : 100,
+    x : 50,
+    y : 50,
+    fill : 'green'
+});
+var text = new Kinetic.Text({
+    text : 'Generated inside node js',
+    x : 20,
+    y : 20,
+    fill : 'black'
+});
+layer.add(rect).add(text);
+layer.draw();
+
+var stream = layer.createPNGStream();
+var file = fs.createWriteStream(__dirname + '/helloworld.png');
+stream.on('data', function(chunk) {
+  file.write(chunk);
+});

package.json

@@ -22,11 +22,14 @@
     "grunt-contrib-watch": "^0.5.3"
   },
   "readmeFilename": "README.md",
-  "main": "Gruntfile.js",
+  "main": "kinetic.js",
   "repository": {
     "type": "git",
     "url": "git://github.com/ericdrowell/KineticJS.git"
   },
   "author": "Eric Rowell",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "canvas": "^1.1.3"
+  }
 }

src/Animation.js

@@ -1,10 +1,10 @@
-(function() {
+(function(root) {
     var BATCH_DRAW_STOP_TIME_DIFF = 500;
 
     var now =(function() {
-        if (window.performance && window.performance.now) {
+        if (root.performance && root.performance.now) {
             return function() {
-                return window.performance.now();
+                return root.performance.now();
             };
         }
         else {
@@ -15,20 +15,20 @@
     })();
 
     var RAF = (function() {
-        return window.requestAnimationFrame
-            || window.webkitRequestAnimationFrame
-            || window.mozRequestAnimationFrame
-            || window.oRequestAnimationFrame
-            || window.msRequestAnimationFrame
+        return root.requestAnimationFrame
+            || root.webkitRequestAnimationFrame
+            || root.mozRequestAnimationFrame
+            || root.oRequestAnimationFrame
+            || root.msRequestAnimationFrame
             || FRAF;
     })();
 
     function FRAF(callback) {
-        window.setTimeout(callback, 1000 / 60);
+        root.setTimeout(callback, 1000 / 60);
     }
 
     function requestAnimFrame() {
-        return RAF.apply(window, arguments);
+        return RAF.apply(root, arguments);
     }
     
     /**
@@ -294,4 +294,4 @@
             layer.batchDraw();
         });
     };
-})();
+})(this);

src/Canvas.js

@@ -1,6 +1,6 @@
 (function() {
     // calculate pixel ratio
-    var canvas = document.createElement('canvas'),
+    var canvas = Kinetic.Util.createCanvasElement(),
         context = canvas.getContext('2d'),
         // if using a mobile device, calculate the pixel ratio.  Otherwise, just use
         // 1.  For desktop browsers, if the user has zoom enabled, it affects the pixel ratio
@@ -44,7 +44,7 @@
             var pixelRatio = config.pixelRatio || Kinetic.pixelRatio || _pixelRatio;
 
             this.pixelRatio = pixelRatio;
-            this._canvas = document.createElement('canvas');
+            this._canvas = Kinetic.Util.createCanvasElement();
 
             // set inline styles
             this._canvas.style.padding = 0;

src/DragAndDrop.js

@@ -251,6 +251,10 @@
      * node.draggable(false);
      */
 
+
+    if (!Kinetic.Util.isBrowser()) {
+        return;
+    }
     var html = document.documentElement;
     html.addEventListener('mouseup', Kinetic.DD._endDragBefore, true);
     html.addEventListener('touchend', Kinetic.DD._endDragBefore, true);

src/Global.js

@@ -31,7 +31,7 @@
  */
 /*jshint -W079, -W020*/
 var Kinetic = {};
-(function() {
+(function(root) {
     Kinetic = {
         // public
         version: '@@version',
@@ -54,7 +54,8 @@ var Kinetic = {};
 
         // user agent  
         UA: (function() {
-            var ua = navigator.userAgent.toLowerCase(),
+            var userAgent = (root.navigator && root.navigator.userAgent) || '';
+            var ua = userAgent.toLowerCase(),
                 // jQuery UA regex
                 match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
                 /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
@@ -64,7 +65,7 @@ var Kinetic = {};
                 [],
 
                 // adding mobile flag as well
-                mobile = !!(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i));
+                mobile = !!(userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i));
 
             return {
                 browser: match[ 1 ] || '',
@@ -262,7 +263,7 @@ var Kinetic = {};
             }
         }
     };
-})();
+})(this);
 
 // Uses Node, AMD or browser globals to create a module.
 
@@ -286,16 +287,15 @@ var Kinetic = {};
         // Node. Does not work with strict CommonJS, but
         // only CommonJS-like enviroments that support module.exports,
         // like Node.
-        module.exports = factory();
+        var Canvas = require('canvas');
+        var KineticJS = factory();
+        Kinetic._nodeCanvas = Canvas;
+        module.exports = KineticJS;
     }
     else if( typeof define === 'function' && define.amd) {
         // AMD. Register as an anonymous module.
         define(factory);
     }
-    else {
-        // Browser globals (root is window)
-        root.returnExports = factory();
-    }
 }(this, function() {
 
     // Just return a value to define the module export.

src/Layer.js

@@ -32,6 +32,9 @@
             this.hitCanvas = new Kinetic.HitCanvas();
             // call super constructor
             Kinetic.Container.call(this, config);
+            if (!Kinetic.Util.isBrowser()) {
+                this.canvas.setSize(this.attrs.width, this.attrs.height);
+            }
         },
         _validateAdd: function(child) {
             var type = child.getType();
@@ -39,6 +42,9 @@
                 Kinetic.Util.error('You may only add groups and shapes to a layer.');
             }
         },
+        createPNGStream : function() {
+            return this.canvas._canvas.createPNGStream();
+        },
         /**
          * get visible intersection shape. This is the preferred
          * method for determining if a point intersects a shape or not

src/Util.js

@@ -367,6 +367,20 @@
             }
             return names.length > 0;
         },
+        createCanvasElement: function() {
+            var canvas;
+            if (Kinetic.Util.isBrowser()) {
+                canvas = document.createElement('canvas');
+            } else {
+                // nodejs way
+                canvas = new Kinetic._nodeCanvas(200,200);
+            }
+            canvas.style = canvas.style || {};
+            return canvas;
+        },
+        isBrowser: function() {
+            return (typeof exports !==  'object');
+        },
         _isInDocument: function(el) {
             while(el = el.parentNode) {
                 if(el == document) {

src/filters/Kaleidoscope.js

@@ -147,7 +147,7 @@
     //Kinetic.Filters.FromPolar = Kinetic.Util._FilterWrapDoubleBuffer(FromPolar);
 
     // create a temporary canvas for working - shared between multiple calls
-    var tempCanvas = document.createElement('canvas');
+    var tempCanvas = Kinetic.Util.createCanvasElement();
 
     /*
      * Kaleidoscope Filter. 

src/shapes/Text.js

@@ -1,7 +1,7 @@
 (function() {
     // constants
     var AUTO = 'auto',
-        CANVAS = 'canvas',
+        //CANVAS = 'canvas',
         CENTER = 'center',
         CHANGE_KINETIC = 'Change.kinetic',
         CONTEXT_2D = '2d',
@@ -22,7 +22,7 @@
 
         // cached variables
         attrChangeListLen = ATTR_CHANGE_LIST.length,
-        dummyContext = document.createElement(CANVAS).getContext(CONTEXT_2D);
+        dummyContext = Kinetic.Util.createCanvasElement().getContext(CONTEXT_2D);
 
     /**
      * Text constructor