Skip to content

Commit

Permalink
Merge pull request #92 from psandor/disable-crop
Browse files Browse the repository at this point in the history 
add an extra disableCrop input to the directive
  • Loading branch information
@CrackerakiUA
CrackerakiUA authored May 20, 2019
2 parents 0c55f3b + a76c47c commit 78a6c26
Show file tree
Hide file tree
Showing 8 changed files with 197 additions and 40 deletions.
2 changes: 1 addition & 1 deletion compile/minified/ui-cropper.js
View file

Large diffs are not rendered by default.

110 changes: 91 additions & 19 deletions compile/unminified/ui-cropper.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/*!
* uiCropper v1.0.8
* uiCropper v1.0.9
* https://crackerakiua.github.io/ui-cropper/
*
* Copyright (c) 2018 Alex Kaul
* Copyright (c) 2019 Alex Kaul
* License: MIT
*
* Generated at Tuesday, December 11th, 2018, 7:28:54 PM
* Generated at Monday, May 20th, 2019, 10:17:03 PM
*/
(function() {
angular.module('uiCropper', []);
Expand Down Expand Up @@ -839,8 +839,9 @@ angular.module('uiCropper').factory('cropArea', ['cropCanvas', function (CropCan

this._forceAspectRatio = false;
this._aspect = null;
this._disableCrop = false;

this._cropCanvas = new CropCanvas(ctx);
this._cropCanvas = new CropCanvas(ctx, this._disableCrop);

this._image = new Image();
this._size = {
Expand Down Expand Up @@ -1002,6 +1003,11 @@ angular.module('uiCropper').factory('cropArea', ['cropCanvas', function (CropCan
this.setSize(this._initCoords);
};

CropArea.prototype.setDisableCrop = function(value){
this._disableCrop = value;
this._cropCanvas = new CropCanvas(this._ctx, this._disableCrop);
};

CropArea.prototype.getInitCoords = function () {
return this._initCoords;
};
Expand Down Expand Up @@ -1329,7 +1335,7 @@ angular.module('uiCropper').factory('cropCanvas', [function() {
strokeWidth: 1
};

return function(ctx) {
return function(ctx, disable) {

/* Base functions */

Expand All @@ -1340,6 +1346,10 @@ angular.module('uiCropper').factory('cropCanvas', [function() {

// Draw Filled Polygon
var drawFilledPolygon = function(shape, fillStyle, centerCoords, scale) {
if(disable) {
return;
}

ctx.save();
ctx.fillStyle = fillStyle;
ctx.beginPath();
Expand All @@ -1362,13 +1372,21 @@ angular.module('uiCropper').factory('cropCanvas', [function() {
/* Icons */

this.drawIconMove = function(centerCoords, scale) {
if(disable) {
return;
}

drawFilledPolygon(shapeArrowN, colors.moveIconFill, centerCoords, scale);
drawFilledPolygon(shapeArrowW, colors.moveIconFill, centerCoords, scale);
drawFilledPolygon(shapeArrowS, colors.moveIconFill, centerCoords, scale);
drawFilledPolygon(shapeArrowE, colors.moveIconFill, centerCoords, scale);
};

this.drawIconResizeCircle = function(centerCoords, circleRadius, scale) {
if(disable) {
return;
}

var scaledCircleRadius = circleRadius * scale;
ctx.save();
ctx.strokeStyle = colors.resizeCircleStroke;
Expand All @@ -1383,6 +1401,10 @@ angular.module('uiCropper').factory('cropCanvas', [function() {
};

this.drawIconResizeBoxBase = function(centerCoords, boxSize, scale) {
if(disable) {
return;
}

var scaledBoxSize = boxSize * scale;
ctx.save();
ctx.strokeStyle = colors.resizeBoxStroke;
Expand All @@ -1393,11 +1415,19 @@ angular.module('uiCropper').factory('cropCanvas', [function() {
ctx.restore();
};
this.drawIconResizeBoxNESW = function(centerCoords, boxSize, scale) {
if(disable) {
return;
}

this.drawIconResizeBoxBase(centerCoords, boxSize, scale);
drawFilledPolygon(shapeArrowNE, colors.resizeBoxArrowFill, centerCoords, scale);
drawFilledPolygon(shapeArrowSW, colors.resizeBoxArrowFill, centerCoords, scale);
};
this.drawIconResizeBoxNWSE = function(centerCoords, boxSize, scale) {
if(disable) {
return;
}

this.drawIconResizeBoxBase(centerCoords, boxSize, scale);
drawFilledPolygon(shapeArrowNW, colors.resizeBoxArrowFill, centerCoords, scale);
drawFilledPolygon(shapeArrowSE, colors.resizeBoxArrowFill, centerCoords, scale);
Expand All @@ -1406,6 +1436,10 @@ angular.module('uiCropper').factory('cropCanvas', [function() {
/* Crop Area */

this.drawCropArea = function(image, centerCoords, size, fnDrawClipPath) {
if(disable) {
return;
}

var xRatio = Math.abs(image.width / ctx.canvas.width),
yRatio = Math.abs(image.height / ctx.canvas.height),
xLeft = Math.abs(centerCoords.x - size.w / 2),
Expand All @@ -1432,7 +1466,6 @@ angular.module('uiCropper').factory('cropCanvas', [function() {

ctx.restore();
};

};
}]);

Expand Down Expand Up @@ -2313,15 +2346,6 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir
forceAspectRatio = false;

/* PRIVATE FUNCTIONS */

this.setInitMax = function (bool) {
initMax = bool;
};

this.setAllowCropResizeOnCorners = function (bool) {
theArea.setAllowCropResizeOnCorners(bool);
};

// Draw Scene
function drawScene() {
// clear canvas
Expand All @@ -2334,16 +2358,30 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir
ctx.save();

// and make it darker
ctx.fillStyle = 'rgba(0, 0, 0, 0.65)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

ctx.restore();
if(!theArea._disableCrop){
ctx.fillStyle = 'rgba(0, 0, 0, 0.65)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

ctx.restore();
}
// draw Area
theArea.draw();
}
}

this.setInitMax = function (bool) {
initMax = bool;
};

this.setAllowCropResizeOnCorners = function (bool) {
theArea.setAllowCropResizeOnCorners(bool);
};

this.setDisableCrop = function(value){
theArea.setDisableCrop(value);
drawScene();
};

var focusOnCanvas = function () {
elCanvas[0].focus();
};
Expand Down Expand Up @@ -2493,6 +2531,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir
};

var onMouseMove = function (e) {
if(theArea._disableCrop) {
return;
}

if (image !== null) {
var offset = getElementOffset(ctx.canvas),
pageX, pageY;
Expand All @@ -2511,6 +2553,9 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir

var onMouseDown = function (e) {
e.preventDefault();
if(theArea._disableCrop) {
return;
}

if (!opts.allowPropagation) {
e.stopPropagation();
Expand All @@ -2533,6 +2578,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir
};

var onMouseUp = function (e) {
if(theArea._disableCrop) {
return;
}

if (image !== null) {
var offset = getElementOffset(ctx.canvas),
pageX, pageY;
Expand All @@ -2555,6 +2604,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir
};

var resizeCropAreaByDirection = function (direction) {
if(theArea._disableCrop) {
return;
}

var scale;
switch (direction) {
case 'up':
Expand All @@ -2573,6 +2626,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir
};

var moveCropArea = function (direction) {
if(theArea._disableCrop) {
return;
}

var center = theArea.getCenterPoint();
var step = 5;
var point = {
Expand Down Expand Up @@ -2602,6 +2659,10 @@ angular.module('uiCropper').factory('cropHost', ['$document', '$q', 'cropAreaCir
};

var onKeyDown = function (e) {
if(theArea._disableCrop) {
return;
}

if (image !== null && opts.disableKeyboardAccess !== true) {
var key = e.which;
switch (key) {
Expand Down Expand Up @@ -3316,6 +3377,7 @@ angular.module('uiCropper').directive('uiCropper', ['$timeout', 'cropHost', 'cro
dominantColor: '=?',
paletteColor: '=?',
paletteColorLength: '=?',
disableCrop: '=?',

onChange: '&',
onLoadBegin: '&',
Expand Down Expand Up @@ -3510,6 +3572,12 @@ angular.module('uiCropper').directive('uiCropper', ['$timeout', 'cropHost', 'cro

// Sync CropHost with Directive's options
scope.$watch('image', function (newVal) {
// reset the original size and position to 0
// it's mandatory because if not reset the size of the crop area won't maximise when the image was replaced
var area = cropHost.getArea();
if (area) {
cropHost.getArea()._size = { x: 0, y: 0, w: 0, h: 0 };
}
if (newVal) {
displayLoading();
}
Expand Down Expand Up @@ -3581,6 +3649,10 @@ angular.module('uiCropper').directive('uiCropper', ['$timeout', 'cropHost', 'cro
}
});

scope.$watch('disableCrop', function () {
cropHost.setDisableCrop(scope.disableCrop);
});

// Update CropHost dimensions when the directive element is resized
scope.$watch(
function () {
Expand Down
15 changes: 13 additions & 2 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<h1>Full test suite with uiCropper</h1>

<hr>

<div data-ng-if="enableCrop" class="cropArea"
data-ng-class="{'big':size=='big', 'medium':size=='medium', 'small':size=='small'}">
<ui-cropper
Expand All @@ -65,7 +65,8 @@ <h1>Full test suite with uiCropper</h1>
on-load-error="onLoadError()"
live-view="blockingObject"
area-coords="myAreaCoords"
canvas-scalemode="true">
canvas-scalemode="true"
disable-crop="disableCropArea">
</ui-cropper>
</div>

Expand Down Expand Up @@ -113,6 +114,16 @@ <h3 class="text-center">Result with blob in url</h3>
<label for="changeOnFly" class="label-info"></label>
</div>
</div>

<div class="switch">
Enable / disable just the crop area
<div class="material-switch pull-right">
<input id="disableCrop" data-ng-model="disableCropArea" data-ng-init="disableCropArea=false"
type="checkbox"
checked/>
<label for="disableCrop" class="label-success"></label>
</div>
</div>
</div>

<div class="well">
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "1.0.8",
"version": "1.0.9",
"author": {
"name": "Alex Kaul",
"email": "alexkaul@googlemail.com"
Expand Down Expand Up @@ -75,4 +75,4 @@
"type": "opencollective",
"url": "https://opencollective.com/ui-cropper"
}
}
}
8 changes: 7 additions & 1 deletion source/js/classes/crop-area.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ angular.module('uiCropper').factory('cropArea', ['cropCanvas', function (CropCan

this._forceAspectRatio = false;
this._aspect = null;
this._disableCrop = false;

this._cropCanvas = new CropCanvas(ctx);
this._cropCanvas = new CropCanvas(ctx, this._disableCrop);

this._image = new Image();
this._size = {
Expand Down Expand Up @@ -181,6 +182,11 @@ angular.module('uiCropper').factory('cropArea', ['cropCanvas', function (CropCan
this.setSize(this._initCoords);
};

CropArea.prototype.setDisableCrop = function(value){
this._disableCrop = value;
this._cropCanvas = new CropCanvas(this._ctx, this._disableCrop);
};

CropArea.prototype.getInitCoords = function () {
return this._initCoords;
};
Expand Down
Loading

0 comments on commit 78a6c26

Please sign in to comment.