123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- 'use strict';
- crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
- var CropAreaCircle = function() {
- CropArea.apply(this, arguments);
- this._boxResizeBaseSize = 20;
- this._boxResizeNormalRatio = 0.9;
- this._boxResizeHoverRatio = 1.2;
- this._iconMoveNormalRatio = 0.9;
- this._iconMoveHoverRatio = 1.2;
- this._boxResizeNormalSize = this._boxResizeBaseSize*this._boxResizeNormalRatio;
- this._boxResizeHoverSize = this._boxResizeBaseSize*this._boxResizeHoverRatio;
- this._posDragStartX=0;
- this._posDragStartY=0;
- this._posResizeStartX=0;
- this._posResizeStartY=0;
- this._posResizeStartSize=0;
- this._boxResizeIsHover = false;
- this._areaIsHover = false;
- this._boxResizeIsDragging = false;
- this._areaIsDragging = false;
- };
- CropAreaCircle.prototype = new CropArea();
- CropAreaCircle.prototype._calcCirclePerimeterCoords=function(angleDegrees) {
- var hSize=this._size/2;
- var angleRadians=angleDegrees * (Math.PI / 180),
- circlePerimeterX=this._x + hSize * Math.cos(angleRadians),
- circlePerimeterY=this._y + hSize * Math.sin(angleRadians);
- return [circlePerimeterX, circlePerimeterY];
- };
- CropAreaCircle.prototype._calcResizeIconCenterCoords=function() {
- return this._calcCirclePerimeterCoords(-45);
- };
- CropAreaCircle.prototype._isCoordWithinArea=function(coord) {
- return Math.sqrt((coord[0]-this._x)*(coord[0]-this._x) + (coord[1]-this._y)*(coord[1]-this._y)) < this._size/2;
- };
- CropAreaCircle.prototype._isCoordWithinBoxResize=function(coord) {
- var resizeIconCenterCoords=this._calcResizeIconCenterCoords();
- var hSize=this._boxResizeHoverSize/2;
- return(coord[0] > resizeIconCenterCoords[0] - hSize && coord[0] < resizeIconCenterCoords[0] + hSize &&
- coord[1] > resizeIconCenterCoords[1] - hSize && coord[1] < resizeIconCenterCoords[1] + hSize);
- };
- CropAreaCircle.prototype._drawArea=function(ctx,centerCoords,size){
- ctx.arc(centerCoords[0],centerCoords[1],size/2,0,2*Math.PI);
- };
- CropAreaCircle.prototype.draw=function() {
- CropArea.prototype.draw.apply(this, arguments);
- // draw move icon
- this._cropCanvas.drawIconMove([this._x,this._y], this._areaIsHover?this._iconMoveHoverRatio:this._iconMoveNormalRatio);
- // draw resize cubes
- this._cropCanvas.drawIconResizeBoxNESW(this._calcResizeIconCenterCoords(), this._boxResizeBaseSize, this._boxResizeIsHover?this._boxResizeHoverRatio:this._boxResizeNormalRatio);
- };
- CropAreaCircle.prototype.processMouseMove=function(mouseCurX, mouseCurY) {
- var cursor='default';
- var res=false;
- this._boxResizeIsHover = false;
- 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');
- } 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();
- angular.element(this._ctx.canvas).css({'cursor': cursor});
- return res;
- };
- CropAreaCircle.prototype.processMouseDown=function(mouseDownX, mouseDownY) {
- 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');
- }
- };
- CropAreaCircle.prototype.processMouseUp=function(/*mouseUpX, mouseUpY*/) {
- if(this._areaIsDragging) {
- this._areaIsDragging = false;
- this._events.trigger('area-move-end');
- }
- if(this._boxResizeIsDragging) {
- this._boxResizeIsDragging = false;
- this._events.trigger('area-resize-end');
- }
- this._areaIsHover = false;
- this._boxResizeIsHover = false;
- this._posDragStartX = 0;
- this._posDragStartY = 0;
- };
- return CropAreaCircle;
- }]);
|