lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-02-25 13:12:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

rewrote drag and drop logic. removed draggableX and draggableY. added new dragConstraint property and new dragBounds property

Browse Source
This commit is contained in:
Eric Rowell
2012-03-13 22:11:22 -07:00
parent a0c385261e
commit 039c9059a0
6 changed files with 350 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
tests/functionalTests.js
View File

@@ -558,6 +558,155 @@ function Test() {
layer.add(circle1);
layer.add(circle2);
stage.add(layer);
}
},
"DRAG AND DROP - drag and drop constrianed horiztonally": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
draggable: true,
dragConstraint: "horizontal"
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop constrianed vertically": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
draggable: true,
dragConstraint: "vertical"
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with explicit no constraint": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
draggable: true,
dragConstraint: "none"
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with left bounds": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
draggable: true,
dragBounds: {
left: 150
}
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with right bounds": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
draggable: true,
dragBounds: {
right: 400
}
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with top bounds": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
draggable: true,
dragBounds: {
top: 80
}
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with bottom bounds": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
draggable: true,
dragBounds: {
bottom: 120
}
});
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - drag and drop with full rect bounds": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
draggable: true,
dragBounds: {
top: 80,
bottom: 120,
left: 150,
right: 578 - 150
}
});
layer.add(circle);
stage.add(layer);
},
};
}

47
tests/unitTests.js
View File

@@ -716,6 +716,53 @@ function Test() {
layer.draw();
},
"NODE - test drag and drop properties and methods": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "green",
stroke: "black",
strokeWidth: 4,
name: "myCircle"
});
stage.add(layer);
layer.add(circle);
layer.draw();
// test defaults
test(circle._draggable === false, "draggable should be false");
test(circle.dragConstraint === "none", "drag constraint should be none");
test(circle.dragBounds.left === undefined, "drag left should be undefined");
test(circle.dragBounds.top === undefined, "drag top should be undefined");
test(circle.dragBounds.right === undefined, "drag right should be undefined");
test(circle.dragBounds.bottom === undefined, "drag bottom should be undefined");
test(circle.getDragConstraint() === "none", "drag constraint should be none");
test(circle.getDragBounds().bottom === undefined, "drag bottom should be undefined");
//change properties
circle.draggable(true);
circle.setDragConstraint("vertical");
circle.setDragBounds({
left: 50,
top: 100,
right: 150,
bottom: 200
});
// test new properties
test(circle._draggable === true, "draggable should be true");
test(circle.dragConstraint === "vertical", "drag constraint should be vertical");
test(circle.dragBounds.left === 50, "drag left should be 50");
test(circle.dragBounds.top === 100, "drag top should be 100");
test(circle.dragBounds.right === 150, "drag right should be 150");
test(circle.dragBounds.bottom === 200, "drag bottom should be 200");
test(circle.getDragConstraint() === "vertical", "drag constraint should be vertical");
test(circle.getDragBounds().bottom === 200, "drag bottom should be 200");
},
"STAGE - add layer then shape": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();