KineticJs.js

/**
 * KineticJS JavaScript Library v3.6.2
 * http://www.kineticjs.com/
 * Copyright 2012, Eric Rowell
 * Licensed under the MIT or GPL Version 2 licenses.
 * Date: Jan 21 2012
 *
 * Copyright (C) 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.
 */
var Kinetic={};Kinetic.GLOBALS={shapeIdCounter:0};Kinetic.Link=function(a){this.shape=a;a.link=this;this.id=a.id;this.index=undefined;this.nextId=undefined;this.prevId=undefined};Kinetic.Layer=function(a){this.name=a;this.shapeIndexCounter=0;this.isListening=true;this.shapeNames={};this.canvas=document.createElement("canvas");this.context=this.canvas.getContext("2d");this.canvas.style.position="absolute";this.links=[];this.linkHash={};this.headId=undefined;this.tailId=undefined};Kinetic.Layer.prototype.listen=function(a){this.isListening=a};Kinetic.Layer.prototype.clear=function(){var b=this.getContext();var a=this.getCanvas();b.clearRect(0,0,a.width,a.height)};Kinetic.Layer.prototype.getCanvas=function(){return this.canvas};Kinetic.Layer.prototype.getContext=function(){return this.context};Kinetic.Layer.prototype.getShapes=function(){var a=[];for(var b=0;b<this.links.length;b++){a.push(this.links[b].shape)}return a};Kinetic.Layer.prototype.draw=function(){this.clear();var b=this.links;for(var c=0;c<b.length;c++){var a=b[c].shape;a.draw(a.layer)}};Kinetic.Layer.prototype.addLink=function(c){var a=c.shape;a.layer=this;this.links.push(c);this.linkHash[c.id]=c;c.index=this.links.length-1;if(a.isListening){if(this.tailId===undefined){this.tailId=c.id;this.headId=c.id}else{var b=this.linkHash[this.tailId];b.nextId=c.id;c.prevId=b.id;this.tailId=c.id}}};Kinetic.Layer.prototype.add=function(a){if(a.name){this.shapeNames[a.name]=a}a.id=Kinetic.GLOBALS.shapeIdCounter++;var b=new Kinetic.Link(a);this.addLink(b)};Kinetic.Layer.prototype.getShape=function(a){return this.shapeNames[a]};Kinetic.Layer.prototype.remove=function(a){var b=a.link;this.removeLink(b);this.shape=null;this.link=null};Kinetic.Layer.prototype.removeLink=function(a){a.shape.layer=undefined;this.unlink(a);this.links.splice(a.index,1);this.linkHash[a.id]=undefined;this.setLinkIndices()};Kinetic.Layer.prototype.unlink=function(a){if(a.id===this.headId){this.headId=a.nextId}if(a.id===this.tailId){this.tailId=a.prevId}if(a.prevId!==undefined){this.linkHash[a.prevId].nextId=a.nextId}if(a.nextId!==undefined){this.linkHash[a.nextId].prevId=a.prevId}a.prevId=undefined;a.nextId=undefined};Kinetic.Layer.prototype.setLinkIndices=function(){for(var a=0;a<this.links.length;a++){this.links[a].index=a}};Kinetic.Stage=function(b,d,a){this.container=document.getElementById(b);this.width=d;this.height=a;this.scale={x:1,y:1};this.layerIdCounter=0;this.dblClickWindow=400;this.targetShape={};this.clickStart=false;this.layerNames={};this.mousePos=null;this.mouseDown=false;this.mouseUp=false;this.touchPos=null;this.touchStart=false;this.touchEnd=false;this.layers=[];var e=this;this.bufferLayer=new Kinetic.Layer();this.backstageLayer=new Kinetic.Layer();var h=this.backstageLayer;h.context.stroke=function(){};h.context.fill=function(){};h.context.fillRect=function(j,l,k,i){h.context.rect(j,l,k,i)};h.context.strokeRect=function(j,l,k,i){e.context.rect(j,l,k,i)};h.context.drawImage=function(){};h.context.fillText=function(){};h.context.strokeText=function(){};this.bufferLayer.getCanvas().style.display="none";this.backstageLayer.getCanvas().style.display="none";this.bufferLayer.stage=this;this.bufferLayer.canvas.width=this.width;this.bufferLayer.canvas.height=this.height;this.container.appendChild(this.bufferLayer.canvas);this.backstageLayer.stage=this;this.backstageLayer.canvas.width=this.width;this.backstageLayer.canvas.height=this.height;this.container.appendChild(this.backstageLayer.canvas);this.listen();this.addEventListener("mouseout",function(i){e.shapeDragging=undefined},false);var c=[{end:"mouseup",move:"mousemove"},{end:"touchend",move:"touchmove"}];for(var g=0;g<c.length;g++){var f=c[g];(function(){var i=f;e.on(i.move,function(j){if(e.shapeDragging){var o=i.move=="mousemove"?e.getMousePosition():e.getTouchPosition();if(e.shapeDragging.drag.x){e.shapeDragging.x=o.x-e.shapeDragging.offset.x}if(e.shapeDragging.drag.y){e.shapeDragging.y=o.y-e.shapeDragging.offset.y}e.shapeDragging.layer.draw();var m=e.shapeDragging.eventListeners.ondragmove;if(m){var l=m;for(var k=0;k<l.length;k++){l[k].handler.apply(e.shapeDragging,[j])}}}},false);e.on(i.end,function(j){if(e.shapeDragging){var m=e.shapeDragging.eventListeners.ondragend;if(m){var l=m;for(var k=0;k<l.length;k++){l[k].handler.apply(e.shapeDragging,[j])}}}e.shapeDragging=undefined})})()}this.on("touchend",function(j){if(e.shapeDragging){var m=e.shapeDragging.eventListeners.ondragend;if(m){var l=m;for(var k=0;k<l.length;k++){l[k].handler.apply(e.shapeDragging,[j])}}}e.shapeDragging=undefined})};Kinetic.Stage.prototype.setSize=function(c,a){var d=this.layers;for(n=0;n<d.length;n++){var b=d[n];b.getCanvas().width=c;b.getCanvas().height=a;b.draw()}this.width=c;this.height=a};Kinetic.Stage.prototype.setScale=function(b,a){if(a){this.scale.x=b;this.scale.y=a}else{this.scale.x=b;this.scale.y=b}};Kinetic.Stage.prototype.toDataURL=function(e){var b=this.bufferLayer;var a=b.getContext();var d=this.layers;function c(h){var g=d[h].getCanvas().toDataURL();var f=new Image();f.onload=function(){a.drawImage(this,0,0);h++;if(h<d.length){c(h)}else{e(b.getCanvas().toDataURL())}};f.src=g}b.clear();c(0)};Kinetic.Stage.prototype.draw=function(){var a=this.layers;for(var b=0;b<a.length;b++){a[b].draw()}};Kinetic.Stage.prototype.remove=function(a){};Kinetic.Stage.prototype.on=function(b,a){this.container.addEventListener(b,a)};Kinetic.Stage.prototype.addEventListener=function(b,a){this.on(b,a)};Kinetic.Stage.prototype.add=function(a){if(a.name){this.layerNames[a.name]=a}a.canvas.width=this.width;a.canvas.height=this.height;a.stage=this;this.layers.push(a);a.draw();this.container.appendChild(a.canvas)};Kinetic.Stage.prototype.getLayer=function(a){return this.layerNames[a]};Kinetic.Stage.prototype.handleEvent=function(i){if(!i){i=window.event}this.setMousePosition(i);this.setTouchPosition(i);var b=this.backstageLayer;var c=b.getContext();var e=this;b.clear();for(var a=this.layers.length-1;a>=0;a--){var d=this.layers[a];if(a>=0&&d.isListening){var h=d.tailId;while(a>=0&&h!==undefined){var f=d.linkHash[h];var g=f.shape;(function(){var j=g;j.draw(b);var p=e.getUserPosition();var o=j.eventListeners;if(j.visible&&p!==null&&c.isPointInPath(p.x,p.y)){if(e.mouseDown){e.mouseDown=false;e.clickStart=true;if(o.onmousedown){var m=o.onmousedown;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}}a=-1}else{if(e.mouseUp){e.mouseUp=false;if(o.onmouseup){var m=o.onmouseup;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}}if(e.clickStart){if(o.onclick){var m=o.onclick;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}}if(o.ondblclick&&j.inDoubleClickWindow){var m=o.ondblclick;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}}j.inDoubleClickWindow=true;setTimeout(function(){j.inDoubleClickWindow=false},e.dblClickWindow)}a=-1}else{if(e.touchStart){e.touchStart=false;if(o.touchstart){var m=o.touchstart;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}}if(o.ondbltap&&j.inDoubleClickWindow){var m=o.ondbltap;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}}j.inDoubleClickWindow=true;setTimeout(function(){j.inDoubleClickWindow=false},e.dblClickWindow);a=-1}else{if(e.touchEnd){e.touchEnd=false;if(o.touchend){var m=o.touchend;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}}a=-1}else{if(o.touchmove){var m=o.touchmove;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}a=-1}else{if(e.targetShape.id===undefined||(e.targetShape.id!=j.id&&e.targetShape.getZIndex()<j.getZIndex())){var k=e.targetShape.eventListeners;if(k&&k.onmouseout){var m=k.onmouseout;for(var l=0;l<m.length;l++){m[l].handler.apply(e.targetShape,[i])}}e.targetShape=j;if(o.onmouseover){var m=o.onmouseover;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}}a=-1}else{if(o.onmousemove){var m=o.onmousemove;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}a=-1}}}}}}}}else{if(e.targetShape.id==j.id){e.targetShape={};if(o.onmouseout){var m=o.onmouseout;for(var l=0;l<m.length;l++){m[l].handler.apply(j,[i])}}a=-1}}}());h=f.prevId}}}};Kinetic.Stage.prototype.listen=function(){var a=this;this.container.addEventListener("mousedown",function(b){a.mouseDown=true;a.handleEvent(b)},false);this.container.addEventListener("mousemove",function(b){a.mouseUp=false;a.mouseDown=false;a.handleEvent(b)},false);this.container.addEventListener("mouseup",function(b){a.mouseUp=true;a.mouseDown=false;a.handleEvent(b);a.clickStart=false},false);this.container.addEventListener("mouseover",function(b){a.handleEvent(b)},false);this.container.addEventListener("mouseout",function(b){a.mousePos=null},false);this.container.addEventListener("touchstart",function(b){b.preventDefault();a.touchStart=true;a.handleEvent(b)},false);this.container.addEventListener("touchmove",function(b){b.preventDefault();a.handleEvent(b)},false);this.container.addEventListener("touchend",function(b){b.preventDefault();a.touchEnd=true;a.handleEvent(b)},false)};Kinetic.Stage.prototype.getMousePosition=function(a){return this.mousePos};Kinetic.Stage.prototype.getTouchPosition=function(a){return this.touchPos};Kinetic.Stage.prototype.getUserPosition=function(a){return this.getTouchPosition()||this.getMousePosition()};Kinetic.Stage.prototype.setMousePosition=function(a){var c=a.clientX-this.getContainerPosition().left+window.pageXOffset;var b=a.clientY-this.getContainerPosition().top+window.pageYOffset;this.mousePos={x:c,y:b}};Kinetic.Stage.prototype.setTouchPosition=function(c){if(c.touches!==undefined&&c.touches.length==1){var d=c.touches[0];var b=d.clientX-this.getContainerPosition().left+window.pageXOffset;var a=d.clientY-this.getContainerPosition().top+window.pageYOffset;this.touchPos={x:b,y:a}}};Kinetic.Stage.prototype.getContainerPosition=function(){var c=this.container;var b=0;var a=0;while(c&&c.tagName!="BODY"){b+=c.offsetTop;a+=c.offsetLeft;c=c.offsetParent}return{top:b,left:a}};Kinetic.Stage.prototype.getContainer=function(){return this.container};Kinetic.Shape=function(b,a){this.isListening=true;this.drawFunc=b;this.name=a;this.x=0;this.y=0;this.scale={x:1,y:1};this.rotation=0;this.lastX=0;this.lastY=0;this.lastRotation=0;this.lastScale={x:1,y:1};this.eventListeners={};this.visible=true;this.drag={x:false,y:false}};Kinetic.Shape.prototype.listen=function(a){if(this.link){if(a!=this.isListening){if(a){}else{}}}this.isListening=a};Kinetic.Shape.prototype.getContext=function(){return this.tempLayer.getContext()};Kinetic.Shape.prototype.getCanvas=function(){return this.tempLayer.getCanvas()};Kinetic.Shape.prototype.getStage=function(){return this.layer.stage};Kinetic.Shape.prototype.draw=function(c){if(this.visible){var a=c.stage;var b=c.getContext();b.save();if(a.scale.x!=1||a.scale.y!=1){b.scale(a.scale.x,a.scale.y)}b.save();if(this.x!==0||this.y!==0){b.translate(this.x,this.y)}if(this.rotation!==0){b.rotate(this.rotation)}if(this.scale.x!=1||this.scale.y!=1){b.scale(this.scale.x,this.scale.y)}this.tempLayer=c;this.drawFunc.call(this);b.restore();b.restore()}};Kinetic.Shape.prototype.initDrag=function(){var b=this;var a=["mousedown","touchstart"];for(var d=0;d<a.length;d++){var c=a[d];(function(){var e=c;b.on(e+".initdrag",function(f){var g=b.layer.stage;var l=g.getUserPosition();if(l){g.shapeDragging=b;g.shapeDragging.offset={};g.shapeDragging.offset.x=l.x-b.x;g.shapeDragging.offset.y=l.y-b.y;var k=b.eventListeners.ondragstart;if(k){var j=k;for(var h=0;h<j.length;h++){j[h].handler.apply(b,[f])}}}})})()}};Kinetic.Shape.prototype.dragCleanup=function(){if(!this.drag.x&&!this.drag.y){this.off("mousedown.initdrag");this.off("touchstart.initdrag")}};Kinetic.Shape.prototype.draggable=function(b){if(b){var a=!this.drag.x&&!this.drag.y;this.drag={x:true,y:true};if(a){this.initDrag()}}else{this.drag={x:false,y:false};this.dragCleanup()}};Kinetic.Shape.prototype.draggableX=function(b){if(b){var a=!this.drag.x&&!this.drag.y;this.drag.x=true;if(a){this.initDrag()}}else{this.drag.x=false;this.dragCleanup()}};Kinetic.Shape.prototype.draggableY=function(b){if(b){var a=!this.drag.x&&!this.drag.y;this.drag.y=true;if(a){this.initDrag()}}else{this.drag.y=false;this.dragCleanup()}};Kinetic.Shape.prototype.getZIndex=function(){return this.link.index};Kinetic.Shape.prototype.setScale=function(b,a){if(a){this.scale.x=b;this.scale.y=a}else{this.scale.x=b;this.scale.y=b}};Kinetic.Shape.prototype.setPosition=function(a,b){this.x=a;this.y=b};Kinetic.Shape.prototype.getPosition=function(){return{x:this.x,y:this.y}};Kinetic.Shape.prototype.move=function(a,b){this.x+=a;this.y+=b};Kinetic.Shape.prototype.setRotation=function(a){this.rotation=a};Kinetic.Shape.prototype.rotate=function(a){this.rotation+=a};Kinetic.Shape.prototype.on=function(c,i){var g=c.split(" ");for(var d=0;d<g.length;d++){var h=g[d];var b=(h.indexOf("touch")==-1)?"on"+h:h;var f=b.split(".");var e=f[0];var a=f.length>1?f[1]:"";if(!this.eventListeners[e]){this.eventListeners[e]=[]}this.eventListeners[e].push({name:a,handler:i})}};Kinetic.Shape.prototype.addEventListener=function(b,a){this.on(b,a)};Kinetic.Shape.prototype.off=function(d){var e=(d.indexOf("touch")==-1)?"on"+d:d;var f=e.split(".");var b=f[0];if(this.eventListeners[b]&&f.length>1){var a=f[1];for(var c=0;c<this.eventListeners[b].length;c++){if(this.eventListeners[b][c].name==a){this.eventListeners[b].splice(c,1);if(this.eventListeners[b].length===0){this.eventListeners[b]=undefined}break}}}else{this.eventListeners[b]=undefined}};Kinetic.Shape.prototype.removeEventListener=function(a){this.off(a)};Kinetic.Shape.prototype.show=function(){this.visible=true};Kinetic.Shape.prototype.hide=function(){this.visible=false};Kinetic.Shape.prototype.moveToTop=function(){var d=this.link;var b=d.index;var c=this.layer;this.layer.links.splice(b,1);this.layer.links.push(d);c.setLinkIndices();if(this.isListening){if(d.nextId!==undefined||d.prevId!==undefined){c.unlink(d);var a=c.linkHash[c.tailId];a.nextId=d.id;d.prevId=a.id;c.tailId=d.id}}};Kinetic.Shape.prototype.moveUp=function(){var d=this.link;var b=d.index;var c=this.layer;var a=c.linkHash[d.nextId];if(a){this.layer.links.splice(b,1);this.layer.links.splice(b+1,0,d);c.setLinkIndices();a.prevId=d.prevId;d.nextId=a.nextId;if(d.prevId!==undefined){c.linkHash[d.prevId].nextId=a.id}if(a.nextId!==undefined){c.linkHash[a.nextId].prevId=d.id}d.prevId=a.id;a.nextId=d.id;if(d.id==c.headId){c.headId=a.id}if(a.id==c.tailId){c.tailId=d.id}}};Kinetic.Shape.prototype.moveDown=function(){var d=this.link;var b=d.index;var c=this.layer;var a=c.linkHash[d.prevId];if(a){this.layer.links.splice(b,1);this.layer.links.splice(b-1,0,d);c.setLinkIndices();d.prevId=a.prevId;a.nextId=d.nextId;if(d.nextId!==undefined){c.linkHash[d.nextId].prevId=a.id}if(a.prevId!==undefined){c.linkHash[a.prevId].nextId=d.id}d.nextId=a.id;a.prevId=d.id;if(a.id==c.headId){c.headId=d.id}if(d.id==c.tailId){c.tailId=a.id}}};Kinetic.Shape.prototype.moveToBottom=function(){var d=this.link;var a=d.index;var c=this.layer;this.layer.links.splice(a,1);this.layer.links.unshift(d);c.setLinkIndices();if(this.isListening){if(d.nextId!==undefined||d.prevId!==undefined){c.unlink(d);var b=c.linkHash[c.headId];b.prevId=d.id;d.nextId=b.id;c.headId=d.id}}};Kinetic.Shape.prototype.getLayer=function(){return this.layer};Kinetic.Shape.prototype.moveToLayer=function(b){var a=this.layer;var c=this.link;a.unlink(c);a.removeLink(c);b.addLink(c)};