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

Add onAreaChange callback #61

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add onAreaChange callback #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a69c264
Pass area to area-resize and area-move events
albulescu Mar 11, 2015
95fd20b
Add new callback onAreaChange
albulescu Mar 11, 2015
1b95419
Dispatch from square crop area too
albulescu Mar 11, 2015
a76ac6f
Add canvas image size and send to onAreaChange an event object
albulescu Mar 11, 2015
cce8b25
Send resize event on init too
albulescu Mar 16, 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.

73 changes: 53 additions & 20 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, March 16th, 2015, 11:39:51 AM
*/
(function() {
'use strict';
Expand Down Expand Up @@ -88,7 +88,7 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
this._areaIsHover = true;
cursor='move';
res=true;
this._events.trigger('area-move');
this._events.trigger('area-move', this);
} else if (this._boxResizeIsDragging) {
cursor = 'nesw-resize';
var iFR, iFX, iFY;
Expand All @@ -103,7 +103,7 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
this._size = Math.max(this._minSize, iFR);
this._boxResizeIsHover = true;
res=true;
this._events.trigger('area-resize');
this._events.trigger('area-resize', this);
} else if (this._isCoordWithinBoxResize([mouseCurX,mouseCurY])) {
cursor = 'nesw-resize';
this._areaIsHover = false;
Expand Down Expand Up @@ -261,7 +261,7 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
this._areaIsHover = true;
cursor='move';
res=true;
this._events.trigger('area-move');
this._events.trigger('area-move', this);
} else if (this._resizeCtrlIsDragging>-1) {
var xMulti, yMulti;
switch(this._resizeCtrlIsDragging) {
Expand Down Expand Up @@ -301,7 +301,7 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
this._y+=posModifier*yMulti;
this._resizeCtrlIsHover = this._resizeCtrlIsDragging;
res=true;
this._events.trigger('area-resize');
this._events.trigger('area-resize', this);
} else {
var hoveredResizeBox=this._isCoordWithinResizeCtrl([mouseCurX,mouseCurY]);
if (hoveredResizeBox>-1) {
Expand Down Expand Up @@ -1597,6 +1597,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
}
resetCropHost();
events.trigger('image-updated');
events.trigger('area-init', theArea);
});
};
newImage.onerror=function() {
Expand Down Expand Up @@ -1690,13 +1691,15 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
theArea.setSize(curSize);
theArea.setX(curX);
theArea.setY(curY);


// resetCropHost();
if(image!==null) {
theArea.setImage(image);
}

drawScene();

};

