lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 17:21:36 +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

59
dist/kinetic-core.js vendored
View File

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

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

File diff suppressed because one or more lines are too long

26
src/Node.js
View File

@@ -57,7 +57,8 @@ Kinetic.Node.prototype = {
*/ */
for(var n = 0; n < types.length; n++) { for(var n = 0; n < types.length; n++) {
var type = types[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 parts = event.split('.');
var baseEvent = parts[0]; var baseEvent = parts[0];
var name = parts.length > 1 ? parts[1] : ''; var name = parts.length > 1 ? parts[1] : '';
@@ -85,7 +86,8 @@ Kinetic.Node.prototype = {
for(var n = 0; n < types.length; n++) { for(var n = 0; n < types.length; n++) {
var type = types[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 parts = event.split('.');
var baseEvent = parts[0]; var baseEvent = parts[0];
@@ -633,6 +635,22 @@ Kinetic.Node.prototype = {
getName: function() { getName: function() {
return this.attrs.name; 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 * set center offset
* @param {Number} x * @param {Number} x
@@ -843,10 +861,10 @@ Kinetic.Node.prototype = {
* determine if event handler should be skipped by comparing * determine if event handler should be skipped by comparing
* parent nodes * parent nodes
*/ */
if(eventType === 'onmouseover' && mouseoutNode && mouseoutNode._id === node._id) { if(eventType === 'mouseover' && mouseoutNode && mouseoutNode._id === node._id) {
okayToRun = false; okayToRun = false;
} }
else if(eventType === 'onmouseout' && mouseoverNode && mouseoverNode._id === node._id) { else if(eventType === 'mouseout' && mouseoverNode && mouseoverNode._id === node._id) {
okayToRun = false; okayToRun = false;
} }

28
src/Stage.js
View File

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

3
src/shapes/Text.js
View File

@@ -16,7 +16,8 @@ Kinetic.Text = function(config) {
verticalAlign: 'top', verticalAlign: 'top',
padding: 0, padding: 0,
fontStyle: 'normal', fontStyle: 'normal',
width: 'auto' width: 'auto',
detectionType: 'pixel'
}); });
this.shapeType = "Text"; this.shapeType = "Text";

39
tests/js/unitTests.js
View File

@@ -108,6 +108,7 @@ Test.prototype.tests = {
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
test(circle.getName() === 'myCircle', 'circle name should be myCircle');
}, },
'STAGE - add shape with alpha': function(containerId) { 'STAGE - add shape with alpha': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -305,6 +306,8 @@ Test.prototype.tests = {
group.add(triangle); group.add(triangle);
layer.draw(); 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"}]}]}]}'; 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"); test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
}, },
@@ -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 width before adding it to stage
test(text.getTextWidth() > 0, 'text width should have a value'); test(text.getTextWidth() > 0, 'text width should have a value');
layer.add(text); layer.add(text);
stage.add(layer); stage.add(layer);
text.saveData();
test(text.getTextSize().width > 0, 'text width should have a value'); test(text.getTextSize().width > 0, 'text width should have a value');
test(text.getTextSize().height > 0, 'text height 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'); test(text.getTextWidth() > 0, 'text width should have a value');
@@ -3342,6 +3350,37 @@ Test.prototype.tests = {
//stage.start(); //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) { 'STAGE - add layer then shape': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,