Skip to content
This repository has been archived by the owner on Dec 29, 2022. It is now read-only.

Commit

Permalink
Merge pull request #4 from PolymerLabs/refactor_selection
Browse files Browse the repository at this point in the history 
Refactor designer-selection to use closures to share dragging state.
  • Loading branch information
@justinfagnani
justinfagnani committed Feb 10, 2015
2 parents 0412172 + 99001f1 commit 760aea4
Showing 1 changed file with 65 additions and 87 deletions.
152 changes: 65 additions & 87 deletions elements/designer-selection/designer-selection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,17 +89,10 @@
is: 'designer-selection',

created: function() {
this._onMove = null;
this._dragging = false;
this._offsetX = null;
this._offsetY = null;
this._onMouseMove_bound = this._onMouseMove.bind(this);
this._onMouseUp_bound = this._onMouseUp.bind(this);
this._resizeDirection = null;
},

ready: function() {
this.directions = ResizeDirection.all_directions;
this.directions = ResizeDirection.ALL_DIRECTIONS;
},

listeners: {
Expand All @@ -114,51 +107,25 @@
}
},

_onMouseUp: function(e) {
this._stopDrag();
},

_onMouseMove: function(e) {
if (this._onMove == null) {
throw new Error('<designer-selection> expected _onMove to ' +
'be non-null');
}
var deltaX = e.clientX - this._offsetX;
var deltaY = e.clientY - this._offsetY;
var newBounds = this._onMove(deltaX, deltaY);

this.dispatchEvent(new CustomEvent('designer-selection-resize', {
detail: {
bounds: newBounds,
cursor: {
x: e.clientX,
y: e.clientY,
},
}
}));
},

// called for mousedown on the main bounding box div
_boundsDown: function(e) {
this.$.bounds.style.cursor = 'move';
this._startDrag(this._boundsMove, e.clientX - this.offsetLeft,
e.clientY - this.offsetTop);
},

// [x], and [y] are relative to the offset passed to _startDrag
_boundsMove: function(x, y) {
return {
left: x,
top: y,
width: this.offsetWidth,
height: this.offsetHeight,
};
this._startDrag((function(x, y) {
return {
left: x,
top: y,
width: this.offsetWidth,
height: this.offsetHeight,
};
}).bind(this),
e.clientX - this.offsetLeft,
e.clientY - this.offsetTop);
},

// called for mousedown on one of the resize handle divs
_resizeHandleDown: function(e) {
var handle = e.target;
var direction = this._resizeDirection = ResizeDirection[handle.id];
var direction = ResizeDirection[handle.id];

var boundsBounds = this.$.bounds.getBoundingClientRect();
var handleBounds = handle.getBoundingClientRect();
Expand All @@ -171,52 +138,63 @@
? 0
: boundsBounds.top + (e.clientY - handleBounds.top);

this._startDrag(this._resizeHandleMove, offsetLeft, offsetTop);
},

_resizeHandleMove: function(x, y) {
var direction = this._resizeDirection;

// TODO: remember the right offset, rather than recalc each move
var newWidth =
direction.resizesLeft() ? this.offsetWidth + this.offsetLeft - x :
direction.resizesRight() ? x :
this.offsetWidth;

var newHeight =
direction.resizesTop() ? this.offsetHeight + this.offsetTop - y :
direction.resizesBottom() ? y :
this.offsetHeight;

var newLeft = direction.resizesLeft() ? x : this.offsetLeft;
var newTop = direction.resizesTop() ? y : this.offsetTop;

return {
left: newLeft,
top: newTop,
width: newWidth,
height: newHeight,
};
var offsetRight = this.offsetLeft + this.offsetWidth;
var offsetBottom = this.offsetTop + this.offsetHeight;

this._startDrag((function(x, y) {
var newWidth =
direction.resizesLeft() ? offsetRight - x :
direction.resizesRight() ? x :
this.offsetWidth;

var newHeight =
direction.resizesTop() ? offsetBottom - y :
direction.resizesBottom() ? y :
this.offsetHeight;

var newLeft = direction.resizesLeft() ? x : this.offsetLeft;
var newTop = direction.resizesTop() ? y : this.offsetTop;

return {
left: newLeft,
top: newTop,
width: newWidth,
height: newHeight,
};
}).bind(this),
offsetLeft, offsetTop);
},

_startDrag: function(onMove, offsetX, offsetY) {
this._dragging = true;
this._onMove = onMove;
this._offsetX = offsetX;
this._offsetY = offsetY;
window.addEventListener('mouseup', this._onMouseUp_bound);
window.addEventListener('mousemove', this._onMouseMove_bound);
var onMouseMove = (function(e) {
var deltaX = e.clientX - offsetX;
var deltaY = e.clientY - offsetY;
var newBounds = onMove(deltaX, deltaY);

this.dispatchEvent(new CustomEvent('designer-selection-resize', {
detail: {
bounds: newBounds,
cursor: {
x: e.clientX,
y: e.clientY,
},
}
}));
}).bind(this);

var onMouseUp = (function(e) {
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('contextmenu', onMouseUp);
this.$.bounds.style.cursor = 'auto';
}).bind(this);

window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
// Note document instead of window:
// http://www.quirksmode.org/dom/events/contextmenu.html
document.addEventListener('contextmenu', onMouseUp);
},

_stopDrag: function() {
this._dragging = false;
this._onMove = null;
this._offsetX = null;
this._offsetY = null;
window.removeEventListener('mouseup', this._onMouseUp_bound);
window.removeEventListener('mousemove', this._onMouseMove_bound);
this.$.bounds.style.cursor = 'auto';
}
});
</script>
</body>
Expand Down

0 comments on commit 760aea4

Please sign in to comment.