lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added new fire() method which fires synthetic events and custom events. Simulate() now simulates user events with event bubbling

Browse Source
This commit is contained in:
Eric Rowell 2012-11-03 17:19:21 -07:00
parent df829e1e89
commit 0748692c1d
8 changed files with 108 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/kinetic-Global-current.min.js vendored
View File

@ -25,4 +25,4 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
var Kinetic={};Kinetic.Filters={},Kinetic.Plugins={},Kinetic.Global={BUBBLE_WHITELIST:["mousedown","mousemove","mouseup","mouseover","mouseout","mouseenter","mouseleave","click","dblclick","touchstart","touchmove","touchend","tap","dbltap","dragstart","dragmove","dragend"],BUFFER_WHITELIST:["fill","stroke","textFill","textStroke"],BUFFER_BLACKLIST:["shadow"],stages:[],idCounter:0,tempNodes:{},shapes:{},warn:function(a){console&&console.warn&&console.warn("Kinetic warning: "+a)},extend:function(a,b){for(var c in b.prototype)c in a.prototype||(a.prototype[c]=b.prototype[c])},_pullNodes:function(a){var b=this.tempNodes;for(var c in b){var d=b[c];d.getStage()!==undefined&&d.getStage()._id===a._id&&(a._addId(d),a._addName(d),this._removeTempNode(d))}},_addTempNode:function(a){this.tempNodes[a._id]=a},_removeTempNode:function(a){delete this.tempNodes[a._id]}};
var Kinetic={};Kinetic.Filters={},Kinetic.Plugins={},Kinetic.Global={BUFFER_WHITELIST:["fill","stroke","textFill","textStroke"],BUFFER_BLACKLIST:["shadow"],stages:[],idCounter:0,tempNodes:{},shapes:{},warn:function(a){console&&console.warn&&console.warn("Kinetic warning: "+a)},extend:function(a,b){for(var c in b.prototype)c in a.prototype||(a.prototype[c]=b.prototype[c])},_pullNodes:function(a){var b=this.tempNodes;for(var c in b){var d=b[c];d.getStage()!==undefined&&d.getStage()._id===a._id&&(a._addId(d),a._addName(d),this._removeTempNode(d))}},_addTempNode:function(a){this.tempNodes[a._id]=a},_removeTempNode:function(a){delete this.tempNodes[a._id]}};

2
dist/kinetic-Node-current.min.js vendored
View File

File diff suppressed because one or more lines are too long

28
dist/kinetic-current.js vendored
View File

