Permalink
Browse files

Support for multitouch move tool.

Progress on #24
  • Loading branch information...
mythmon committed May 6, 2012
1 parent 14446d5 commit da2598b9edf136f16a805fd86144448cc82bf7dd
Showing with 71 additions and 61 deletions.
  1. +29 −30 web/js/board.js
  2. +42 −31 web/js/tools.js
View
@@ -36,8 +36,7 @@ var Board = Class.extend({
self.record = false;
self.action = "Initial State";
- self.drag = 0;
- self.drag_target = null;
+ self.drag = {};
self.canvas = document.getElementById('board');
self.ctx = self.canvas.getContext('2d');
@@ -190,7 +189,11 @@ var Board = Class.extend({
*/
ondown: function(self, x, y, id) {
if (!self.cur_tool) {
- throw "No tool selected. self.cur_tool=" + self.cur_tool;
+ throw "No tool selected."
+ }
+
+ if (self.drag[id] === undefined) {
+ self.drag[id] = {};
}
// clear kinetic prettification
@@ -200,17 +203,18 @@ var Board = Class.extend({
for (var i=0; i<self.elements.length; i++) {
if (self.elements[i].hit_test(x, y)) {
- self.drag_target = self.elements[i];
- self.drag = 1;
+ self.drag[id].target = self.elements[i];
+ self.drag[id].status = 1
}
}
for (var i=0; i<self.nodes.length; i++) {
if (self.nodes[i].hit_test(x, y)) {
- self.drag_target = self.nodes[i];
- self.drag = 1;
+ self.drag[id].target = self.nodes[i];
+ self.drag[id].status = 1
}
}
- self.cur_tool.down(x, y, id, self.drag_target);
+
+ self.cur_tool.down(x, y, id, self.drag[id].target);
},
/* This function handles the events of mouse/touch up.
@@ -222,18 +226,18 @@ var Board = Class.extend({
*/
onup: function(self, x, y, id) {
if (!self.cur_tool) {
- throw "No tool selected. self.cur_tool=" + self.cur_tool;
+ throw "No tool selected."
}
- if (self.drag >= 2) {
- self.cur_tool.dragend(x, y, id, self.drag_target);
+ if (self.drag[id].status >= 2) {
+ self.cur_tool.dragend(x, y, id, self.drag[id].target);
} else {
- self.cur_tool.click(x, y, id, self.drag_target);
+ self.cur_tool.click(x, y, id, self.drag[id].target);
}
- self.cur_tool.up(x, y, id, self.drag_target);
+ self.cur_tool.up(x, y, id, self.drag[id].target);
- self.drag = 0;
- self.drag_target = null;
+ self.drag[id].status = 0;
+ self.drag[id].target = null;
},
/* This function handles the events of move/drag events. In the case of a
@@ -246,7 +250,7 @@ var Board = Class.extend({
*/
onmove: function(self, x, y, id) {
if (!self.cur_tool) {
- throw "No tool selected. self.cur_tool=" + self.cur_tool;
+ throw "No tool selected.";
}
for (var i=0; i<self.elements.length; i++) {
@@ -258,18 +262,13 @@ var Board = Class.extend({
d.hover = d.hit_test(x, y);
}
- console.log("move");
-
- if (self.drag == 0) {
- console.log("move");
+ if (self.drag[id].status == 0) {
self.cur_tool.move(x, y, id);
- } else if (self.drag == 1) {
- console.log("dragstart");
- self.drag = 2;
- self.cur_tool.dragstart(x, y, id, self.drag_target);
- } else if (self.drag == 2) {
- console.log("drag");
- self.cur_tool.drag(x, y, id, self.drag_target);
+ } else if (self.drag[id].status == 1) {
+ self.drag[id].status = 2;
+ self.cur_tool.dragstart(x, y, id, self.drag[id].target);
+ } else if (self.drag[id].status == 2) {
+ self.cur_tool.drag(x, y, id, self.drag[id].target);
}
},
@@ -302,7 +301,7 @@ var Board = Class.extend({
for (var i=0; i < event.changedTouches.length; i++) {
var touch = event.changedTouches[i];
var p = getCursorPosition(touch, $('#board'));
- self.ondown(p.x, p.y, touch.identifer);
+ self.ondown(p.x, p.y, touch.identifier);
}
event.preventDefault();
@@ -319,7 +318,7 @@ var Board = Class.extend({
for (var i=0; i < event.changedTouches.length; i++) {
var touch = event.changedTouches[i];
var p = getCursorPosition(touch, $('#board'));
- self.onmove(p.x, p.y, touch.identifer);
+ self.onmove(p.x, p.y, touch.identifier);
}
event.preventDefault();
@@ -335,7 +334,7 @@ var Board = Class.extend({
for (var i=0; i < event.changedTouches.length; i++) {
var touch = event.changedTouches[i];
var p = getCursorPosition(touch, $('#board'));
- self.onup(p.x, p.y, touch.identifer);
+ self.onup(p.x, p.y, touch.identifier);
}
event.preventDefault();
View
@@ -26,6 +26,8 @@ var MoveTool = Tool.extend({
self.board.set_tool(self);
}
);
+
+ self.state = {}
},
click: function(self, x, y, id, target) {
@@ -45,8 +47,10 @@ var MoveTool = Tool.extend({
dragstart: function(self, x, y, id, target) {
if (target) {
- self.last_drag_x = x;
- self.last_drag_y = y;
+ if (self.state[id] === undefined) {
+ self.state[id] = {};
+ }
+ self.state[id].last_drag = {'x': x, 'y': y};
// If we clicked on a non-selected element, unselect everything and
// select it.
@@ -60,22 +64,23 @@ var MoveTool = Tool.extend({
target.selected = true;
}
+ self.state[id].claim = [];
+ var selected = self.board.selected();
+ for (var i=0; i<selected.length; i++) {
+ var elem = selected[i];
+ if (!elem.claimed) {
+ self.state[id].claim.push(elem);
+ elem.claimed = true;
+ }
+ }
+
// Make snapping cool.
if (self.board.snap) {
var p = self.board.snap_to(target.x, target.y);
- for (var i=0; i<self.board.nodes.length; i++) {
- var it = self.board.nodes[i];
- if (it.selected) {
- it.x += p.x - target.x;
- it.y += p.y - target.y;
- }
- }
- for (var i=0; i<self.board.elements.length; i++) {
- var it = self.board.elements[i];
- if (it.selected) {
- it.x += p.x - target.x;
- it.y += p.y - target.y;
- }
+ for (var i=0; i<self.state[id].claim.length; i++) {
+ var elem = self.state[id].claim[i];
+ elem.x += p.x - target.x;
+ elem.y += p.y - target.y;
}
target.x = p.x;
target.y = p.y;
@@ -84,39 +89,45 @@ var MoveTool = Tool.extend({
},
drag: function(self, x, y, id, target) {
+ console.log('arrow tool.drag, id=' + id);
if (target) {
- var dx = x - self.last_drag_x;
- var dy = y - self.last_drag_y;
+ var dx = x - self.state[id].last_drag.x;
+ var dy = y - self.state[id].last_drag.y;
if (self.board.snap) {
dx -= dx % self.board.snap_size;
dy -= dy % self.board.snap_size;
}
- for (var i=0; i<self.board.nodes.length; i++) {
- if (self.board.nodes[i].selected) {
- self.board.nodes[i].x += dx;
- self.board.nodes[i].y += dy;
- }
- }
- for (var i=0; i<self.board.elements.length; i++) {
- if (self.board.elements[i].selected) {
- var n1 = self.board.elements[i].n1;
- var n2 = self.board.elements[i].n2;
- if (!n1.selected) {
+ for (var i=0; i<self.state[id].claim.length; i++) {
+ var elem = self.state[id].claim[i];
+ if (elem.type == 'node') {
+ self.state[id].claim[i].x += dx;
+ self.state[id].claim[i].y += dy;
+ } else {
+ var n1 = self.state[id].claim[i].n1;
+ var n2 = self.state[id].claim[i].n2;
+ if (self.state[id].claim.indexOf(n1) == -1) {
n1.x += dx;
n1.y += dy;
}
- if (!n2.selected) {
+ if (self.state[id].claim.indexOf(n2) == -1) {
n2.x += dx;
n2.y += dy;
}
}
}
- self.last_drag_x += dx;
- self.last_drag_y += dy;
+ self.state[id].last_drag.x += dx;
+ self.state[id].last_drag.y += dy;
+ }
+ },
+
+ dragend: function(self, x, y, id, target) {
+ for (var i=0; i<self.state[id].claim.length; i++) {
+ self.state[id].claim[i].claimed = false;
}
+ self.state[id] = undefined;
},
});

0 comments on commit da2598b

Please sign in to comment.