/* Life Cycle begins */
Expand Down Expand Up @@ -1748,9 +1751,11 @@ crop.factory('cropPubSub', [function() {
return this;
};
// Publish
this.trigger = function(name, args) {
this.trigger = function() {
var args = Array.prototype.slice.call(arguments);
var name = args.shift();
angular.forEach(events[name], function(handler) {
handler.call(null, args);
handler.apply(null, args);
});
return this;
};
Expand All @@ -1772,6 +1777,7 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
resultImageQuality: '=',

onChange: '&',
onAreaChange: '&',
onLoadBegin: '&',
onLoadDone: '&',
onLoadError: '&'
Expand Down Expand Up @@ -1804,32 +1810,59 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
// Wrapper to safely exec functions within $apply on a running $digest cycle
var fnSafeApply=function(fn) {
return function(){
var args = Array.prototype.slice.call(arguments);
$timeout(function(){
scope.$apply(function(scope){
fn(scope);
fn.apply(scope, args);
});
});
};
};

// Setup CropHost Event Handlers
events
.on('load-start', fnSafeApply(function(scope){
scope.onLoadBegin({});
.on('load-start', fnSafeApply(function(){
this.onLoadBegin({});
}))
.on('load-done', fnSafeApply(function(scope){
scope.onLoadDone({});
.on('load-done', fnSafeApply(function(){
this.onLoadDone({});
}))
.on('load-error', fnSafeApply(function(scope){
scope.onLoadError({});
.on('load-error', fnSafeApply(function(){
this.onLoadError({});
}))
.on('area-move area-resize', fnSafeApply(function(scope){
if(!!scope.changeOnFly) {
updateResultImage(scope);
.on('area-init', fnSafeApply(function(area){
var resizeEvent = {
x: area._x,
y: area._y,
size: area._size,
image: {
width: area._ctx.canvas.width,
height: area._ctx.canvas.height,
}
};

this.onAreaChange({$event:resizeEvent});
}))
.on('area-move area-resize', fnSafeApply(function( area ){

var resizeEvent = {
x: area._x,
y: area._y,
size: area._size,
image: {
width: area._ctx.canvas.width,
height: area._ctx.canvas.height,
}
};

this.onAreaChange({$event:resizeEvent});

if(!!this.changeOnFly) {
updateResultImage(this);
}
}))
.on('area-move-end area-resize-end image-updated', fnSafeApply(function(scope){
updateResultImage(scope);
.on('area-move-end area-resize-end image-updated', fnSafeApply(function(){
updateResultImage(this);
}));

// Sync CropHost with Directive's options
Expand Down
4 changes: 2 additions & 2 deletions source/js/classes/crop-area-circle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
this._areaIsHover = true;
cursor='move';
res=true;
this._events.trigger('area-move');
this._events.trigger('area-move', this);
} else if (this._boxResizeIsDragging) {
cursor = 'nesw-resize';
var iFR, iFX, iFY;
Expand All @@ -91,7 +91,7 @@ crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
this._size = Math.max(this._minSize, iFR);
this._boxResizeIsHover = true;
res=true;
this._events.trigger('area-resize');
this._events.trigger('area-resize', this);
} else if (this._isCoordWithinBoxResize([mouseCurX,mouseCurY])) {
cursor = 'nesw-resize';
this._areaIsHover = false;
Expand Down
4 changes: 2 additions & 2 deletions source/js/classes/crop-area-square.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
this._areaIsHover = true;
cursor='move';
res=true;
this._events.trigger('area-move');
this._events.trigger('area-move', this);
} else if (this._resizeCtrlIsDragging>-1) {
var xMulti, yMulti;
switch(this._resizeCtrlIsDragging) {
Expand Down Expand Up @@ -138,7 +138,7 @@ crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {
this._y+=posModifier*yMulti;
this._resizeCtrlIsHover = this._resizeCtrlIsDragging;
res=true;
this._events.trigger('area-resize');
this._events.trigger('area-resize', this);
} else {
var hoveredResizeBox=this._isCoordWithinResizeCtrl([mouseCurX,mouseCurY]);
if (hoveredResizeBox>-1) {
Expand Down
3 changes: 3 additions & 0 deletions source/js/classes/crop-host.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
}
resetCropHost();
events.trigger('image-updated');
events.trigger('area-init', theArea);
});
};
newImage.onerror=function() {
Expand Down Expand Up @@ -323,13 +324,15 @@ crop.factory('cropHost', ['$document', 'cropAreaCircle', 'cropAreaSquare', 'crop
theArea.setSize(curSize);
theArea.setX(curX);
theArea.setY(curY);


// resetCropHost();
if(image!==null) {
theArea.setImage(image);
}

drawScene();

};

/* Life Cycle begins */
Expand Down
6 changes: 4 additions & 2 deletions source/js/classes/crop-pubsub.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@ crop.factory('cropPubSub', [function() {
return this;
};
// Publish
this.trigger = function(name, args) {
this.trigger = function() {
var args = Array.prototype.slice.call(arguments);
var name = args.shift();
angular.forEach(events[name], function(handler) {
handler.call(null, args);
handler.apply(null, args);
});
return this;
};
Expand Down
52 changes: 40 additions & 12 deletions source/js/ng-img-crop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
resultImageQuality: '=',

onChange: '&',
onAreaChange: '&',
onLoadBegin: '&',
onLoadDone: '&',
onLoadError: '&'
Expand Down Expand Up @@ -47,32 +48,59 @@ crop.directive('imgCrop', ['$timeout', 'cropHost', 'cropPubSub', function($timeo
// Wrapper to safely exec functions within $apply on a running $digest cycle
var fnSafeApply=function(fn) {
return function(){
var args = Array.prototype.slice.call(arguments);
$timeout(function(){
scope.$apply(function(scope){
fn(scope);
fn.apply(scope, args);
});
});
};
};

// Setup CropHost Event Handlers
events
.on('load-start', fnSafeApply(function(scope){
scope.onLoadBegin({});
.on('load-start', fnSafeApply(function(){
this.onLoadBegin({});
}))
.on('load-done', fnSafeApply(function(scope){
scope.onLoadDone({});
.on('load-done', fnSafeApply(function(){
this.onLoadDone({});
}))
.on('load-error', fnSafeApply(function(scope){
scope.onLoadError({});
.on('load-error', fnSafeApply(function(){
this.onLoadError({});
}))
.on('area-move area-resize', fnSafeApply(function(scope){
if(!!scope.changeOnFly) {
updateResultImage(scope);
.on('area-init', fnSafeApply(function(area){
var resizeEvent = {
x: area._x,
y: area._y,
size: area._size,
image: {
width: area._ctx.canvas.width,
height: area._ctx.canvas.height,
}
};

this.onAreaChange({$event:resizeEvent});
}))
.on('area-move area-resize', fnSafeApply(function( area ){

var resizeEvent = {
x: area._x,
y: area._y,
size: area._size,
image: {
width: area._ctx.canvas.width,
height: area._ctx.canvas.height,
}
};

this.onAreaChange({$event:resizeEvent});

if(!!this.changeOnFly) {
updateResultImage(this);
}
}))
.on('area-move-end area-resize-end image-updated', fnSafeApply(function(scope){
updateResultImage(scope);
.on('area-move-end area-resize-end image-updated', fnSafeApply(function(){
updateResultImage(this);
}));

// Sync CropHost with Directive's options
Expand Down
8 changes: 7 additions & 1 deletion test/ng-img-crop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@
result-image-format="{{resImgFormat}}"
result-image-quality="resImgQuality"
result-image-size="resImgSize"
on-change="onChange($dataURI)"
on-change="onChange($dataURI, $area)"
on-area-change="onAreaChange($event)"
on-load-begin="onLoadBegin()"
on-load-done="onLoadDone()"
on-load-error="onLoadError()"
Expand All @@ -115,6 +116,11 @@ <h3>Result</h3>
$scope.selMinSize=100;
$scope.resImgSize=200;
//$scope.aspectRatio=1.2;
//
$scope.onAreaChange = function(event) {
console.log('On area resize event:', event);
};

$scope.onChange=function($dataURI) {
console.log('onChange fired');
};
Expand Down