@ -29,7 +29,6 @@ var Kinetic = {};
Kinetic.Filters = {};
Kinetic.Plugins = {};
Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
BUFFER_BLACKLIST: ['shadow'],
stages: [],
@ -1680,15 +1679,25 @@ Kinetic.Node.prototype = {
}
},
/**
* simulate event
* simulate event with event bubbling
* @name simulate
* @methodOf Kinetic.Node.prototype
* @param {String} eventType
* @param {Object} event attribute
* @param {EventObject} evt event object
*/
simulate: function(eventType, evt) {
this._handleEvent(eventType, evt || {});
},
/**
* synthetically fire an event.  The event object will not bubble up the Node tree.  You can also pass in custom properties
* @name fire
* @methodOf Kinetic.Node.prototype
* @param {String} eventType
* @param {Object} obj optional object which can be used to pass parameters
*/
fire: function(eventType, obj) {
this._executeHandlers(eventType, obj || {});
},
/**
* get absolute transform of the node which takes into
* account its parent transforms
@ -1993,14 +2002,11 @@ Kinetic.Node.prototype = {
if(okayToRun) {
if(el[eventType]) {
var events = el[eventType];
for(var i = 0; i < events.length; i++) {
events[i].handler.apply(this, [evt]);
}
this.fire(eventType, evt);
}
// simulate event bubbling
if(Kinetic.Global.BUBBLE_WHITELIST.indexOf(eventType) >= 0 && !evt.cancelBubble && this.parent) {
if(!evt.cancelBubble && this.parent) {
if(compareShape && compareShape.parent) {
this._handleEvent.call(this.parent, eventType, evt, compareShape.parent);
}
@ -2010,6 +2016,12 @@ Kinetic.Node.prototype = {
}
}
},
_executeHandlers: function(eventType, evt) {
var events = this.eventListeners[eventType];
for(var i = 0; i < events.length; i++) {
events[i].handler.apply(this, [evt]);
}
},
_shouldDraw: function(canvas) {
return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
}

6
dist/kinetic-current.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
src/Global.js
View File

@ -29,7 +29,6 @@ var Kinetic = {};
Kinetic.Filters = {};
Kinetic.Plugins = {};
Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
BUFFER_BLACKLIST: ['shadow'],
stages: [],

27
src/Node.js
View File

@ -589,15 +589,25 @@ Kinetic.Node.prototype = {
}
},
/**
* simulate event
* simulate event with event bubbling
* @name simulate
* @methodOf Kinetic.Node.prototype
* @param {String} eventType
* @param {Object} event attribute
* @param {EventObject} evt event object
*/
simulate: function(eventType, evt) {
this._handleEvent(eventType, evt || {});
},
/**
* synthetically fire an event.&nbsp; The event object will not bubble up the Node tree.&nbsp; You can also pass in custom properties
* @name fire
* @methodOf Kinetic.Node.prototype
* @param {String} eventType
* @param {Object} obj optional object which can be used to pass parameters
*/
fire: function(eventType, obj) {
this._executeHandlers(eventType, obj || {});
},
/**
* get absolute transform of the node which takes into
* account its parent transforms
@ -902,14 +912,11 @@ Kinetic.Node.prototype = {
if(okayToRun) {
if(el[eventType]) {
var events = el[eventType];
for(var i = 0; i < events.length; i++) {
events[i].handler.apply(this, [evt]);
}
this.fire(eventType, evt);
}
// simulate event bubbling
if(Kinetic.Global.BUBBLE_WHITELIST.indexOf(eventType) >= 0 && !evt.cancelBubble && this.parent) {
if(!evt.cancelBubble && this.parent) {
if(compareShape && compareShape.parent) {
this._handleEvent.call(this.parent, eventType, evt, compareShape.parent);
}
@ -919,6 +926,12 @@ Kinetic.Node.prototype = {
}
}
},
_executeHandlers: function(eventType, evt) {
var events = this.eventListeners[eventType];
for(var i = 0; i < events.length; i++) {
events[i].handler.apply(this, [evt]);
}
},
_shouldDraw: function(canvas) {
return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
}

2
tests/js/functionalTests.js
View File

@ -616,7 +616,7 @@ Test.prototype.tests = {
test(groupMousedowns === 4, 'groupMousedowns should be 4');
test(greenCircleMousedowns === 2, 'greenCircleMousedowns should be 2');
},
'*EVENTS - group mouseenter events': function(containerId) {
'EVENTS - group mouseenter events': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,

116
tests/js/unitTests.js
View File

@ -937,8 +937,8 @@ Test.prototype.tests = {
test(!layer2.isVisible(), 'layer2 should be invisible');
test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none');
//console.log(layer1.toDataURL());
//console.log(layer1.toDataURL());
stage.toDataURL({
callback: function(dataUrl) {
//console.log(dataUrl);
@ -948,8 +948,7 @@ Test.prototype.tests = {
test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
}
});
},
'LAYER - beforeDraw and afterDraw': function(containerId) {
var stage = new Kinetic.Stage({
@ -2863,7 +2862,7 @@ Test.prototype.tests = {
//layer.setListening(false);
layer.drawBuffer();
},
'SHAPE - test size setters and getters': function(containerId) {
'SHAPE - test size setters and getters': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -2877,59 +2876,59 @@ Test.prototype.tests = {
radius: 50,
fill: 'red'
});
var ellipse = new Kinetic.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: {
x: 100,
y: 50
x: 100,
y: 50
},
fill: 'yellow'
});
layer.add(ellipse);
layer.add(circle);
stage.add(layer);
// circle tests
test(circle.attrs.width === undefined, 'circle.attrs.width should be undefined');
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
test(circle.getWidth() === 100, 'circle width should be 100');
test(circle.getHeight() === 100, 'circle height should be 100');
test(circle.getSize().width === 100, 'circle width should be 100');
test(circle.getSize().height === 100, 'circle height should be 100');
test(circle.getRadius() === 50, 'circle radius should be 50');
circle.setWidth(200);
test(circle.attrs.width === 200, 'circle.attrs.width should be 200');
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
test(circle.getWidth() === 200, 'circle width should be 200');
test(circle.getHeight() === 200, 'circle height should be 200');
test(circle.getSize().width === 200, 'circle width should be 200');
test(circle.getSize().height === 200, 'circle height should be 200');
test(circle.getRadius() === 100, 'circle radius should be 100');
// ellipse tests
test(ellipse.attrs.width === undefined, 'ellipse.attrs.width should be undefined');
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
test(ellipse.getWidth() === 200, 'ellipse width should be 200');
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
test(ellipse.getSize().width === 200, 'ellipse width should be 200');
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
test(ellipse.getRadius().x === 100, 'ellipse radius x should be 100');
ellipse.setWidth(400);
test(ellipse.attrs.width === 400, 'ellipse.attrs.width should be 400');
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
test(ellipse.getWidth() === 400, 'ellipse width should be 400');
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
test(ellipse.getSize().width === 400, 'ellipse width should be 400');
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
layer.add(ellipse);
layer.add(circle);
stage.add(layer);
// circle tests
test(circle.attrs.width === undefined, 'circle.attrs.width should be undefined');
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
test(circle.getWidth() === 100, 'circle width should be 100');
test(circle.getHeight() === 100, 'circle height should be 100');
test(circle.getSize().width === 100, 'circle width should be 100');
test(circle.getSize().height === 100, 'circle height should be 100');
test(circle.getRadius() === 50, 'circle radius should be 50');
circle.setWidth(200);
test(circle.attrs.width === 200, 'circle.attrs.width should be 200');
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
test(circle.getWidth() === 200, 'circle width should be 200');
test(circle.getHeight() === 200, 'circle height should be 200');
test(circle.getSize().width === 200, 'circle width should be 200');
test(circle.getSize().height === 200, 'circle height should be 200');
test(circle.getRadius() === 100, 'circle radius should be 100');
// ellipse tests
test(ellipse.attrs.width === undefined, 'ellipse.attrs.width should be undefined');
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
test(ellipse.getWidth() === 200, 'ellipse width should be 200');
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
test(ellipse.getSize().width === 200, 'ellipse width should be 200');
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
test(ellipse.getRadius().x === 100, 'ellipse radius x should be 100');
ellipse.setWidth(400);
test(ellipse.attrs.width === 400, 'ellipse.attrs.width should be 400');
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
test(ellipse.getWidth() === 400, 'ellipse width should be 400');
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
test(ellipse.getSize().width === 400, 'ellipse width should be 400');
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
},
'SHAPE - text multi line': function(containerId) {
var stage = new Kinetic.Stage({
@ -4113,7 +4112,7 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
'NODE - simulate event': function(containerId) {
'NODE - test simulate and fire event': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -4134,10 +4133,10 @@ Test.prototype.tests = {
layer.add(circle);
layer.draw();
var foo = '';
var clicks = [];
circle.on('click', function() {
foo = 'bar';
clicks.push('circle');
/*
var evt = window.event;
@ -4146,9 +4145,18 @@ Test.prototype.tests = {
*/
});
layer.on('click', function() {
clicks.push('layer');
});
// simulated event
circle.simulate('click');
test(foo === 'bar', 'foo should equal bar');
test(clicks.toString() == 'circle,layer', 'problem with simulate');
// synthetic event
circle.fire('click');
test(clicks.toString() == 'circle,layer,circle', 'problem with fire');
},
'EVENTS - add remove event': function(containerId) {
var stage = new Kinetic.Stage({