Skip to content

Commit

Permalink
Added support for touch devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexk111
alexk111 committed Jul 22, 2014
1 parent 84d60ad commit 1ec3dc1
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 141 deletions.
94 changes: 46 additions & 48 deletions source/js/classes/crop-area-circle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,43 +71,36 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
this._areaIsHover = false;

if (this._areaIsDragging) {
this._x = mouseCurX - this._posDragStartX;
this._y = mouseCurY - this._posDragStartY;
this._areaIsHover = true;
cursor='move';
res=true;
this._events.trigger('area-move');
} else {
if (this._boxResizeIsDragging) {
cursor = 'nesw-resize';
var iFR, iFX, iFY;
iFX = mouseCurX - this._posResizeStartX;
iFY = this._posResizeStartY - mouseCurY;
if(iFX>iFY) {
iFR = this._posResizeStartSize + iFY*2;
} else {
iFR = this._posResizeStartSize + iFX*2;
}

this._size = Math.max(this._minSize, iFR);
this._boxResizeIsHover = true;
res=true;
this._events.trigger('area-resize');
this._x = mouseCurX - this._posDragStartX;
this._y = mouseCurY - this._posDragStartY;
this._areaIsHover = true;
cursor='move';
res=true;
this._events.trigger('area-move');
} else if (this._boxResizeIsDragging) {
cursor = 'nesw-resize';
var iFR, iFX, iFY;
iFX = mouseCurX - this._posResizeStartX;
iFY = this._posResizeStartY - mouseCurY;
if(iFX>iFY) {
iFR = this._posResizeStartSize + iFY*2;
} else {
// hovering over circle
if(this._isCoordWithinArea([mouseCurX,mouseCurY])) {
cursor = 'move';
this._areaIsHover = true;
res=true;
}
iFR = this._posResizeStartSize + iFX*2;
}

if (this._isCoordWithinBoxResize([mouseCurX,mouseCurY])) {
cursor = 'nesw-resize';
this._areaIsHover = false;
this._boxResizeIsHover = true;
res=true;
}
this._size = Math.max(this._minSize, iFR);
this._boxResizeIsHover = true;
res=true;
this._events.trigger('area-resize');
} else if (this._isCoordWithinBoxResize([mouseCurX,mouseCurY])) {
cursor = 'nesw-resize';
this._areaIsHover = false;
this._boxResizeIsHover = true;
res=true;
} else if(this._isCoordWithinArea([mouseCurX,mouseCurY])) {
cursor = 'move';
this._areaIsHover = true;
res=true;
}

this._dontDragOutside();
Expand All @@ -117,20 +110,23 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
};

CropAreaCircle.prototype.processMouseDown=function(mouseDownX, mouseDownY) {
if (this._isCoordWithinArea([mouseDownX,mouseDownY])) {
this._areaIsDragging = true;
this._posDragStartX = mouseDownX - this._x;
this._posDragStartY = mouseDownY - this._y;
this._events.trigger('area-move-start');
}

if (this._boxResizeIsHover) {
this._areaIsDragging = false;
this._boxResizeIsDragging = true;
this._posResizeStartX=mouseDownX;
this._posResizeStartY=mouseDownY;
this._posResizeStartSize = this._size;
this._events.trigger('area-resize-start');
if (this._isCoordWithinBoxResize([mouseDownX,mouseDownY])) {
this._areaIsDragging = false;
this._areaIsHover = false;
this._boxResizeIsDragging = true;
this._boxResizeIsHover = true;
this._posResizeStartX=mouseDownX;
this._posResizeStartY=mouseDownY;
this._posResizeStartSize = this._size;
this._events.trigger('area-resize-start');
} else if (this._isCoordWithinArea([mouseDownX,mouseDownY])) {
this._areaIsDragging = true;
this._areaIsHover = true;
this._boxResizeIsDragging = false;
this._boxResizeIsHover = false;
this._posDragStartX = mouseDownX - this._x;
this._posDragStartY = mouseDownY - this._y;
this._events.trigger('area-move-start');
}
};

Expand All @@ -143,6 +139,8 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
this._boxResizeIsDragging = false;
this._events.trigger('area-resize-end');
}
this._areaIsHover = false;
this._boxResizeIsHover = false;

this._posDragStartX = 0;
this._posDragStartY = 0;
Expand Down
176 changes: 89 additions & 87 deletions source/js/classes/crop-area-square.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,81 +93,77 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
this._areaIsHover = false;

