Skip to content

fixes error with touch events due to jquery wrapping original event #32

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

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

fixes error with touch events due to jquery wrapping original event #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c90cc12
fixes error with touch events due to jquery wrapping original event
gvinaccia Aug 6, 2015
c2cd7af
update on cropped image size when keep aspect = false
gvinaccia Sep 23, 2015
ae50cfc
prova fix
gvinaccia Nov 25, 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
4 changes: 2 additions & 2 deletions dist/angular-img-cropper.min.js
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 28 additions & 8 deletions src/angular-img-cropper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
touchRadius: "=",
cropAreaBounds: "=",
minWidth: "=",
minHeight: "="
minHeight: "=",
enforceCropAspect: "="
},
restrict: "A",
link: function (scope, element, attrs) {
var crop;
var crop, destroyed = false;
var __extends = __extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() {
Expand All @@ -24,6 +25,10 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
d.prototype = new __();
};

scope.$on('$destroy', function() {
destroyed = true;
});

var Handle = (function () {
function Handle(x, y, radius) {
this.over = false;
Expand Down Expand Up @@ -380,6 +385,8 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
this.croppedImage = new Image();
this.currentlyInteracting = false;

this.enforceCropAspect = scope.enforceCropAspect || !this.keepAspect;

angular.element(window)
.off('mousemove.angular-img-cropper mouseup.angular-img-cropper touchmove.angular-img-cropper touchend.angular-img-cropper')
.on('mousemove.angular-img-cropper', this.onMouseMove.bind(this))
Expand Down Expand Up @@ -973,6 +980,11 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
if (!this.srcImage) {
throw "Source image not set.";
}

if (this.enforceCropAspect) {
fillWidth = false;
}

if (fillWidth && fillHeight) {
var sourceAspect = this.srcImage.height / this.srcImage.width;
var canvasAspect = this.canvas.height / this.canvas.width;
Expand Down Expand Up @@ -1084,11 +1096,15 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
return PointPool.instance.borrow(touch.clientX - rect.left, touch.clientY - rect.top);
};
ImageCropper.prototype.onTouchMove = function (e) {
if (crop.isImageSet()) {
if (!destroyed && crop.isImageSet()) {
e.preventDefault();
if (e.touches.length >= 1) {
for (var i = 0; i < e.touches.length; i++) {
var touch = e.touches[i];
/**
* fixes behaviour if event is wrapped by jquery
*/
var touches = angular.isDefined(e.touches) ? e.touches : e.originalEvent.touches;
if (touches.length >= 1) {
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
var touchPosition = this.getTouchPos(this.canvas, touch);
var cropTouch = new CropTouch(touchPosition.x, touchPosition.y, touch.identifier);
PointPool.instance.returnPoint(touchPosition);
Expand Down Expand Up @@ -1194,8 +1210,12 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
};
ImageCropper.prototype.onTouchEnd = function (e) {
if (crop.isImageSet()) {
for (var i = 0; i < e.changedTouches.length; i++) {
var touch = e.changedTouches[i];
/**
* fixes behaviour if event is wrapped by jquery
*/
var changedTouches = angular.isDefined(e.changedTouches) ? e.changedTouches : e.originalEvent.changedTouches;
for (var i = 0; i < changedTouches.length; i++) {
var touch = changedTouches[i];
var dragTouch = this.getDragTouchForID(touch.identifier);
if (dragTouch != null) {
if (dragTouch.dragHandle instanceof CornerMarker || dragTouch.dragHandle instanceof DragMarker) {
Expand Down
36 changes: 28 additions & 8 deletions test/angular-img-cropper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
touchRadius: "=",
cropAreaBounds: "=",
minWidth: "=",
minHeight: "="
minHeight: "=",
enforceCropAspect: "="
},
restrict: "A",
link: function (scope, element, attrs) {
var crop;
var crop, destroyed = false;
var __extends = __extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() {
Expand All @@ -24,6 +25,10 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
d.prototype = new __();
};

scope.$on('$destroy', function() {
destroyed = true;
});

var Handle = (function () {
function Handle(x, y, radius) {
this.over = false;
Expand Down Expand Up @@ -380,6 +385,8 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
this.croppedImage = new Image();
this.currentlyInteracting = false;

this.enforceCropAspect = scope.enforceCropAspect || !this.keepAspect;

angular.element(window)
.off('mousemove.angular-img-cropper mouseup.angular-img-cropper touchmove.angular-img-cropper touchend.angular-img-cropper')
.on('mousemove.angular-img-cropper', this.onMouseMove.bind(this))
Expand Down Expand Up @@ -973,6 +980,11 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
if (!this.srcImage) {
throw "Source image not set.";
}

if (this.enforceCropAspect) {
fillWidth = false;
}

if (fillWidth && fillHeight) {
var sourceAspect = this.srcImage.height / this.srcImage.width;
var canvasAspect = this.canvas.height / this.canvas.width;
Expand Down Expand Up @@ -1084,11 +1096,15 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
return PointPool.instance.borrow(touch.clientX - rect.left, touch.clientY - rect.top);
};
ImageCropper.prototype.onTouchMove = function (e) {
if (crop.isImageSet()) {
if (!destroyed && crop.isImageSet()) {
e.preventDefault();
if (e.touches.length >= 1) {
for (var i = 0; i < e.touches.length; i++) {
var touch = e.touches[i];
/**
* fixes behaviour if event is wrapped by jquery
*/
var touches = angular.isDefined(e.touches) ? e.touches : e.originalEvent.touches;
if (touches.length >= 1) {
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
var touchPosition = this.getTouchPos(this.canvas, touch);
var cropTouch = new CropTouch(touchPosition.x, touchPosition.y, touch.identifier);
PointPool.instance.returnPoint(touchPosition);
Expand Down Expand Up @@ -1194,8 +1210,12 @@ angular.module('angular-img-cropper', []).directive("imageCropper", ['$document'
};
ImageCropper.prototype.onTouchEnd = function (e) {
if (crop.isImageSet()) {
for (var i = 0; i < e.changedTouches.length; i++) {
var touch = e.changedTouches[i];
/**
* fixes behaviour if event is wrapped by jquery
*/
var changedTouches = angular.isDefined(e.changedTouches) ? e.changedTouches : e.originalEvent.changedTouches;
for (var i = 0; i < changedTouches.length; i++) {
var touch = changedTouches[i];
var dragTouch = this.getDragTouchForID(touch.identifier);
if (dragTouch != null) {
if (dragTouch.dragHandle instanceof CornerMarker || dragTouch.dragHandle instanceof DragMarker) {
Expand Down
3 changes: 3 additions & 0 deletions test/cropper-controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,7 @@ angular.module('app').controller("ImageCropperCtrl",[ '$scope', function($scope)
$scope.bounds.right = 0;
$scope.bounds.top = 0;
$scope.bounds.bottom = 0;
$scope.width = 100;
$scope.height = 200;
$scope.keepaspect = false;
}]);
18 changes: 17 additions & 1 deletion test/cropper-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="app.js"></script>
<script src="angular-img-cropper.js"></script>
Expand All @@ -10,8 +11,23 @@
<div ng-controller="ImageCropperCtrl as ctrl">
<input type="file" img-cropper-fileread image="cropper.sourceImage" />
<div>
<canvas width="500" height="300" id="canvas" image-cropper image="cropper.sourceImage" cropped-image="cropper.croppedImage" crop-width="400" crop-height="200" min-width="100" min-height="50" keep-aspect="true" crop-area-bounds="bounds"></canvas>
<canvas width="500"
height="300"
id="canvas"
image-cropper
image="cropper.sourceImage"
cropped-image="cropper.croppedImage"
crop-width="width"
crop-height="height"
min-width="100"
min-height="50"
keep-aspect="keepaspect"
crop-area-bounds="bounds">
</canvas>
</div>
<input type="text" ng-model="width">
<input type="text" ng-model="height">
<input type="checkbox" ng-model="keepaspect">
<div>Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})</div>
<div ng-show="cropper.croppedImage!=null"><img ng-src="{{cropper.croppedImage}}" /></div>
</div>
Expand Down