slightlyoff/cassowary-js-refactor — Issue #2: QuadDemo Mouse EventHandlers
Author: d4tocchini
Created: 2012-01-30 22:23:30+00:00
State: open

As inherited fromt the Greg's original code, the quaddemo has a little bug with the mouse event handlers. if u start dragging one of the db's, but mouseup outside of the canvas and then continue to click the same db, it throws an error and the constraints no longer work.

here's a quick fix of `QuadDemo.initEvents` that just adds the mouseup to the document (not the canvas) only after a mousedown:

```javascript
initEvents: function() {
var that = this;

mouseupHandler = function(ev) { that.mouseup(ev);
document.removeEventListener('mouseup', mouseupHandler); }

this.canvas.addEventListener('mousedown',
function(ev) { that.mousedown(ev);
document.addEventListener('mouseup', mouseupHandler, false);
},
false);

this.canvas.addEventListener('mousemove',
function(ev) { that.mousemove(ev) },
false);
this.canvas.addEventListener('touchstart',
function(ev) { that.touchstart(ev) },
false);
this.canvas.addEventListener('touchend',
function(ev) { that.touchend(ev) },
false);
this.canvas.addEventListener('touchmove',
function(ev) { that.touchmove(ev) },
false);
},
```

I was discussing the awesomeness of constraint based layouts to some colleagues, and they were tweaking with the demo and naturally dragging and pulling wildly... the layout kept locking up, not yet familiar with constraints, they thought it was expected behavior...