if (this._areaIsDragging) {
this._x = mouseCurX - this._posDragStartX;
this._y = mouseCurY - this._posDragStartY;
this._areaIsHover = true;
cursor='move';
res=true;
this._events.trigger('area-move');
this._x = mouseCurX - this._posDragStartX;
this._y = mouseCurY - this._posDragStartY;
this._areaIsHover = true;
cursor='move';
res=true;
this._events.trigger('area-move');
} else if (this._resizeCtrlIsDragging>-1) {
var xMulti, yMulti;
switch(this._resizeCtrlIsDragging) {
case 0: // Top Left
xMulti=-1;
yMulti=-1;
cursor = 'nwse-resize';
break;
case 1: // Top Right
xMulti=1;
yMulti=-1;
cursor = 'nesw-resize';
break;
case 2: // Bottom Left
xMulti=-1;
yMulti=1;
cursor = 'nesw-resize';
break;
case 3: // Bottom Right
xMulti=1;
yMulti=1;
cursor = 'nwse-resize';
break;
}
var iFX = (mouseCurX - this._posResizeStartX)*xMulti;
var iFY = (mouseCurY - this._posResizeStartY)*yMulti;
var iFR;
if(iFX>iFY) {
iFR = this._posResizeStartSize + iFY;
} else {
iFR = this._posResizeStartSize + iFX;
}
var wasSize=this._size;
this._size = Math.max(this._minSize, iFR);
var posModifier=(this._size-wasSize)/2;
this._x+=posModifier*xMulti;
this._y+=posModifier*yMulti;
this._resizeCtrlIsHover = this._resizeCtrlIsDragging;
res=true;
this._events.trigger('area-resize');
} else {
if (this._resizeCtrlIsDragging>-1) {
var xMulti, yMulti;
switch(this._resizeCtrlIsDragging) {
case 0: // Top Left
xMulti=-1;
yMulti=-1;
cursor = 'nwse-resize';
break;
case 1: // Top Right
xMulti=1;
yMulti=-1;
cursor = 'nesw-resize';
break;
case 2: // Bottom Left
xMulti=-1;
yMulti=1;
cursor = 'nesw-resize';
break;
case 3: // Bottom Right
xMulti=1;
yMulti=1;
cursor = 'nwse-resize';
break;
}
var iFX = (mouseCurX - this._posResizeStartX)*xMulti;
var iFY = (mouseCurY - this._posResizeStartY)*yMulti;
var iFR;
if(iFX>iFY) {
iFR = this._posResizeStartSize + iFY;
} else {
iFR = this._posResizeStartSize + iFX;
}
var wasSize=this._size;
this._size = Math.max(this._minSize, iFR);
var posModifier=(this._size-wasSize)/2;
this._x+=posModifier*xMulti;
this._y+=posModifier*yMulti;
this._resizeCtrlIsHover = this._resizeCtrlIsDragging;
res=true;
this._events.trigger('area-resize');
} else {
if(this._isCoordWithinArea([mouseCurX,mouseCurY])) {
cursor = 'move';
this._areaIsHover = true;
res=true;
}
}

var hoveredResizeBox=this._isCoordWithinResizeCtrl([mouseCurX,mouseCurY]);
if (hoveredResizeBox>-1) {
switch(hoveredResizeBox) {
case 0:
cursor = 'nwse-resize';
break;
case 1:
cursor = 'nesw-resize';
break;
case 2:
cursor = 'nesw-resize';
break;
case 3:
cursor = 'nwse-resize';
break;
}
this._areaIsHover = false;
this._resizeCtrlIsHover = hoveredResizeBox;
res=true;
var hoveredResizeBox=this._isCoordWithinResizeCtrl([mouseCurX,mouseCurY]);
if (hoveredResizeBox>-1) {
switch(hoveredResizeBox) {
case 0:
cursor = 'nwse-resize';
break;
case 1:
cursor = 'nesw-resize';
break;
case 2:
cursor = 'nesw-resize';
break;
case 3:
cursor = 'nwse-resize';
break;
}
this._areaIsHover = false;
this._resizeCtrlIsHover = hoveredResizeBox;
res=true;
} else if(this._isCoordWithinArea([mouseCurX,mouseCurY])) {
cursor = 'move';
this._areaIsHover = true;
res=true;
}
}

this._dontDragOutside();
Expand All @@ -177,20 +173,24 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
};

