lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 09:07:30 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

new simulate() method to simulate node events. e.g. shape.simulate('click')

Browse Source
This commit is contained in:
Eric Rowell
2012-06-02 00:21:49 -07:00
parent 385deb793d
commit 1b333bc800
6 changed files with 130 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
dist/kinetic-core.js vendored
View File

@@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Jun 01 2012
* Date: Jun 02 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@@ -420,7 +420,8 @@ Kinetic.Node.prototype = {
*/
for(var n = 0; n < types.length; n++) {
var type = types[n];
var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
//var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
var event = type;
var parts = event.split('.');
var baseEvent = parts[0];
var name = parts.length > 1 ? parts[1] : '';
@@ -448,7 +449,8 @@ Kinetic.Node.prototype = {
for(var n = 0; n < types.length; n++) {
var type = types[n];
var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
//var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
var event = type;
var parts = event.split('.');
var baseEvent = parts[0];
@@ -996,6 +998,22 @@ Kinetic.Node.prototype = {
getName: function() {
return this.attrs.name;
},
/**
* get id
*/
getId: function() {
return this.attrs.id;
},
/**
* simulate event
* @param {String} eventType
*/
simulate: function(eventType) {
var el = this.eventListeners[eventType];
for(var n = 0; n < el.length; n++) {
el[n].handler.call(this);
}
},
/**
* set center offset
* @param {Number} x
@@ -1160,11 +1178,11 @@ Kinetic.Node.prototype = {
var go = Kinetic.GlobalObject;
var that = this;
this.on('mousedown.initdrag touchstart.initdrag', function(evt) {
that._initDrag();
that._initDrag();
});
},
_initDrag: function() {
var go = Kinetic.GlobalObject;
var go = Kinetic.GlobalObject;
var stage = this.getStage();
var pos = stage.getUserPosition();
@@ -1206,10 +1224,10 @@ Kinetic.Node.prototype = {
* determine if event handler should be skipped by comparing
* parent nodes
*/
if(eventType === 'onmouseover' && mouseoutNode && mouseoutNode._id === node._id) {
if(eventType === 'mouseover' && mouseoutNode && mouseoutNode._id === node._id) {
okayToRun = false;
}
else if(eventType === 'onmouseout' && mouseoverNode && mouseoverNode._id === node._id) {
else if(eventType === 'mouseout' && mouseoverNode && mouseoverNode._id === node._id) {
okayToRun = false;
}
@@ -1862,13 +1880,13 @@ Kinetic.Stage.prototype = {
if(!isDragging && this.mouseDown) {
this.mouseDown = false;
this.clickStart = true;
shape._handleEvents('onmousedown', evt);
shape._handleEvents('mousedown', evt);
return true;
}
// handle onmouseup & onclick
else if(this.mouseUp) {
this.mouseUp = false;
shape._handleEvents('onmouseup', evt);
shape._handleEvents('mouseup', evt);
// detect if click or double click occurred
if(this.clickStart) {
@@ -1877,10 +1895,10 @@ Kinetic.Stage.prototype = {
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents('onclick', evt);
shape._handleEvents('click', evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents('ondblclick', evt);
shape._handleEvents('dblclick', evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
@@ -1910,10 +1928,10 @@ Kinetic.Stage.prototype = {
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents('ontap', evt);
shape._handleEvents('tap', evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents('ondbltap', evt);
shape._handleEvents('dbltap', evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
@@ -1938,18 +1956,18 @@ Kinetic.Stage.prototype = {
*/
if(this.mouseoutShape) {
this.mouseoverShape = shape;
this.mouseoutShape._handleEvents('onmouseout', evt);
this.mouseoutShape._handleEvents('mouseout', evt);
this.mouseoverShape = undefined;
}
shape._handleEvents('onmouseover', evt);
shape._handleEvents('mouseover', evt);
this._setTarget(shape);
return true;
}
// handle mousemove and touchmove
else if(!isDragging && this.mouseMove) {
shape._handleEvents('onmousemove', evt);
shape._handleEvents('mousemove', evt);
return true;
}
@@ -2062,7 +2080,7 @@ Kinetic.Stage.prototype = {
* then run the onmouseout event handlers
*/
if(!shapeDetected && this.mouseoutShape) {
this.mouseoutShape._handleEvents('onmouseout', evt);
this.mouseoutShape._handleEvents('mouseout', evt);
this.mouseoutShape = undefined;
}
},
@@ -2124,7 +2142,7 @@ Kinetic.Stage.prototype = {
// if there's a current target shape, run mouseout handlers
var targetShape = that.targetShape;
if(targetShape) {
targetShape._handleEvents('onmouseout', evt);
targetShape._handleEvents('mouseout', evt);
that.targetShape = undefined;
}
that.mousePos = undefined;
@@ -2250,7 +2268,7 @@ Kinetic.Stage.prototype = {
if(go.drag.node) {
if(go.drag.moving) {
go.drag.moving = false;
go.drag.node._handleEvents('ondragend', evt);
go.drag.node._handleEvents('dragend', evt);
}
}
go.drag.node = undefined;
@@ -2318,11 +2336,11 @@ Kinetic.Stage.prototype = {
if(!go.drag.moving) {
go.drag.moving = true;
// execute dragstart events if defined
go.drag.node._handleEvents('ondragstart', evt);
go.drag.node._handleEvents('dragstart', evt);
}
// execute user defined ondragmove if defined
go.drag.node._handleEvents('ondragmove', evt);
go.drag.node._handleEvents('dragmove', evt);
}
}, false);
@@ -3701,7 +3719,8 @@ Kinetic.Text = function(config) {
verticalAlign: 'top',
padding: 0,
fontStyle: 'normal',
width: 'auto'
width: 'auto',
detectionType: 'pixel'
});
this.shapeType = "Text";
@@ -3760,8 +3779,8 @@ Kinetic.Text = function(config) {
// draw text
this.fillText(this.attrs.text, tx, ty);
this.strokeText(this.attrs.text, tx, ty);
this.strokeText(this.attrs.text, tx, ty);
context.restore();
};
// call super constructor

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

File diff suppressed because one or more lines are too long

30
src/Node.js
View File

@@ -57,7 +57,8 @@ Kinetic.Node.prototype = {
*/
for(var n = 0; n < types.length; n++) {
var type = types[n];
var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
//var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
var event = type;
var parts = event.split('.');
var baseEvent = parts[0];
var name = parts.length > 1 ? parts[1] : '';
@@ -85,7 +86,8 @@ Kinetic.Node.prototype = {
for(var n = 0; n < types.length; n++) {
var type = types[n];
var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
//var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
var event = type;
var parts = event.split('.');
var baseEvent = parts[0];
@@ -633,6 +635,22 @@ Kinetic.Node.prototype = {
getName: function() {
return this.attrs.name;
},
/**
* get id
*/
getId: function() {
return this.attrs.id;
},
/**
* simulate event
* @param {String} eventType
*/
simulate: function(eventType) {
var el = this.eventListeners[eventType];
for(var n = 0; n < el.length; n++) {
el[n].handler.call(this);
}
},
/**
* set center offset
* @param {Number} x
@@ -797,11 +815,11 @@ Kinetic.Node.prototype = {
var go = Kinetic.GlobalObject;
var that = this;
this.on('mousedown.initdrag touchstart.initdrag', function(evt) {
that._initDrag();
that._initDrag();
});
},
_initDrag: function() {
var go = Kinetic.GlobalObject;
var go = Kinetic.GlobalObject;
var stage = this.getStage();
var pos = stage.getUserPosition();
@@ -843,10 +861,10 @@ Kinetic.Node.prototype = {
* determine if event handler should be skipped by comparing
* parent nodes
*/
if(eventType === 'onmouseover' && mouseoutNode && mouseoutNode._id === node._id) {
if(eventType === 'mouseover' && mouseoutNode && mouseoutNode._id === node._id) {
okayToRun = false;
}
else if(eventType === 'onmouseout' && mouseoverNode && mouseoverNode._id === node._id) {
else if(eventType === 'mouseout' && mouseoverNode && mouseoverNode._id === node._id) {
okayToRun = false;
}

28
src/Stage.js
View File

@@ -402,13 +402,13 @@ Kinetic.Stage.prototype = {
if(!isDragging && this.mouseDown) {
this.mouseDown = false;
this.clickStart = true;
shape._handleEvents('onmousedown', evt);
shape._handleEvents('mousedown', evt);
return true;
}
// handle onmouseup & onclick
else if(this.mouseUp) {
this.mouseUp = false;
shape._handleEvents('onmouseup', evt);
shape._handleEvents('mouseup', evt);
// detect if click or double click occurred
if(this.clickStart) {
@@ -417,10 +417,10 @@ Kinetic.Stage.prototype = {
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents('onclick', evt);
shape._handleEvents('click', evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents('ondblclick', evt);
shape._handleEvents('dblclick', evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
@@ -450,10 +450,10 @@ Kinetic.Stage.prototype = {
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents('ontap', evt);
shape._handleEvents('tap', evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents('ondbltap', evt);
shape._handleEvents('dbltap', evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
@@ -478,18 +478,18 @@ Kinetic.Stage.prototype = {
*/
if(this.mouseoutShape) {
this.mouseoverShape = shape;
this.mouseoutShape._handleEvents('onmouseout', evt);
this.mouseoutShape._handleEvents('mouseout', evt);
this.mouseoverShape = undefined;
}
shape._handleEvents('onmouseover', evt);
shape._handleEvents('mouseover', evt);
this._setTarget(shape);
return true;
}
// handle mousemove and touchmove
else if(!isDragging && this.mouseMove) {
shape._handleEvents('onmousemove', evt);
shape._handleEvents('mousemove', evt);
return true;
}
@@ -602,7 +602,7 @@ Kinetic.Stage.prototype = {
* then run the onmouseout event handlers
*/
if(!shapeDetected && this.mouseoutShape) {
this.mouseoutShape._handleEvents('onmouseout', evt);
this.mouseoutShape._handleEvents('mouseout', evt);
this.mouseoutShape = undefined;
}
},
@@ -664,7 +664,7 @@ Kinetic.Stage.prototype = {
// if there's a current target shape, run mouseout handlers
var targetShape = that.targetShape;
if(targetShape) {
targetShape._handleEvents('onmouseout', evt);
targetShape._handleEvents('mouseout', evt);
that.targetShape = undefined;
}
that.mousePos = undefined;
@@ -790,7 +790,7 @@ Kinetic.Stage.prototype = {
if(go.drag.node) {
if(go.drag.moving) {
go.drag.moving = false;
go.drag.node._handleEvents('ondragend', evt);
go.drag.node._handleEvents('dragend', evt);
}
}
go.drag.node = undefined;
@@ -858,11 +858,11 @@ Kinetic.Stage.prototype = {
if(!go.drag.moving) {
go.drag.moving = true;
// execute dragstart events if defined
go.drag.node._handleEvents('ondragstart', evt);
go.drag.node._handleEvents('dragstart', evt);
}
// execute user defined ondragmove if defined
go.drag.node._handleEvents('ondragmove', evt);
go.drag.node._handleEvents('dragmove', evt);
}
}, false);

7
src/shapes/Text.js
View File

@@ -16,7 +16,8 @@ Kinetic.Text = function(config) {
verticalAlign: 'top',
padding: 0,
fontStyle: 'normal',
width: 'auto'
width: 'auto',
detectionType: 'pixel'
});
this.shapeType = "Text";
@@ -75,8 +76,8 @@ Kinetic.Text = function(config) {
// draw text
this.fillText(this.attrs.text, tx, ty);
this.strokeText(this.attrs.text, tx, ty);
this.strokeText(this.attrs.text, tx, ty);
context.restore();
};
// call super constructor

45
tests/js/unitTests.js
View File

@@ -108,6 +108,7 @@ Test.prototype.tests = {
layer.add(group);
stage.add(layer);
test(circle.getName() === 'myCircle', 'circle name should be myCircle');
},
'STAGE - add shape with alpha': function(containerId) {
var stage = new Kinetic.Stage({
@@ -305,6 +306,8 @@ Test.prototype.tests = {
group.add(triangle);
layer.draw();
test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
},
@@ -667,9 +670,9 @@ Test.prototype.tests = {
stage.remove(layer);
test(stage.children.length === 0, 'stage should have 0 children');
test(stage.children.length === 0, 'stage should have 0 children');
test(stage.get('.myLayer')[0] === undefined, 'layer should not exist');
test(stage.get('.myCircle')[0] === undefined, 'circle should not exist');
test(stage.get('.myCircle')[0] === undefined, 'circle should not exist');
},
'STAGE - remove layer with no shapes': function(containerId) {
var stage = new Kinetic.Stage({
@@ -680,7 +683,7 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
stage.add(layer);
stage.remove(layer);
test(stage.children.length === 0, 'stage should have 0 children');
},
'STAGE - remove shape multiple times': function(containerId) {
@@ -2634,12 +2637,17 @@ Test.prototype.tests = {
}
});
text.on('mouseover', function() {
console.log('mouseover text');
});
// test text width before adding it to stage
test(text.getTextWidth() > 0, 'text width should have a value');
layer.add(text);
stage.add(layer);
text.saveData();
test(text.getTextSize().width > 0, 'text width should have a value');
test(text.getTextSize().height > 0, 'text height should have a value');
test(text.getTextWidth() > 0, 'text width should have a value');
@@ -3342,6 +3350,37 @@ Test.prototype.tests = {
//stage.start();
},
'NODE - simulate event': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle'
});
stage.add(layer);
layer.add(circle);
layer.draw();
var foo = '';
circle.on('click', function() {
foo = 'bar';
});
circle.simulate('click');
test(foo === 'bar', 'foo should equal bar');
},
'STAGE - add layer then shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,