From 9397a96127a6d7b18828c80b14479fe514f20561 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9B=D0=B0=D0=B2=D1=80=D1=91=D0=BD=D0=BE=D0=B2=20=D0=90?= =?UTF-8?q?=D0=BD=D1=82=D0=BE=D0=BD?= Date: Fri, 28 Feb 2014 10:37:57 +0800 Subject: [PATCH] Better NodeJS support (full stage support) --- nodejs-demo.js | 56 ++++++++++++++++++++++++++++++++++------- src/Animation.js | 22 ++++++++-------- src/DragAndDrop.js | 6 +---- src/Global.js | 15 ++++++++++- src/Stage.js | 9 ++++--- src/Util.js | 16 ++++-------- src/plugins/TextPath.js | 2 +- 7 files changed, 84 insertions(+), 42 deletions(-) diff --git a/nodejs-demo.js b/nodejs-demo.js index 836d8209..4bff2b94 100644 --- a/nodejs-demo.js +++ b/nodejs-demo.js @@ -1,11 +1,13 @@ var fs = require('fs'), - Kinetic = require('./kinetic'); + Kinetic = require('./dist/kinetic-dev'); -var layer = new Kinetic.Layer({ - width : 200, - height : 200 +var stage = new Kinetic.Stage({ + width : 100, + height : 100 }); +var layer = new Kinetic.Layer(); +stage.add(layer); var rect = new Kinetic.Rect({ width : 100, height : 100, @@ -21,9 +23,45 @@ var text = new Kinetic.Text({ }); layer.add(rect).add(text); layer.draw(); +stage.setSize({ + width : 200, + height : 200 +}); -var stream = layer.createPNGStream(); -var file = fs.createWriteStream(__dirname + '/helloworld.png'); -stream.on('data', function(chunk) { - file.write(chunk); -}); \ No newline at end of file +// check tween works +var tween = new Kinetic.Tween({ + node : rect, + duration : 1, + x : -50 +}); +tween.play(); + +setTimeout(function(){ + stage.toDataURL({ + callback: function(data){ + // adding image to stage + var img = new Kinetic.window.Image(); + img.onload = function() { + var image = new Kinetic.Image({ + image : img, + x : 10 + }); + layer.add(image); + layer.draw(); + // save stage to disk + stage.toDataURL({ + callback: function(data){ + console.log(1); + var base64Data = data.replace(/^data:image\/png;base64,/,""); + + fs.writeFile("out.png", base64Data, 'base64', function(err) { + console.log(err); + }); + } + }); + }; + img.src = data; + + } + }); +}, 1050); \ No newline at end of file diff --git a/src/Animation.js b/src/Animation.js index 725ec93b..96fe2611 100644 --- a/src/Animation.js +++ b/src/Animation.js @@ -1,10 +1,10 @@ -(function(root) { +(function() { var BATCH_DRAW_STOP_TIME_DIFF = 500; var now =(function() { - if (root.performance && root.performance.now) { + if (Kinetic.root.performance && Kinetic.root.performance.now) { return function() { - return root.performance.now(); + return Kinetic.root.performance.now(); }; } else { @@ -15,20 +15,20 @@ })(); var RAF = (function() { - return root.requestAnimationFrame - || root.webkitRequestAnimationFrame - || root.mozRequestAnimationFrame - || root.oRequestAnimationFrame - || root.msRequestAnimationFrame + return Kinetic.root.requestAnimationFrame + || Kinetic.root.webkitRequestAnimationFrame + || Kinetic.root.mozRequestAnimationFrame + || Kinetic.root.oRequestAnimationFrame + || Kinetic.root.msRequestAnimationFrame || FRAF; })(); function FRAF(callback) { - root.setTimeout(callback, 1000 / 60); + Kinetic.root.setTimeout(callback, 1000 / 60); } function requestAnimFrame() { - return RAF.apply(root, arguments); + return RAF.apply(Kinetic.root, arguments); } /** @@ -294,4 +294,4 @@ layer.batchDraw(); }); }; -})(this); \ No newline at end of file +})((1,eval)('this')); \ No newline at end of file diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index 7579a492..1cc0da24 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -254,11 +254,7 @@ * node.draggable(false); */ - - if (!Kinetic.Util.isBrowser()) { - return; - } - var html = document.documentElement; + var html = Kinetic.document.documentElement; html.addEventListener('mouseup', Kinetic.DD._endDragBefore, true); html.addEventListener('touchend', Kinetic.DD._endDragBefore, true); diff --git a/src/Global.js b/src/Global.js index d4b94a58..362d6f38 100644 --- a/src/Global.js +++ b/src/Global.js @@ -288,15 +288,28 @@ var Kinetic = {}; // only CommonJS-like enviroments that support module.exports, // like Node. var Canvas = require('canvas'); + var jsdom = require('jsdom').jsdom; + var doc = jsdom('
'); + var KineticJS = factory(); + + Kinetic.document = doc; + Kinetic.window = Kinetic.document.createWindow(); + Kinetic.window.Image = Canvas.Image; + Kinetic.root = root; Kinetic._nodeCanvas = Canvas; module.exports = KineticJS; + return; } else if( typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(factory); } -}(this, function() { + Kinetic.document = document; + Kinetic.window = window; + Kinetic.root = root; + +}((1, eval)('this'), function() { // Just return a value to define the module export. // This example returns an object, but the module diff --git a/src/Stage.js b/src/Stage.js index 81944653..ec5d537c 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -57,6 +57,8 @@ Kinetic.Util.addMethods(Kinetic.Stage, { ___init: function(config) { this.nodeType = STAGE; + // default container id. usefull for nodejs + config.container = config.container || 'con'; // call super constructor Kinetic.Container.call(this, config); this._id = Kinetic.idCounter++; @@ -78,7 +80,7 @@ */ setContainer: function(container) { if( typeof container === STRING) { - container = document.getElementById(container); + container = Kinetic.document.getElementById(container); } this._setAttr(CONTAINER, container); return this; @@ -217,7 +219,7 @@ function drawLayer(n) { var layer = layers[n], layerUrl = layer.toDataURL(), - imageObj = new Image(); + imageObj = new Kinetic.window.Image(); imageObj.onload = function() { _context.drawImage(imageObj, 0, 0); @@ -624,12 +626,11 @@ }, _buildDOM: function() { var container = this.getContainer(); - // clear content inside container container.innerHTML = EMPTY_STRING; // content - this.content = document.createElement(DIV); + this.content = Kinetic.document.createElement(DIV); this.content.style.position = RELATIVE; this.content.style.display = INLINE_BLOCK; this.content.className = KINETICJS_CONTENT; diff --git a/src/Util.js b/src/Util.js index b9ee5814..2fa4351c 100644 --- a/src/Util.js +++ b/src/Util.js @@ -368,13 +368,7 @@ 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); - } + var canvas = Kinetic.document.createElement('canvas'); canvas.style = canvas.style || {}; return canvas; }, @@ -383,7 +377,7 @@ }, _isInDocument: function(el) { while(el = el.parentNode) { - if(el == document) { + if(el == Kinetic.document) { return true; } } @@ -427,7 +421,7 @@ // if arg is a string, then it's a data url else if(this._isString(arg)) { - imageObj = new Image(); + imageObj = new Kinetic.window.Image(); imageObj.onload = function() { callback(imageObj); }; @@ -436,7 +430,7 @@ //if arg is an object that contains the data property, it's an image object else if(arg.data) { - canvas = document.createElement(CANVAS); + canvas = Kinetic.Util.createCanvasElement(); canvas.width = arg.width; canvas.height = arg.height; var _context = canvas.getContext(CONTEXT_2D); @@ -591,7 +585,7 @@ * IE9 on Windows7 64bit will throw a JS error * if we don't use window.console in the conditional */ - if(window.console && console.warn) { + if(Kinetic.root.console && console.warn) { console.warn(KINETIC_WARNING + str); } }, diff --git a/src/plugins/TextPath.js b/src/plugins/TextPath.js index a484d667..9b424395 100644 --- a/src/plugins/TextPath.js +++ b/src/plugins/TextPath.js @@ -43,7 +43,7 @@ Kinetic.TextPath.prototype = { ___init: function(config) { var that = this; - this.dummyCanvas = document.createElement('canvas'); + this.dummyCanvas = Kinetic.Util.createCanvasElement(); this.dataArray = []; // call super constructor