CropAreaSquare.prototype.processMouseDown=function(mouseDownX, mouseDownY) {
if (this._isCoordWithinArea([mouseDownX,mouseDownY])) {
this._areaIsDragging = true;
this._posDragStartX = mouseDownX - this._x;
this._posDragStartY = mouseDownY - this._y;
this._events.trigger('area-move-start');
}

if (this._resizeCtrlIsHover>-1) {
this._areaIsDragging = false;
this._resizeCtrlIsDragging = this._resizeCtrlIsHover;
this._posResizeStartX=mouseDownX;
this._posResizeStartY=mouseDownY;
this._posResizeStartSize = this._size;
this._events.trigger('area-resize-start');
var isWithinResizeCtrl=this._isCoordWithinResizeCtrl([mouseDownX,mouseDownY]);
if (isWithinResizeCtrl>-1) {
this._areaIsDragging = false;
this._areaIsHover = false;
this._resizeCtrlIsDragging = isWithinResizeCtrl;
this._resizeCtrlIsHover = isWithinResizeCtrl;
this._posResizeStartX=mouseDownX;
this._posResizeStartY=mouseDownY;
this._posResizeStartSize = this._size;
this._events.trigger('area-resize-start');
} else if (this._isCoordWithinArea([mouseDownX,mouseDownY])) {
this._areaIsDragging = true;
this._areaIsHover = true;
this._resizeCtrlIsDragging = -1;
this._resizeCtrlIsHover = -1;
this._posDragStartX = mouseDownX - this._x;
this._posDragStartY = mouseDownY - this._y;
this._events.trigger('area-move-start');
}
};

Expand All @@ -203,6 +203,8 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
this._resizeCtrlIsDragging = -1;
this._events.trigger('area-resize-end');
}
this._areaIsHover = false;
this._resizeCtrlIsHover = -1;

this._posDragStartX = 0;
this._posDragStartY = 0;
Expand Down
47 changes: 41 additions & 6 deletions source/js/classes/crop-host.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,16 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct

var onMouseMove=function(e) {
if(image!==null) {
var offset=getElementOffset(ctx.canvas);
theArea.processMouseMove(e.pageX-offset.left, e.pageY-offset.top);
var offset=getElementOffset(ctx.canvas),
pageX, pageY;
if(e.type === 'touchmove') {
pageX=e.changedTouches[0].pageX;
pageY=e.changedTouches[0].pageY;
} else {
pageX=e.pageX;
pageY=e.pageY;
}
theArea.processMouseMove(pageX-offset.left, pageY-offset.top);
drawScene();
}
};
Expand All @@ -107,15 +115,33 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
e.preventDefault();
e.stopPropagation();
if(image!==null) {
var offset=getElementOffset(ctx.canvas);
theArea.processMouseDown(e.pageX-offset.left, e.pageY-offset.top);
var offset=getElementOffset(ctx.canvas),
pageX, pageY;
if(e.type === 'touchstart') {
pageX=e.changedTouches[0].pageX;
pageY=e.changedTouches[0].pageY;
} else {
pageX=e.pageX;
pageY=e.pageY;
}
theArea.processMouseDown(pageX-offset.left, pageY-offset.top);
drawScene();
}
};

var onMouseUp=function(e) {
if(image!==null) {
var offset=getElementOffset(ctx.canvas);
theArea.processMouseUp(e.pageX-offset.left, e.pageY-offset.top);
var offset=getElementOffset(ctx.canvas),
pageX, pageY;
if(e.type === 'touchend') {
pageX=e.changedTouches[0].pageX;
pageY=e.changedTouches[0].pageY;
} else {
pageX=e.pageX;
pageY=e.pageY;
}
theArea.processMouseUp(pageX-offset.left, pageY-offset.top);
drawScene();
}
};

Expand Down Expand Up @@ -246,12 +272,21 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', funct
elCanvas.on('mousedown',onMouseDown);
$document.on('mouseup',onMouseUp);

// Init Touch Event Listeners
$document.on('touchmove',onMouseMove);
elCanvas.on('touchstart',onMouseDown);
$document.on('touchend',onMouseUp);

// CropHost Destructor
this.destroy=function() {
$document.off('mousemove',onMouseMove);
elCanvas.off('mousedown',onMouseDown);
$document.off('mouseup',onMouseMove);

$document.off('touchmove',onMouseMove);
elCanvas.off('touchstart',onMouseDown);
$document.off('touchend',onMouseMove);

elCanvas.remove();
};
};
Expand Down
Loading

0 comments on commit 1ec3dc1

Please sign in to comment.