mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 10:45:21 +08:00
changed draggable() to setDraggable(). added getDraggable(). added more unit tests and functional tests
This commit is contained in:
Eric Rowell
parent
dee78e86e2
commit
c8d8aa6028
26
dist/kinetic-core.js
vendored
26
dist/kinetic-core.js
vendored
@ -935,15 +935,6 @@ Kinetic.Node.prototype = {
|
||||
}
|
||||
return absAlpha;
|
||||
},
|
||||
/**
|
||||
* enable or disable drag and drop
|
||||
* @param {Boolean} draggable
|
||||
*/
|
||||
draggable: function(draggable) {
|
||||
this.setAttrs({
|
||||
draggable: draggable
|
||||
});
|
||||
},
|
||||
/**
|
||||
* determine if node is currently in drag and drop mode
|
||||
*/
|
||||
@ -1209,8 +1200,8 @@ Kinetic.Node.prototype = {
|
||||
};
|
||||
|
||||
// add setters and getters
|
||||
Kinetic.GlobalObject.addSetters(Kinetic.Node, ['x', 'y', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'dragConstraint', 'dragBounds']);
|
||||
Kinetic.GlobalObject.addGetters(Kinetic.Node, ['scale', 'x', 'y', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'dragConstraint', 'dragBounds']);
|
||||
Kinetic.GlobalObject.addSetters(Kinetic.Node, ['x', 'y', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'draggable', 'dragConstraint', 'dragBounds']);
|
||||
Kinetic.GlobalObject.addGetters(Kinetic.Node, ['scale', 'x', 'y', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'draggable', 'offset', 'dragConstraint', 'dragBounds']);
|
||||
|
||||
/**
|
||||
* set node x position
|
||||
@ -1249,6 +1240,13 @@ Kinetic.GlobalObject.addGetters(Kinetic.Node, ['scale', 'x', 'y', 'detectionType
|
||||
* @param {Object} alpha
|
||||
*/
|
||||
|
||||
/**
|
||||
* set draggable
|
||||
* @name setDraggable
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
* @param {String} draggable
|
||||
*/
|
||||
|
||||
/**
|
||||
* set drag constraint
|
||||
* @name setDragConstraint
|
||||
@ -1323,6 +1321,12 @@ Kinetic.GlobalObject.addGetters(Kinetic.Node, ['scale', 'x', 'y', 'detectionType
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get draggable
|
||||
* @name getDraggable
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get drag constraint
|
||||
* @name getDragConstraint
|
||||
|
||||
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
26
src/Node.js
26
src/Node.js
@ -551,15 +551,6 @@ Kinetic.Node.prototype = {
|
||||
}
|
||||
return absAlpha;
|
||||
},
|
||||
/**
|
||||
* enable or disable drag and drop
|
||||
* @param {Boolean} draggable
|
||||
*/
|
||||
draggable: function(draggable) {
|
||||
this.setAttrs({
|
||||
draggable: draggable
|
||||
});
|
||||
},
|
||||
/**
|
||||
* determine if node is currently in drag and drop mode
|
||||
*/
|
||||
@ -825,8 +816,8 @@ Kinetic.Node.prototype = {
|
||||
};
|
||||
|
||||
// add setters and getters
|
||||
Kinetic.GlobalObject.addSetters(Kinetic.Node, ['x', 'y', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'dragConstraint', 'dragBounds']);
|
||||
Kinetic.GlobalObject.addGetters(Kinetic.Node, ['scale', 'x', 'y', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'dragConstraint', 'dragBounds']);
|
||||
Kinetic.GlobalObject.addSetters(Kinetic.Node, ['x', 'y', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'draggable', 'dragConstraint', 'dragBounds']);
|
||||
Kinetic.GlobalObject.addGetters(Kinetic.Node, ['scale', 'x', 'y', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'draggable', 'offset', 'dragConstraint', 'dragBounds']);
|
||||
|
||||
/**
|
||||
* set node x position
|
||||
@ -865,6 +856,13 @@ Kinetic.GlobalObject.addGetters(Kinetic.Node, ['scale', 'x', 'y', 'detectionType
|
||||
* @param {Object} alpha
|
||||
*/
|
||||
|
||||
/**
|
||||
* set draggable
|
||||
* @name setDraggable
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
* @param {String} draggable
|
||||
*/
|
||||
|
||||
/**
|
||||
* set drag constraint
|
||||
* @name setDragConstraint
|
||||
@ -939,6 +937,12 @@ Kinetic.GlobalObject.addGetters(Kinetic.Node, ['scale', 'x', 'y', 'detectionType
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get draggable
|
||||
* @name getDraggable
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* get drag constraint
|
||||
* @name getDragConstraint
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -18,7 +18,7 @@ Test.prototype.tests = {
|
||||
stroke: 'black'
|
||||
});
|
||||
|
||||
circle.draggable(true);
|
||||
circle.setDraggable(true);
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
@ -31,10 +31,6 @@ Test.prototype.tests = {
|
||||
dragStart = true;
|
||||
});
|
||||
|
||||
circle.on('dragstart', function() {
|
||||
dragStart = true;
|
||||
});
|
||||
|
||||
circle.on('dragmove', function() {
|
||||
dragMove = true;
|
||||
});
|
||||
@ -80,6 +76,73 @@ Test.prototype.tests = {
|
||||
});
|
||||
});
|
||||
},
|
||||
'DRAG AND DROP - drag and drop layer': function(containerId) {
|
||||
var urls = dataUrls['DRAG AND DROP - drag and drop layer'];
|
||||
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();
|
||||
},
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var circle1 = new Kinetic.Ellipse({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
var circle2 = new Kinetic.Ellipse({
|
||||
x: 400,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green'
|
||||
});
|
||||
|
||||
layer.add(circle1);
|
||||
layer.add(circle2);
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
stage.toDataURL(function(startDataUrl) {
|
||||
test(urls[0] === startDataUrl, 'start data url is incorrect');
|
||||
|
||||
/*
|
||||
* simulate drag and drop
|
||||
*/
|
||||
stage._mousedown({
|
||||
clientX: 399,
|
||||
clientY: 96
|
||||
});
|
||||
|
||||
stage._mousemove({
|
||||
clientX: 210,
|
||||
clientY: 109
|
||||
});
|
||||
|
||||
stage._mouseup({
|
||||
clientX: 210,
|
||||
clientY: 109
|
||||
});
|
||||
|
||||
stage.toDataURL(function(endDataUrl) {
|
||||
test(urls[1] === endDataUrl, 'end data url is incorrect');
|
||||
});
|
||||
});
|
||||
},
|
||||
'EVENTS - modify fill stroke and stroke width on hover with circle': function(containerId) {
|
||||
var urls = dataUrls['EVENTS - modify fill stroke and stroke width on hover with circle'];
|
||||
var stage = new Kinetic.Stage({
|
||||
|
||||
@ -314,46 +314,6 @@ Test.prototype.tests = {
|
||||
};
|
||||
imageObj.src = '../darth-vader.jpg';
|
||||
},
|
||||
/*
|
||||
* WARNING: this functional test will only pass if it's hosted on
|
||||
* a webserver due to cross domain security issues
|
||||
*/
|
||||
'EVENTS - image pixel detection': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var darth = new Kinetic.Image({
|
||||
x: 200,
|
||||
y: 40,
|
||||
image: imageObj,
|
||||
detectionType: 'pixel',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
darth.on('mouseover', function() {
|
||||
log('mouseover');
|
||||
});
|
||||
|
||||
darth.on('mouseout', function() {
|
||||
log('mouseout');
|
||||
});
|
||||
|
||||
darth.on('dragend', function() {
|
||||
this.saveData();
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
|
||||
//darth.save();
|
||||
};
|
||||
imageObj.src = '../lion.png';
|
||||
},
|
||||
'EVENTS - star pixel detection': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
@ -409,7 +369,7 @@ Test.prototype.tests = {
|
||||
stroke: 'black'
|
||||
});
|
||||
|
||||
Ellipse.draggable(true);
|
||||
Ellipse.setDraggable(true);
|
||||
|
||||
Ellipse.on('dragstart', function() {
|
||||
log('dragstart');
|
||||
@ -819,45 +779,6 @@ Test.prototype.tests = {
|
||||
layer.add(redEllipse);
|
||||
stage.add(layer);
|
||||
},
|
||||
'DRAG AND DROP - custom draw func and drag and drop layer': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
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();
|
||||
},
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var Ellipse = new Kinetic.Ellipse({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
var Ellipse2 = new Kinetic.Ellipse({
|
||||
x: 400,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green'
|
||||
});
|
||||
|
||||
layer.add(Ellipse);
|
||||
layer.add(Ellipse2);
|
||||
|
||||
stage.add(layer);
|
||||
},
|
||||
'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
@ -938,30 +859,6 @@ Test.prototype.tests = {
|
||||
stage.start();
|
||||
*/
|
||||
},
|
||||
'DRAG AND DROP - multiple drag and drop sets with draggable() (Ellipse should not be draggable)': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var Ellipse = new Kinetic.Ellipse({
|
||||
x: 380,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
strokeWidth: 4,
|
||||
fill: 'red',
|
||||
stroke: 'black'
|
||||
});
|
||||
|
||||
Ellipse.draggable(true);
|
||||
Ellipse.draggable(true);
|
||||
Ellipse.draggable(false);
|
||||
|
||||
layer.add(Ellipse);
|
||||
stage.add(layer);
|
||||
|
||||
},
|
||||
'DRAG AND DROP - two draggable shapes': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
@ -979,7 +876,7 @@ Test.prototype.tests = {
|
||||
//detectionType: 'pixel'
|
||||
});
|
||||
|
||||
Ellipse.draggable(true);
|
||||
Ellipse.setDraggable(true);
|
||||
|
||||
var Ellipse2 = new Kinetic.Ellipse({
|
||||
x: 350,
|
||||
@ -1039,8 +936,8 @@ Test.prototype.tests = {
|
||||
*/
|
||||
});
|
||||
|
||||
//stage.draggable(false);
|
||||
//layer.draggable(false);
|
||||
//stage.setDraggable(false);
|
||||
//layer.setDraggable(false);
|
||||
|
||||
/*
|
||||
stage.on('dragstart', function() {
|
||||
@ -1073,12 +970,12 @@ Test.prototype.tests = {
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
Ellipse.draggable(true);
|
||||
Ellipse.setDraggable(true);
|
||||
|
||||
layer.add(Ellipse);
|
||||
stage.add(layer);
|
||||
|
||||
Ellipse.draggable(false);
|
||||
Ellipse.setDraggable(false);
|
||||
},
|
||||
'DRAG AND DROP - scale and rotate stage after add layer then drag and drop shape': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -1128,7 +1025,7 @@ Test.prototype.tests = {
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
Ellipse.draggable(true);
|
||||
Ellipse.setDraggable(true);
|
||||
|
||||
stage.setScale(0.5);
|
||||
layer.add(Ellipse);
|
||||
@ -1150,7 +1047,7 @@ Test.prototype.tests = {
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
Ellipse.draggable(true);
|
||||
Ellipse.setDraggable(true);
|
||||
|
||||
layer.add(Ellipse);
|
||||
stage.add(layer);
|
||||
@ -1175,7 +1072,7 @@ Test.prototype.tests = {
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
Ellipse.draggable(true);
|
||||
Ellipse.setDraggable(true);
|
||||
|
||||
stage.setScale(1.5);
|
||||
|
||||
@ -1207,7 +1104,7 @@ Test.prototype.tests = {
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
Ellipse1.draggable(true);
|
||||
Ellipse1.setDraggable(true);
|
||||
|
||||
Ellipse2.on('mouseover', function() {
|
||||
log('mouseover green Ellipse');
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user