Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Save crop position #1

Merged
merged 9 commits into from
Feb 18, 2015
Merged

Save crop position #1

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c4d1c81
added save cropped position
Feb 16, 2015
3235987
fixed bugs
Feb 16, 2015
e136e9d
delete .idea
Feb 16, 2015
0897bfb
fixed bugs
Feb 16, 2015
8cb3a5c
refactoring
Feb 17, 2015
0285e09
refactoring
Feb 17, 2015
660ad1e
refactoring
Feb 17, 2015
d56525a
fixed bugs
Feb 17, 2015
fbe5f4e
fixed bugs
Feb 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion compile/minified/ng-img-crop.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion compile/minified/ng-img-crop.js
View file
Open in desktop

Large diffs are not rendered by default.

66 changes: 51 additions & 15 deletions compile/unminified/ng-img-crop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
* ngImgCrop v0.3.2
* https://github.com/alexk111/ngImgCrop
*
* Copyright (c) 2014 Alex Kaul
* Copyright (c) 2015 Alex Kaul
* License: MIT
*
* Generated at Wednesday, December 3rd, 2014, 3:54:12 PM
* Generated at Monday, February 16th, 2015, 4:42:33 PM
*/
(function() {
'use strict';
Expand Down Expand Up @@ -75,7 +75,7 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
this._cropCanvas.drawIconResizeBoxNESW(this._calcResizeIconCenterCoords(), this._boxResizeBaseSize, this._boxResizeIsHover?this._boxResizeHoverRatio:this._boxResizeNormalRatio);
};

CropAreaCircle.prototype.processMouseMove=function(mouseCurX, mouseCurY) {
CropAreaCircle.prototype.processMouseMove=function(mouseCurX, mouseCurY, position) {
var cursor='default';
var res=false;

Expand All @@ -85,6 +85,10 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
if (this._areaIsDragging) {
this._x = mouseCurX - this._posDragStartX;
this._y = mouseCurY - this._posDragStartY;
if (position) {
position.x = this._x
position.y = this._y
}
this._areaIsHover = true;
cursor='move';
res=true;
Expand All @@ -101,6 +105,10 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
}

this._size = Math.max(this._minSize, iFR);
if(position) {
position.size = this._size
}

this._boxResizeIsHover = true;
res=true;
this._events.trigger('area-resize');
Expand Down Expand Up @@ -248,7 +256,7 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
}
};

CropAreaSquare.prototype.processMouseMove=function(mouseCurX, mouseCurY) {
CropAreaSquare.prototype.processMouseMove=function(mouseCurX, mouseCurY, position) {
var cursor='default';
var res=false;

Expand All @@ -258,6 +266,10 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
if (this._areaIsDragging) {
this._x = mouseCurX - this._posDragStartX;
this._y = mouseCurY - this._posDragStartY;
if (position) {
position.x = this._x
position.y = this._y
}
this._areaIsHover = true;
cursor='move';
res=true;
Expand Down Expand Up @@ -299,6 +311,11 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
var posModifier=(this._size-wasSize)/2;
this._x+=posModifier*xMulti;
this._y+=posModifier*yMulti;
if(position) {
position.size = this._size
position.x = this._x
position.y = this._y
}
this._resizeCtrlIsHover = this._resizeCtrlIsDragging;
res=true;
this._events.trigger('area-resize');
Expand Down Expand Up @@ -1390,7 +1407,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
return { top: Math.round(top), left: Math.round(left) };
};

return function(elCanvas, opts, events){
return function(elCanvas, opts, events, position){
/* PRIVATE VARIABLES */

// Object Pointers
Expand Down Expand Up @@ -1459,10 +1476,17 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
}
elCanvas.prop('width',canvasDims[0]).prop('height',canvasDims[1]).css({'margin-left': -canvasDims[0]/2+'px', 'margin-top': -canvasDims[1]/2+'px'});

theArea.setX(ctx.canvas.width/2);
theArea.setY(ctx.canvas.height/2);
theArea.setSize(Math.min(200, ctx.canvas.width/2, ctx.canvas.height/2));
} else {
if(position) {
theArea.setX(position.x);
theArea.setY(position.y);
theArea.setSize(position.size);
}else{
theArea.setX(ctx.canvas.width/2);
theArea.setY(ctx.canvas.height/2);
theArea.setSize(Math.min(200, ctx.canvas.width/2, ctx.canvas.height/2));
}

} else {
elCanvas.prop('width',0).prop('height',0).css({'margin-top': 0});
}

Expand Down Expand Up @@ -1492,7 +1516,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
pageX=e.pageX;
pageY=e.pageY;
}
theArea.processMouseMove(pageX-offset.left, pageY-offset.top);
theArea.processMouseMove(pageX-offset.left, pageY-offset.top, position);
drawScene();
}
};
Expand Down Expand Up @@ -1526,7 +1550,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
pageX=e.pageX;
pageY=e.pageY;
}
theArea.processMouseUp(pageX-offset.left, pageY-offset.top);
theArea.processMouseUp(pageX-offset.left, pageY-offset.top, position);
drawScene();
}
};
Expand Down Expand Up @@ -1641,6 +1665,11 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
theArea.setX(theArea.getX()*ratioNewCurWidth);
theArea.setY(theArea.getY()*ratioNewCurHeight);
theArea.setSize(theArea.getSize()*ratioMin);
if(position) {
position.x = theArea.getX()
position.y = theArea.getY()
position.size = theArea.getSize()
}
} else {
elCanvas.prop('width',0).prop('height',0).css({'margin-top': 0});
}
Expand Down Expand Up @@ -1687,9 +1716,15 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
}
theArea = new AreaClass(ctx, events);
theArea.setMinSize(curMinSize);
theArea.setSize(curSize);
theArea.setX(curX);
theArea.setY(curY);
if(position) {
theArea.setSize(position.size);
theArea.setX(position.x);
theArea.setY(position.y);
}else{
theArea.setSize(curSize);
theArea.setX(curX);
theArea.setY(curY);
}

