diff --git a/Gemfile b/Gemfile new file mode 100644 index 00000000..a57b6808 --- /dev/null +++ b/Gemfile @@ -0,0 +1,4 @@ +source :rubygems + +gem 'rake' +gem 'uglifier' diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 00000000..c0ac0a8f --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,17 @@ +GEM + remote: http://rubygems.org/ + specs: + execjs (1.3.0) + multi_json (~> 1.0) + multi_json (1.1.0) + rake (0.9.2.2) + uglifier (1.2.3) + execjs (>= 0.3.0) + multi_json (>= 1.0.2) + +PLATFORMS + ruby + +DEPENDENCIES + rake + uglifier diff --git a/README.md b/README.md index 98f79c25..2b9de8b7 100644 --- a/README.md +++ b/README.md @@ -8,3 +8,11 @@ You can draw your own shapes or images using the existing canvas API, add event # Tutorials Check out the official [KineticJS Tutorials](http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/) hosted on [HTML5 Canvas Tutorials](http://www.html5canvastutorials.com/). + +# Building the library +To build the library, you need to have Ruby and Rubygems installed. After that, install the dependencies by running `bundle install`. + +To build a development version of the library, run `rake build:dev`. To build a minify version of the library, run `rake build:prod`. + +# Adding a new file in the lib directory +If you add a file in the lib directory, add into the array in the Rakefile. diff --git a/Rakefile b/Rakefile new file mode 100644 index 00000000..abbc908c --- /dev/null +++ b/Rakefile @@ -0,0 +1,37 @@ +# This is the list of files to concatenate. The first file will appear at the top of the final file. All files are relative to the lib directory. +FILES = [ + "Kinetic.js", "GlobalObject.js", "Node.js", "Container.js", "Stage.js", + "Layer.js", "Group.js", "Shape.js", "Rect.js", "Circle.js", "Image.js", + "Polygon.js", "RegularPolygon.js", "Star.js", "Text.js" +] + +def concatenate + content = "" + FILES.each do |file| + content << IO.read(File.expand_path('lib/' + file)) << "\n" + end + + return content +end + +namespace :build do + desc "Concatenate all the files in /lib into /dist/kinetic.js." + task :dev do + puts ":: Building the file /dist/kinetic.js..." + File.open("dist/kinetic.js", "w") do |file| + file.puts concatenate() + end + puts " -> Done!" + end + + desc "Concatenate all the files in /lib into /dist/kinetic.min.js and minify it." + task :prod do + puts ":: Building the file /dist/kinetic.min.js..." + require 'uglifier' + File.open("dist/kinetic.min.js", "w") do |file| + file.puts Uglifier.compile(concatenate()) + end + puts ":: Minifying the file /dist/kinetic.min.js..." + puts " -> Done!" + end +end diff --git a/dist/kinetic.js b/dist/kinetic.js index f6d4cf4f..eaea0e6a 100644 --- a/dist/kinetic.js +++ b/dist/kinetic.js @@ -25,6 +25,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ + /////////////////////////////////////////////////////////////////////// // Global Object /////////////////////////////////////////////////////////////////////// @@ -120,6 +121,7 @@ window.requestAnimFrame = (function(callback){ }; })(); + /////////////////////////////////////////////////////////////////////// // Node /////////////////////////////////////////////////////////////////////// @@ -1835,7 +1837,6 @@ Kinetic.Polygon.prototype = { // extend Shape Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape); - /////////////////////////////////////////////////////////////////////// // RegularPolygon /////////////////////////////////////////////////////////////////////// @@ -1889,7 +1890,6 @@ Kinetic.RegularPolygon.prototype = { // extend Shape Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape); - /////////////////////////////////////////////////////////////////////// // Star /////////////////////////////////////////////////////////////////////// @@ -2098,3 +2098,4 @@ Kinetic.Text.prototype = { }; // extend Shape Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape); + diff --git a/dist/kinetic.min.js b/dist/kinetic.min.js new file mode 100644 index 00000000..366b0143 --- /dev/null +++ b/dist/kinetic.min.js @@ -0,0 +1,31 @@ +/** + * KineticJS JavaScript Library v3.8.2 + * http://www.kineticjs.com/ + * Copyright 2012, Eric Rowell + * Licensed under the MIT or GPL Version 2 licenses. + * Date: Mar 03 2012 + * + * Copyright (C) 2011 - 2012 by Eric Rowell + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ +/////////////////////////////////////////////////////////////////////// +// Global Object +/////////////////////////////////////////////////////////////////////// +var Kinetic={};Kinetic.GlobalObject={stages:[],idCounter:0,isAnimating:!1,frame:{time:0,timeDiff:0,lastTime:0},drag:{moving:!1,node:undefined,offset:{x:0,y:0}},extend:function(a,b){for(var c in b.prototype)b.prototype.hasOwnProperty(c)&&(a.prototype[c]=b.prototype[c])},_isaCanvasAnimating:function(){for(var a=0;a1?g[1]:"";this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b})}},off:function(a){var b=a.split(" ");for(var c=0;c1){var h=f[1];for(var i=0;i0&&(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices())},moveToBottom:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices()},setZIndex:function(a){var b=this.index;this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices()},setAlpha:function(a){this.alpha=a},getAlpha:function(){return this.alpha},getAbsoluteAlpha:function(){var a=1,b=this;while(b.className!=="Stage")a*=b.alpha,b=b.parent;return a},_initDrag:function(){var a=Kinetic.GlobalObject,b=this;this.on("mousedown.initdrag touchstart.initdrag",function(c){var d=b.getStage(),e=d.getUserPosition();e&&(a.drag.node=b,a.drag.offset.x=e.x-b.x,a.drag.offset.y=e.y-b.y)})},_dragCleanup:function(){!this.drag.x&&!this.drag.y&&(this.off("mousedown.initdrag"),this.off("touchstart.initdrag"))},draggable:function(a){if(a){var b=!this.drag.x&&!this.drag.y;this.drag.x=!0,this.drag.y=!0,b&&this._initDrag()}else this.drag.x=!1,this.drag.y=!1,this._dragCleanup()},draggableX:function(a){if(a){var b=!this.drag.x&&!this.drag.y;this.drag.x=!0,b&&this._initDrag()}else this.drag.x=!1,this._dragCleanup()},draggableY:function(a){if(a){var b=!this.drag.x&&!this.drag.y;this.drag.y=!0,b&&this._initDrag()}else this.drag.y=!1,this._dragCleanup()},isDragging:function(){var a=Kinetic.GlobalObject;return a.drag.node!==undefined&&a.drag.node.id===this.id&&a.drag.moving},_handleEvents:function(a,b){function c(d){var e=d.eventListeners;if(e[a]){var f=e[a];for(var g=0;g0)this.remove(this.children[0])}},Kinetic.Stage=function(a,b,c){this.className="Stage",this.container=typeof a=="string"?document.getElementById(a):a,this.width=b,this.height=c,this.scale={x:1,y:1},this.dblClickWindow=400,this.targetShape=undefined,this.clickStart=!1,this.mousePos=undefined,this.mouseDown=!1,this.mouseUp=!1,this.touchPos=undefined,this.touchStart=!1,this.touchEnd=!1,this.bufferLayer=new Kinetic.Layer,this.backstageLayer=new Kinetic.Layer,this.bufferLayer.parent=this,this.backstageLayer.parent=this;var d=this.backstageLayer;this._stripLayer(d),this.bufferLayer.getCanvas().style.display="none",this.backstageLayer.getCanvas().style.display="none",this.bufferLayer.canvas.width=this.width,this.bufferLayer.canvas.height=this.height,this.container.appendChild(this.bufferLayer.canvas),this.backstageLayer.canvas.width=this.width,this.backstageLayer.canvas.height=this.height,this.container.appendChild(this.backstageLayer.canvas),this._listen(),this._prepareDrag();var e=Kinetic.GlobalObject.stages;e.push(this),this.id=Kinetic.GlobalObject.idCounter++,this.isAnimating=!1,this.onFrameFunc=undefined,Kinetic.Container.apply(this,[])},Kinetic.Stage.prototype={onFrame:function(a){this.onFrameFunc=a},start:function(){this.isAnimating=!0,Kinetic.GlobalObject._handleAnimation()},stop:function(){this.isAnimating=!1,Kinetic.GlobalObject._handleAnimation()},draw:function(){this._drawChildren()},_stripLayer:function(a){a.context.stroke=function(){},a.context.fill=function(){},a.context.fillRect=function(b,c,d,e){a.context.rect(b,c,d,e)},a.context.strokeRect=function(b,c,d,e){a.context.rect(b,c,d,e)},a.context.drawImage=function(){},a.context.fillText=function(){},a.context.strokeText=function(){}},_endDrag:function(a){var b=Kinetic.GlobalObject;b.drag.node&&b.drag.moving&&(b.drag.moving=!1,b.drag.node._handleEvents("ondragend",a)),b.drag.node=undefined},_prepareDrag:function(){var a=this;this.on("mousemove touchmove",function(b){var c=Kinetic.GlobalObject;if(c.drag.node){var d=a.getUserPosition();c.drag.node.drag.x&&(c.drag.node.x=d.x-c.drag.offset.x),c.drag.node.drag.y&&(c.drag.node.y=d.y-c.drag.offset.y),c.drag.node.getLayer().draw(),c.drag.moving||(c.drag.moving=!0,c.drag.node._handleEvents("ondragstart",b)),c.drag.node._handleEvents("ondragmove",b)}},!1),this.on("mouseup touchend mouseout",function(b){a._endDrag(b)})},setSize:function(a,b){var c=this.children;for(var d=0;d=0;c--){var d=b[c];if(d.className==="Shape"){var e=f(d);if(e)return!0}else g(d)}return!1}a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a);var b=this.backstageLayer,c=b.getContext(),d=this;b.clear();var e=!1,h=Kinetic.GlobalObject;if(h.drag.node===undefined)for(var i=this.children.length-1;i>=0;i--){var j=this.children[i];j.visible&&i>=0&&j.isListening&&g(j)&&(i=-1)}},_listen:function(){var a=this;this.container.addEventListener("mousedown",function(b){a.mouseDown=!0,a._handleEvent(b)},!1),this.container.addEventListener("mousemove",function(b){a.mouseUp=!1,a.mouseDown=!1,a._handleEvent(b)},!1),this.container.addEventListener("mouseup",function(b){a.mouseUp=!0,a.mouseDown=!1,a._handleEvent(b),a.clickStart=!1},!1),this.container.addEventListener("mouseover",function(b){a._handleEvent(b)},!1),this.container.addEventListener("mouseout",function(b){a.mousePos=undefined},!1),this.container.addEventListener("touchstart",function(b){b.preventDefault(),a.touchStart=!0,a._handleEvent(b)},!1),this.container.addEventListener("touchmove",function(b){b.preventDefault(),a._handleEvent(b)},!1),this.container.addEventListener("touchend",function(b){b.preventDefault(),a.touchEnd=!0,a._handleEvent(b)},!1)},getMousePosition:function(a){return this.mousePos},getTouchPosition:function(a){return this.touchPos},getUserPosition:function(a){return this.getTouchPosition()||this.getMousePosition()},_setMousePosition:function(a){var b=a.clientX-this._getContainerPosition().left+window.pageXOffset,c=a.clientY-this._getContainerPosition().top+window.pageYOffset;this.mousePos={x:b,y:c}},_setTouchPosition:function(a){if(a.touches!==undefined&&a.touches.length===1){var b=a.touches[0],c=b.clientX-this._getContainerPosition().left+window.pageXOffset,d=b.clientY-this._getContainerPosition().top+window.pageYOffset;this.touchPos={x:c,y:d}}},_getContainerPosition:function(){var a=this.container,b=0,c=0;while(a&&a.tagName!=="BODY")b+=a.offsetTop,c+=a.offsetLeft,a=a.offsetParent;return{top:b,left:c}},getContainer:function(){return this.container},getStage:function(){return this},getTargetShape:function(){return this.targetShape}},Kinetic.GlobalObject.extend(Kinetic.Stage,Kinetic.Container),Kinetic.Layer=function(a){this.className="Layer",this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.canvas.style.position="absolute",Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Layer.prototype={draw:function(){this._draw()},_draw:function(){this.clear(),this.visible&&this._drawChildren()},clear:function(){var a=this.getContext(),b=this.getCanvas();a.clearRect(0,0,b.width,b.height)},getCanvas:function(){return this.canvas},getContext:function(){return this.context},add:function(a){this._add(a)},remove:function(a){this._remove(a)}},Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Node),Kinetic.Group=function(a){this.className="Group",Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Group.prototype={_draw:function(){this.visible&&this._drawChildren()},add:function(a){this._add(a)},remove:function(a){this._remove(a)}},Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Node),Kinetic.Shape=function(a){this.className="Shape";if(a.stroke!==undefined||a.strokeWidth!==undefined)a.stroke===undefined?a.stroke="black":a.strokeWidth===undefined&&(a.strokeWidth=2);this.drawFunc=a.drawFunc,Kinetic.Node.apply(this,[a])},Kinetic.Shape.prototype={getContext:function(){return this.tempLayer.getContext()},getCanvas:function(){return this.tempLayer.getCanvas()},_draw:function(a){if(this.visible){var b=a.getStage(),c=a.getContext(),d=[];d.unshift(this);var e=this.parent;while(e.className!=="Stage")d.unshift(e),e=e.parent;for(var f=0;f