From ce793a4b2592a91252f7ca7db4c11a4143740bc5 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sat, 23 Mar 2013 22:56:22 -0700 Subject: [PATCH] refactored / cleaned up code in Node and DD --- src/Animation.js | 2 +- src/DragAndDrop.js | 155 +++++++++--------- src/Global.js | 18 ++- src/Node.js | 261 +++++++++++++++++++------------ src/Stage.js | 15 +- tests/js/functionalTests.js | 52 ++++++ tests/js/unit/transitionTests.js | 2 + 7 files changed, 315 insertions(+), 190 deletions(-) diff --git a/src/Animation.js b/src/Animation.js index 681b0b3b..e9334820 100644 --- a/src/Animation.js +++ b/src/Animation.js @@ -135,7 +135,7 @@ })(); Kinetic.Animation.requestAnimFrame = function(callback) { - var raf = Kinetic.DD && Kinetic.DD.moving ? this.fixedRequestAnimFrame : RAF; + var raf = Kinetic.DD && Kinetic.DD.isDragging ? this.fixedRequestAnimFrame : RAF; raf(callback); }; diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index 754122e2..44fc31bc 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -1,87 +1,88 @@ (function() { Kinetic.DD = { + // properties anim: new Kinetic.Animation(), - // this flag is set to true the moment the user starts moving the mouse - // after they have mousedowned or touchstarted the node - moving: false, + isDragging: false, offset: { x: 0, y: 0 + }, + node: null, + + // methods + _drag: function(evt) { + var dd = Kinetic.DD, node = dd.node; + + if(node) { + var pos = node.getStage().getPointerPosition(); + var dbf = node.attrs.dragBoundFunc; + + var newNodePos = { + x: pos.x - dd.offset.x, + y: pos.y - dd.offset.y + }; + + if(dbf !== undefined) { + newNodePos = dbf.call(node, newNodePos, evt); + } + + node.setAbsolutePosition(newNodePos); + + if(!dd.isDragging) { + dd.isDragging = true; + node._handleEvent('dragstart', evt); + } + + // execute ondragmove if defined + node._handleEvent('dragmove', evt); + } + }, + _endDragBefore: function(evt) { + var dd = Kinetic.DD, + evt = evt || {}, + node = dd.node, + nodeType, layer; + + if(node) { + nodeType = node.nodeType, + layer = node.getLayer(); + dd.anim.stop(); + + // only fire dragend event if the drag and drop + // operation actually started. + if(dd.isDragging) { + dd.isDragging = false; + evt.dragEndNode = node; + } + + delete dd.node; + + node.moveToTop(); + + if (layer) { + layer.draw(); + } + else { + node.draw(); + } + } + }, + _endDragAfter: function(evt) { + var evt = evt || {}, + dragEndNode = evt.dragEndNode; + + if (evt && dragEndNode) { + dragEndNode._handleEvent('dragend', evt); + } + }, + _endDrag: function() { + this._endDragBefore(); + this._endDragAfter(); } }; - Kinetic.getNodeDragging = function() { - return Kinetic.DD.node; - }; - Kinetic.DD._drag = function(evt) { - var dd = Kinetic.DD, node = dd.node; - - if(node) { - var pos = node.getStage().getPointerPosition(); - var dbf = node.attrs.dragBoundFunc; - - var newNodePos = { - x: pos.x - dd.offset.x, - y: pos.y - dd.offset.y - }; - - if(dbf !== undefined) { - newNodePos = dbf.call(node, newNodePos, evt); - } - - node.setAbsolutePosition(newNodePos); - - if(!dd.moving) { - dd.moving = true; - node._handleEvent('dragstart', evt); - } - - // execute ondragmove if defined - node._handleEvent('dragmove', evt); - } - }; - Kinetic.DD._endDragBefore = function(evt) { - var dd = Kinetic.DD, - evt = evt || {}, - node = dd.node, - nodeType, layer; - - if(node) { - nodeType = node.nodeType, - layer = node.getLayer(); - dd.anim.stop(); - - // only fire dragend event if the drag and drop - // operation actually started. - if(dd.moving) { - dd.moving = false; - evt.dragEndNode = node; - } - - delete dd.node; - - node.moveToTop(); - - if (layer) { - layer.draw(); - } - else { - node.draw(); - } - } - }; - Kinetic.DD._endDragAfter = function(evt) { - var evt = evt || {}, - dragEndNode = evt.dragEndNode; - - if (evt && dragEndNode) { - dragEndNode._handleEvent('dragend', evt); - } - }; - Kinetic.DD._endDrag = function() { - this._endDragBefore(); - this._endDragAfter(); - }; + // Node extenders + Kinetic.Node.prototype._startDrag = function(evt) { var dd = Kinetic.DD, that = this, @@ -119,14 +120,14 @@ */ Kinetic.Node.prototype.isDragging = function() { var dd = Kinetic.DD; - return dd.node && dd.node._id === this._id && dd.moving; + return dd.node && dd.node._id === this._id && dd.isDragging; }; Kinetic.Node.prototype._listenDrag = function() { this._dragCleanup(); var that = this; this.on('mousedown.kinetic touchstart.kinetic', function(evt) { - if(!Kinetic.getNodeDragging()) { + if(!Kinetic.DD.node) { that._startDrag(evt); } }); diff --git a/src/Global.js b/src/Global.js index bf871316..3b6c9027 100644 --- a/src/Global.js +++ b/src/Global.js @@ -25,16 +25,16 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ -/** - * @namespace - */ -var Kinetic = {}; (function() { +var Kinetic = {}; +(function() { Kinetic.version = '{{version}}'; - /** - * @namespace - */ + + // namespaces without constructors Kinetic.Filters = {}; Kinetic.Plugins = {}; + Kinetic.DD = {}; + + // global namespace Kinetic.Global = { stages: [], idCounter: 0, @@ -42,6 +42,10 @@ var Kinetic = {}; (function() { names: {}, //shapes hash. rgb keys and shape values shapes: {}, + isDragging: function() { + var dd = Kinetic.DD; + return (dd && dd.isDragging); + }, warn: function(str) { /* * IE9 on Windows7 64bit will throw a JS error diff --git a/src/Node.js b/src/Node.js index 790aa39e..444e3539 100644 --- a/src/Node.js +++ b/src/Node.js @@ -1,4 +1,25 @@ (function() { + // CONSTANTS + var SPACE = ' ', + EMPTY_STRING = '', + DOT = '.', + GET = 'get', + SET = 'set', + SHAPE = 'Shape', + STAGE = 'Stage', + X = 'x', + Y = 'y', + KINETIC = 'kinetic', + BEFORE = 'before', + CHANGE = 'Change', + ID = 'id', + NAME = 'name', + MOUSEENTER = 'mouseenter', + MOUSELEAVE = 'mouseleave', + DEG = 'Deg', + ON = 'on', + OFF = 'off'; + /** * Node constructor. Nodes are entities that can be transformed, layered, * and have bound events. The stage, layers, groups, and shapes all extend Node. @@ -29,19 +50,21 @@ * @param {Function} handler The handler function is passed an event object */ on: function(typesStr, handler) { - var types = typesStr.split(' '); - /* + var types = typesStr.split(SPACE), + len = types.length, + n, type, event, parts, baseEvent, name; + + /* * loop through types and attach event listeners to * each one. eg. 'click mouseover.namespace mouseout' * will create three event bindings */ - var len = types.length; - for(var n = 0; n < len; n++) { - var type = types[n]; - var event = type; - var parts = event.split('.'); - var baseEvent = parts[0]; - var name = parts.length > 1 ? parts[1] : ''; + for(n = 0; n < len; n++) { + type = types[n]; + event = type; + parts = event.split(DOT); + baseEvent = parts[0]; + name = parts.length > 1 ? parts[1] : EMPTY_STRING; if(!this.eventListeners[baseEvent]) { this.eventListeners[baseEvent] = []; @@ -66,13 +89,15 @@ * @param {String} typesStr e.g. 'click', 'mousedown touchstart', '.foobar' */ off: function(typesStr) { - var types = typesStr.split(' '); - var len = types.length; - for(var n = 0; n < len; n++) { - var type = types[n]; - var event = type; - var parts = event.split('.'); - var baseEvent = parts[0]; + var types = typesStr.split(SPACE), + len = types.length, + n, type, event, parts, baseEvent; + + for(n = 0; n < len; n++) { + type = types[n]; + event = type; + parts = event.split(DOT); + baseEvent = parts[0]; if(parts.length > 1) { if(baseEvent) { @@ -99,6 +124,7 @@ */ remove: function() { var parent = this.getParent(); + if(parent && parent.children) { parent.children.splice(this.index, 1); parent._setChildrenIndices(); @@ -111,7 +137,10 @@ * @methodOf Kinetic.Node.prototype */ destroy: function() { - var parent = this.getParent(), stage = this.getStage(), dd = Kinetic.DD, go = Kinetic.Global; + var parent = this.getParent(), + stage = this.getStage(), + dd = Kinetic.DD, + go = Kinetic.Global; // destroy children while(this.children && this.children.length > 0) { @@ -141,7 +170,7 @@ * @param {String} attr */ getAttr: function(attr) { - var method = 'get' + Kinetic.Type._capitalize(attr); + var method = GET + Kinetic.Type._capitalize(attr); return this[method](); }, /** @@ -169,9 +198,11 @@ * @param {Object} config object containing key value pairs */ setAttrs: function(config) { + var key, method; + if(config) { - for(var key in config) { - var method = 'set' + Kinetic.Type._capitalize(key); + for(key in config) { + method = SET + Kinetic.Type._capitalize(key); // use setter if available if(Kinetic.Type._isFunction(this[method])) { this[method](config[key]); @@ -256,18 +287,20 @@ * @methodOf Kinetic.Node.prototype */ getAbsoluteZIndex: function() { - var level = this.getLevel(); - var stage = this.getStage(); - var that = this; - var index = 0; + var level = this.getLevel(), + stage = this.getStage(), + that = this, + index = 0, + nodes, len, n, child; + function addChildren(children) { - var nodes = []; - var len = children.length; - for(var n = 0; n < len; n++) { - var child = children[n]; + nodes = []; + len = children.length; + for(n = 0; n < len; n++) { + child = children[n]; index++; - if(child.nodeType !== 'Shape') { + if(child.nodeType !== SHAPE) { nodes = nodes.concat(child.getChildren()); } @@ -280,7 +313,7 @@ addChildren(nodes); } } - if(that.nodeType !== 'Stage') { + if(that.nodeType !== STAGE) { addChildren(that.getStage().getChildren()); } @@ -294,8 +327,9 @@ * @methodOf Kinetic.Node.prototype */ getLevel: function() { - var level = 0; - var parent = this.parent; + var level = 0, + parent = this.parent; + while(parent) { level++; parent = parent.parent; @@ -311,8 +345,8 @@ */ setPosition: function() { var pos = Kinetic.Type._getXY([].slice.call(arguments)); - this.setAttr('x', pos.x); - this.setAttr('y', pos.y); + this.setAttr(X, pos.x); + this.setAttr(Y, pos.y); }, /** * get node position relative to parent @@ -331,8 +365,9 @@ * @methodOf Kinetic.Node.prototype */ getAbsolutePosition: function() { - var trans = this.getAbsoluteTransform(); - var o = this.getOffset(); + var trans = this.getAbsoluteTransform(), + o = this.getOffset(); + trans.translate(o.x, o.y); return trans.getTranslation(); }, @@ -344,8 +379,10 @@ * @param {Number} y */ setAbsolutePosition: function() { - var pos = Kinetic.Type._getXY([].slice.call(arguments)); - var trans = this._clearTransform(); + var pos = Kinetic.Type._getXY([].slice.call(arguments)), + trans = this._clearTransform(), + it; + // don't clear translation this.attrs.x = trans.x; this.attrs.y = trans.y; @@ -353,7 +390,7 @@ delete trans.y; // unravel transform - var it = this.getAbsoluteTransform(); + it = this.getAbsoluteTransform(); it.invert(); it.translate(pos.x, pos.y); @@ -373,9 +410,9 @@ * @param {Number} y */ move: function() { - var pos = Kinetic.Type._getXY([].slice.call(arguments)); - var x = this.getX(); - var y = this.getY(); + var pos = Kinetic.Type._getXY([].slice.call(arguments)), + x = this.getX(), + y = this.getY(); if(pos.x !== undefined) { x += pos.x; @@ -388,7 +425,9 @@ this.setPosition(x, y); }, _eachAncestorReverse: function(func, includeSelf) { - var family = [], parent = this.getParent(); + var family = [], + parent = this.getParent(), + len, n; // build family by traversing ancestors if(includeSelf) { @@ -399,8 +438,8 @@ parent = parent.parent; } - var len = family.length; - for(var n = 0; n < len; n++) { + len = family.length; + for(n = 0; n < len; n++) { func(family[n]); } }, @@ -440,8 +479,8 @@ * @methodOf Kinetic.Node.prototype */ moveUp: function() { - var index = this.index; - var len = this.parent.getChildren().length; + var index = this.index, + len = this.parent.getChildren().length; if(index < len - 1) { this.parent.children.splice(index, 1); this.parent.children.splice(index + 1, 0, this); @@ -517,13 +556,16 @@ * @methodOf Kinetic.Node.prototype */ toObject: function() { - var type = Kinetic.Type, obj = {}, attrs = this.attrs; + var type = Kinetic.Type, + obj = {}, + attrs = this.getAttrs(), + key, val; obj.attrs = {}; // serialize only attributes that are not function, image, DOM, or objects with methods - for(var key in attrs) { - var val = attrs[key]; + for(key in attrs) { + val = attrs[key]; if(!type._isFunction(val) && !type._isElement(val) && !(type._isObject(val) && type._hasMethods(val))) { obj.attrs[key] = val; } @@ -597,10 +639,11 @@ */ getAbsoluteTransform: function() { // absolute transform - var am = new Kinetic.Transform(); + var am = new Kinetic.Transform(), + m; this._eachAncestorReverse(function(node) { - var m = node.getTransform(); + m = node.getTransform(); am.multiply(m); }, true); return am; @@ -645,20 +688,21 @@ */ clone: function(obj) { // instantiate new node - var classType = this.shapeType || this.nodeType; - var node = new Kinetic[classType](this.attrs); + var classType = this.shapeType || this.nodeType, + node = new Kinetic[classType](this.attrs), + key, allListeners, len, n, listener; // copy over listeners - for(var key in this.eventListeners) { - var allListeners = this.eventListeners[key]; - var len = allListeners.length; - for(var n = 0; n < len; n++) { - var listener = allListeners[n]; + for(key in this.eventListeners) { + allListeners = this.eventListeners[key]; + len = allListeners.length; + for(n = 0; n < len; n++) { + listener = allListeners[n]; /* * don't include kinetic namespaced listeners because * these are generated by the constructors */ - if(listener.name.indexOf('kinetic') < 0) { + if(listener.name.indexOf(KINETIC) < 0) { // if listeners array doesn't exist, then create it if(!node.eventListeners[key]) { node.eventListeners[key] = []; @@ -691,8 +735,12 @@ * is very high quality */ toDataURL: function(config) { - config = config || {}; - var mimeType = config.mimeType || null, quality = config.quality || null, canvas, context, x = config.x || 0, y = config.y || 0; + var config = config || {}, + mimeType = config.mimeType || null, + quality = config.quality || null, + x = config.x || 0, + y = config.y || 0, + canvas, context; //if width and height are defined, create new canvas to draw on, else reuse stage buffer canvas if(config.width && config.height) { @@ -784,10 +832,13 @@ return this.nodeType === selector ? [this] : []; }, _off: function(type, name) { - for(var i = 0; i < this.eventListeners[type].length; i++) { - if(this.eventListeners[type][i].name === name) { - this.eventListeners[type].splice(i, 1); - if(this.eventListeners[type].length === 0) { + var evtListeners = this.eventListeners[type], + i; + + for(i = 0; i < evtListeners.length; i++) { + if(evtListeners[i].name === name) { + evtListeners.splice(i, 1); + if(evtListeners.length === 0) { delete this.eventListeners[type]; break; } @@ -827,18 +878,20 @@ return trans; }, _setTransform: function(trans) { - for(var key in trans) { + var key; + + for(key in trans) { this.attrs[key] = trans[key]; } }, _fireBeforeChangeEvent: function(attr, oldVal, newVal) { - this._handleEvent('before' + Kinetic.Type._capitalize(attr) + 'Change', { + this._handleEvent(BEFORE + Kinetic.Type._capitalize(attr) + CHANGE, { oldVal: oldVal, newVal: newVal }); }, _fireChangeEvent: function(attr, oldVal, newVal) { - this._handleEvent(attr + 'Change', { + this._handleEvent(attr + CHANGE, { oldVal: oldVal, newVal: newVal }); @@ -850,10 +903,13 @@ * @param {String} id */ setId: function(id) { - var oldId = this.getId(), stage = this.getStage(), go = Kinetic.Global; + var oldId = this.getId(), + stage = this.getStage(), + go = Kinetic.Global; + go._removeId(oldId); go._addId(this, id); - this.setAttr('id', id); + this.setAttr(ID, id); }, /** * set name @@ -862,31 +918,35 @@ * @param {String} name */ setName: function(name) { - var oldName = this.getName(), stage = this.getStage(), go = Kinetic.Global; + var oldName = this.getName(), + stage = this.getStage(), + go = Kinetic.Global; + go._removeName(oldName, this._id); go._addName(this, name); - this.setAttr('name', name); + this.setAttr(NAME, name); }, setAttr: function(key, val) { + var oldVal; if(val !== undefined) { - var oldVal = this.attrs[key]; + oldVal = this.attrs[key]; this._fireBeforeChangeEvent(key, oldVal, val); this.attrs[key] = val; this._fireChangeEvent(key, oldVal, val); } }, _handleEvent: function(eventType, evt, compareShape) { - if(evt && this.nodeType === 'Shape') { + if(evt && this.nodeType === SHAPE) { evt.shape = this; } var stage = this.getStage(); var el = this.eventListeners; var okayToRun = true; - if(eventType === 'mouseenter' && compareShape && this._id === compareShape._id) { + if(eventType === MOUSEENTER && compareShape && this._id === compareShape._id) { okayToRun = false; } - else if(eventType === 'mouseleave' && compareShape && this._id === compareShape._id) { + else if(eventType === MOUSELEAVE && compareShape && this._id === compareShape._id) { okayToRun = false; } @@ -932,9 +992,9 @@ this.drawScene(); this.drawHit(); }, - shouldDrawHit: function() { + shouldDrawHit: function() { var dd = Kinetic.DD; - return this.isVisible() && this.isListening() && (!dd || !dd.moving); + return this.isVisible() && this.isListening() && (!dd || !dd.isDragging); } }; @@ -953,15 +1013,17 @@ this.addRotationSetter(constructor, arr); }; Kinetic.Node.addSetter = function(constructor, attr) { - var that = this; - var method = 'set' + Kinetic.Type._capitalize(attr); + var that = this, + method = SET + Kinetic.Type._capitalize(attr); + constructor.prototype[method] = function(val) { this.setAttr(attr, val); }; }; Kinetic.Node.addPointSetter = function(constructor, attr) { - var that = this; - var method = 'set' + Kinetic.Type._capitalize(attr); + var that = this, + method = SET + Kinetic.Type._capitalize(attr); + constructor.prototype[method] = function() { var pos = Kinetic.Type._getXY([].slice.call(arguments)); @@ -980,20 +1042,22 @@ }; }; Kinetic.Node.addRotationSetter = function(constructor, attr) { - var that = this; - var method = 'set' + Kinetic.Type._capitalize(attr); + var that = this, + method = SET + Kinetic.Type._capitalize(attr); + // radians constructor.prototype[method] = function(val) { this.setAttr(attr, val); }; // degrees - constructor.prototype[method + 'Deg'] = function(deg) { + constructor.prototype[method + DEG] = function(deg) { this.setAttr(attr, Kinetic.Type._degToRad(deg)); }; }; Kinetic.Node.addGetter = function(constructor, attr, def) { - var that = this; - var method = 'get' + Kinetic.Type._capitalize(attr); + var that = this, + method = GET + Kinetic.Type._capitalize(attr); + constructor.prototype[method] = function(arg) { var val = this.attrs[attr]; if (val === undefined) { @@ -1003,8 +1067,9 @@ }; }; Kinetic.Node.addRotationGetter = function(constructor, attr, def) { - var that = this; - var method = 'get' + Kinetic.Type._capitalize(attr); + var that = this, + method = GET + Kinetic.Type._capitalize(attr); + // radians constructor.prototype[method] = function() { var val = this.attrs[attr]; @@ -1014,7 +1079,7 @@ return val; }; // degrees - constructor.prototype[method + 'Deg'] = function() { + constructor.prototype[method + DEG] = function() { var val = this.attrs[attr]; if (val === undefined) { val = def; @@ -1039,13 +1104,13 @@ return this._createNode(JSON.parse(json), container); }; Kinetic.Node._createNode = function(obj, container) { - var type; + var type, no, len, n; // determine type - if(obj.nodeType === 'Shape') { + if(obj.nodeType === SHAPE) { // add custom shape if(obj.shapeType === undefined) { - type = 'Shape'; + type = SHAPE; } // add standard shape else { @@ -1061,10 +1126,10 @@ obj.attrs.container = container; } - var no = new Kinetic[type](obj.attrs); + no = new Kinetic[type](obj.attrs); if(obj.children) { - var len = obj.children.length; - for(var n = 0; n < len; n++) { + len = obj.children.length; + for(n = 0; n < len; n++) { no.add(this._createNode(obj.children[n])); } } @@ -1239,7 +1304,7 @@ Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible; // collection mappings - var collectionMappings = ['on', 'off']; + var collectionMappings = [ON, OFF]; for(var n = 0; n < 2; n++) { // induce scope (function(i) { diff --git a/src/Stage.js b/src/Stage.js index 2883504a..e3c2684d 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -337,7 +337,7 @@ var dd = Kinetic.DD; // if there's a current target shape, run mouseout handlers var targetShape = this.targetShape; - if(targetShape && (!dd || !dd.moving)) { + if(targetShape && (!dd || !dd.isDragging)) { targetShape._handleEvent('mouseout', evt); targetShape._handleEvent('mouseleave', evt); this.targetShape = null; @@ -352,7 +352,7 @@ if(obj) { var shape = obj.shape; if(shape) { - if((!dd || !dd.moving) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) { + if((!dd || !dd.isDragging) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) { if(this.targetShape) { this.targetShape._handleEvent('mouseout', evt, shape); this.targetShape._handleEvent('mouseleave', evt, shape); @@ -370,7 +370,7 @@ * if no shape was detected, clear target shape and try * to run mouseout from previous target shape */ - else if(this.targetShape && (!dd || !dd.moving)) { + else if(this.targetShape && (!dd || !dd.isDragging)) { this.targetShape._handleEvent('mouseout', evt); this.targetShape._handleEvent('mouseleave', evt); this.targetShape = null; @@ -388,6 +388,7 @@ if(obj && obj.shape) { var shape = obj.shape; this.clickStart = true; + this.clickStartShape = shape; shape._handleEvent('mousedown', evt); } @@ -409,10 +410,10 @@ // detect if click or double click occurred if(this.clickStart) { /* - * if dragging and dropping, don't fire click or dbl click - * event + * if dragging and dropping, or if click doesn't map to + * the correct shape, don't fire click or dbl click event */ - if(!dd || !dd.moving || !dd.node) { + if(!dd || !dd.isDragging || !dd.node) { shape._handleEvent('click', evt); if(this.inDoubleClickWindow) { @@ -459,7 +460,7 @@ * if dragging and dropping, don't fire tap or dbltap * event */ - if(!dd || !dd.moving || !dd.node) { + if(!dd || !dd.isDragging || !dd.node) { shape._handleEvent('tap', evt); if(this.inDoubleClickWindow) { diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js index 62b5053b..0ffcab14 100644 --- a/tests/js/functionalTests.js +++ b/tests/js/functionalTests.js @@ -297,6 +297,58 @@ Test.Modules.DD = { }; Test.Modules.EVENT = { + 'click mapping': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200, + throttle: 999 + }); + var layer = new Kinetic.Layer({ + drawFunc: function() { + var context = this.getContext(); + context.beginPath(); + context.moveTo(200, 50); + context.lineTo(420, 80); + context.quadraticCurveTo(300, 100, 260, 170); + context.closePath(); + context.fillStyle = 'blue'; + context.fill(context); + } + }); + + var redCircle = new Kinetic.Circle({ + x: stage.getWidth() / 2, + y: stage.getHeight() / 2, + radius: 70, + fill: 'red' + }); + + var greenCircle = new Kinetic.Circle({ + x: 400, + y: stage.getHeight() / 2, + radius: 70, + fill: 'green', + draggable: true + }); + + redCircle.on('click', function() { + console.log('clicked redCircle'); + }); + + greenCircle.on('click', function() { + console.log('clicked greenCircle'); + }); + + + layer.add(redCircle); + layer.add(greenCircle); + + stage.add(layer); + + showHit(layer); + + }, 'text events': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, diff --git a/tests/js/unit/transitionTests.js b/tests/js/unit/transitionTests.js index a2aed931..72c0465e 100644 --- a/tests/js/unit/transitionTests.js +++ b/tests/js/unit/transitionTests.js @@ -191,6 +191,7 @@ Test.Modules.TRANSITION = { easing: 'bounce-ease-out' }); + /* setTimeout(function() { test(rect.transAnim.isRunning(), 'rect trans should be running'); trans.stop(); @@ -201,5 +202,6 @@ Test.Modules.TRANSITION = { trans.resume(); test(rect.transAnim.isRunning(), 'rect trans should be running after resume'); }, 1500); + */ } };