// resetCropHost();
if(image!==null) {
Expand Down Expand Up @@ -1763,6 +1798,7 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
scope: {
image: '=',
resultImage: '=',
position: '=',

changeOnFly: '=',
areaType: '@',
Expand All @@ -1785,7 +1821,7 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
var events = scope.events;

// Init Crop Host
var cropHost=new CropHost(element.find('canvas'), {}, events);
var cropHost=new CropHost(element.find('canvas'), {}, events, scope.position);

// Store Result Image to check if it's changed
var storedResultImage;
Expand Down
10 changes: 9 additions & 1 deletion source/js/classes/crop-area-circle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
this._cropCanvas.drawIconResizeBoxNESW(this._calcResizeIconCenterCoords(), this._boxResizeBaseSize, this._boxResizeIsHover?this._boxResizeHoverRatio:this._boxResizeNormalRatio);
};

CropAreaCircle.prototype.processMouseMove=function(mouseCurX, mouseCurY) {
CropAreaCircle.prototype.processMouseMove=function(mouseCurX, mouseCurY, position) {
var cursor='default';
var res=false;

Expand All @@ -73,6 +73,10 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
if (this._areaIsDragging) {
this._x = mouseCurX - this._posDragStartX;
this._y = mouseCurY - this._posDragStartY;
if (position) {
position.x = this._x
position.y = this._y
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Тут тоже можно сетить без условий

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

тогда будет исключение

this._areaIsHover = true;
cursor='move';
res=true;
Expand All @@ -89,6 +93,10 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
}

this._size = Math.max(this._minSize, iFR);
if(position) {
position.size = this._size
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Можно сетить без условий

this._boxResizeIsHover = true;
res=true;
this._events.trigger('area-resize');
Expand Down
11 changes: 10 additions & 1 deletion source/js/classes/crop-area-square.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
}
};

CropAreaSquare.prototype.processMouseMove=function(mouseCurX, mouseCurY) {
CropAreaSquare.prototype.processMouseMove=function(mouseCurX, mouseCurY, position) {
var cursor='default';
var res=false;

Expand All @@ -95,6 +95,10 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
if (this._areaIsDragging) {
this._x = mouseCurX - this._posDragStartX;
this._y = mouseCurY - this._posDragStartY;
if (position) {
position.x = this._x
position.y = this._y
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Давай обновлять эти параметры всегда, в независимости, есть ли у нас position

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Если не будет position будет exception

this._areaIsHover = true;
cursor='move';
res=true;
Expand Down Expand Up @@ -136,6 +140,11 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
var posModifier=(this._size-wasSize)/2;
this._x+=posModifier*xMulti;
this._y+=posModifier*yMulti;
if(position) {
position.size = this._size
position.x = this._x
position.y = this._y
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Тут можно сетить при любых условиях

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

проверка на position тут нужна для того чтобы директива работала полноценно без всяких дополнений и не выпрыгивал exception (x of undefined etc.)

this._resizeCtrlIsHover = this._resizeCtrlIsDragging;
res=true;
this._events.trigger('area-resize');
Expand Down
39 changes: 29 additions & 10 deletions source/js/classes/crop-host.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
return { top: Math.round(top), left: Math.round(left) };
};

return function(elCanvas, opts, events){
return function(elCanvas, opts, events, position){
/* PRIVATE VARIABLES */

// Object Pointers
Expand Down Expand Up @@ -91,10 +91,17 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
}
elCanvas.prop('width',canvasDims[0]).prop('height',canvasDims[1]).css({'margin-left': -canvasDims[0]/2+'px', 'margin-top': -canvasDims[1]/2+'px'});

theArea.setX(ctx.canvas.width/2);
theArea.setY(ctx.canvas.height/2);
theArea.setSize(Math.min(200, ctx.canvas.width/2, ctx.canvas.height/2));
} else {
if(position) {
theArea.setX(position.x);
theArea.setY(position.y);
theArea.setSize(position.size);
}else{
theArea.setX(ctx.canvas.width/2);
theArea.setY(ctx.canvas.height/2);
theArea.setSize(Math.min(200, ctx.canvas.width/2, ctx.canvas.height/2));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Можно сделать проверку под каждый параметр - так будет безопасней

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Для корректного сохранения позиции кропа нам нужны все 3 правильно подвязанные параметра поэтому устанавливать только какой-то определенный можно только если кидать какой то exception

}

} else {
elCanvas.prop('width',0).prop('height',0).css({'margin-top': 0});
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

У нас тут упало форматирование

Expand Down Expand Up @@ -124,7 +131,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
pageX=e.pageX;
pageY=e.pageY;
}
theArea.processMouseMove(pageX-offset.left, pageY-offset.top);
theArea.processMouseMove(pageX-offset.left, pageY-offset.top, position);
drawScene();
}
};
Expand Down Expand Up @@ -158,7 +165,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
pageX=e.pageX;
pageY=e.pageY;
}
theArea.processMouseUp(pageX-offset.left, pageY-offset.top);
theArea.processMouseUp(pageX-offset.left, pageY-offset.top, position);
drawScene();
}
};
Expand Down Expand Up @@ -274,6 +281,11 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
theArea.setX(theArea.getX()*ratioNewCurWidth);
theArea.setY(theArea.getY()*ratioNewCurHeight);
theArea.setSize(theArea.getSize()*ratioMin);
if(position) {
position.x = theArea.getX()
position.y = theArea.getY()
position.size = theArea.getSize()
}
} else {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Андрей, мы эти параметры можем сетить в любом случае, в независимости есть ли у нас position

elCanvas.prop('width',0).prop('height',0).css({'margin-top': 0});
}
Expand Down Expand Up @@ -320,9 +332,16 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
}
theArea = new AreaClass(ctx, events);
theArea.setMinSize(curMinSize);
theArea.setSize(curSize);
theArea.setX(curX);
theArea.setY(curY);
if(position) {
theArea.setSize(position.size);
theArea.setX(position.x);
theArea.setY(position.y);
}else{
theArea.setSize(curSize);
theArea.setX(curX);
theArea.setY(curY);
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Можем сделать проверку под каждый параметр - так будет безопасней


// resetCropHost();
if(image!==null) {
Expand Down
4 changes: 3 additions & 1 deletion source/js/ng-img-crop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
scope: {
image: '=',
resultImage: '=',
position: '=',


changeOnFly: '=',
areaType: '@',
Expand All @@ -28,7 +30,7 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
var events = scope.events;

// Init Crop Host
var cropHost=new CropHost(element.find('canvas'), {}, events);
var cropHost=new CropHost(element.find('canvas'), {}, events, scope.position);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В случае если position не обьект - давай его создадим

if (typeof scope.position != 'object' || !scope.position) {
   scope.position = {}
}

// Store Result Image to check if it's changed
var storedResultImage;
Expand Down