Add the posibility to leave the image boundaries by stencil

Author: Norserium

example/docs/.vuepress/components/custom-restrictions-example.vue

@@ -20,8 +20,8 @@ export default {
 			return {
 				minWidth: minWidth,
 				minHeight: minHeight,
-				maxWidth: Math.min(imageWidth, maxWidth),
-				maxHeight: Math.min(imageHeight, maxHeight),
+				maxWidth: maxWidth,
+				maxHeight: maxHeight,
 			};
 		},
 		onCrop({ canvas, }) {

example/docs/.vuepress/components/image-restrictions-example.vue

@@ -0,0 +1,127 @@
+<script>
+import { RoundStencil, Cropper } from 'vue-advanced-cropper';
+
+export default {
+	components: {
+		Cropper,
+	},
+	data() {
+		return {
+			image: 'https://images.pexels.com/photos/3304973/pexels-photo-3304973.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
+			restrictionType: 'none',
+			result: null,
+		};
+	},
+	methods: {
+		onCrop({ canvas, }) {
+			this.result = canvas.toDataURL();
+		},
+		showImage() {
+			const newTab = window.open();
+			newTab.document.body.innerHTML = `<img src="${this.result}"></img>`;
+		},
+	},
+};
+</script>
+
+<template>
+  <div class="image-restriction-example">
+    <Cropper
+      check-orientation
+      backgroundClassname="background"
+      :src="image"
+			:image-restriction="restrictionType"
+      @change="onCrop"
+    />
+    <div class="panel">
+      <div class="panel__left">
+        <div class="input">
+          <span class="input__label">Image Restriction Type</span>
+          <select
+            v-model="restrictionType"
+            class="input__control"
+            type="text"
+          >
+						<option value="area">area</option>
+						<option value="stencil">stencil</option>
+						<option value="none">none</option>
+					</select>
+        </div>
+      </div>
+      <div class="panel__right">
+        <div
+          v-if="this.result"
+          class="button"
+          @click="showImage()"
+        >
+          Download
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.image-restriction-example {
+	margin-top: 20px;
+	margin-bottom: 20px;
+
+	.background {
+		background: #C6BFAF;
+	}
+
+	.panel {
+		color: white;
+		display: flex;
+		align-items: flex-end;
+		padding: 20px;
+		background: #3fb37f;
+		&__left {
+			width: 100%;
+			padding-right: 30px;
+		}
+	}
+
+	.input {
+		&__control {
+			padding: 8px;
+			width: 100%;
+			border: none;
+			color: black;
+			font: inherit;
+			font-size: 15px;
+		}
+		&__label {
+			display: block;
+			font-size: 11px;
+			margin-bottom: 5px;
+		}
+	}
+	.image-restriction-cropper {
+		width: 100%;
+		max-height: 500px;
+		border: solid 1px #EEE;
+	}
+
+	.button {
+		width: 120px;
+		margin-top: 15px;
+		display: block;
+		color: white;
+		font-size: 16px;
+		padding: 10px 20px;
+		text-align: center;
+		background: #1f8255;
+		cursor: pointer;
+		transition: background 0.5s;
+		font-weight: normal;
+		&:hover {
+			background: #26a069;
+			text-decoration: none !important;
+		}
+		input {
+			display: none;
+		}
+	}
+}
+</style>

example/docs/tutorials/recipes.md

@@ -284,8 +284,8 @@ new Vue({
 			return {
 				minWidth: minWidth,
 				minHeight: minHeight,
-				maxWidth: Math.min(imageWidth, maxWidth),
-				maxHeight: Math.min(imageHeight, maxHeight),
+				maxWidth: maxWidth,
+				maxHeight: maxHeight,
 			}
 		},
 	},
@@ -340,6 +340,16 @@ export default {
 </div>
 ```
 
+## Different image restrictions
+
+You are able to set different the restrictions of an image position by passing the following string to the `imageRestriction` prop:
+- `area` (default) prevents resizing and moving the image beyond the area
+- `stencil` prevents resizing and moving the image beyond the stencil
+- `none` allows free resizing and moving the image
+
+<image-restrictions-example></image-restrictions-example>
+
+
 ## Set coordinates
 
 Usually an user changes the coordinates of a stencil, but sometimes you need to set its coordinates programmatically. There is the special method to do it: [setCoordinates](/components/cropper.html#setcoordinates-transform). It applies your changes respect to existing limitation (aspect ratios, minimum size and etc.)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-advanced-cropper",
-	"version": "0.14.2",
+	"version": "0.15.0",
 	"description": "The advanced library to create your own croppers suited for any website design",
 	"author": "Norserium",
 	"license": "MIT",

src/Cropper.vue

@@ -6,9 +6,9 @@ import debounce from 'debounce';
 import { RectangleStencil } from './components/stencils';
 import { CropperWrapper } from './components/service';
 import { ResizeEvent, MoveEvent } from './core/events';
-import { isLocal, isCrossOriginURL, isUndefined, addTimestamp, getSettings } from './core/utils';
+import { isLocal, isCrossOriginURL, isUndefined, addTimestamp, getSettings, parseNumber } from './core/utils';
 import { arrayBufferToDataURL, getImageTransforms, getStyleTransforms, prepareSource, parseImage } from './core/image';
-import { ALL_DIRECTIONS, MINIMAL_PERCENT_SIZE } from './core/constants';
+import { ALL_DIRECTIONS, MINIMAL_PERCENT_SIZE, IMAGE_RESTRICTIONS } from './core/constants';
 import * as algorithms from './core/algorithms';
 
 const cn = bem('vue-advanced-cropper');
@@ -41,6 +41,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		allowedArea: {
+			type: Function,
+			default: algorithms.allowedArea,
+		},
 		resizeAlgorithm: {
 			type: Function,
 			default: algorithms.resize,
@@ -140,6 +144,9 @@ export default {
 		imageRestriction: {
 			type: [String],
 			default: 'area',
+			validator(value) {
+				return IMAGE_RESTRICTIONS.indexOf(value) !== -1;
+			}
 		}
 	},
 	data() {
@@ -199,7 +206,7 @@ export default {
 			};
 			
 			// Disable some interactions for user convenience
-			settings.touchMove.enabled = settings.touchMove.enabled && this.worldTransforms.scale > 1;
+			settings.touchMove.enabled = settings.touchMove.enabled && (this.worldTransforms.scale !== 1 || this.imageRestriction === 'none');
 
 			return settings;
 		},
@@ -265,13 +272,20 @@ export default {
 			return result;
 		},
 		stencilRestrictions() {
+			const oldRestrictions = {
+				minWidth: !isUndefined(this.minWidth) ? this.minWidth : 0,
+				minHeight: !isUndefined(this.minHeight) ? this.minHeight : 0,
+				maxWidth: !isUndefined(this.maxWidth) ? this.maxWidth : Infinity,
+				maxHeight: !isUndefined(this.maxHeight) ? this.maxHeight : Infinity,
+			};
+
 			const restrictions = migrateAlgorithm(this.restrictions, 'restrictions', (args) => [
 				args.minWidth, args.minHeight, args.maxWidth, args.maxHeight, args.imageWidth, args.imageHeight
 			])({
-				minWidth: Number(this.minWidth),
-				minHeight: Number(this.minHeight),
-				maxWidth: Number(this.maxWidth),
-				maxHeight: Number(this.maxHeight),
+				minWidth: parseNumber(oldRestrictions.minWidth),
+				minHeight: parseNumber(oldRestrictions.minHeight),
+				maxWidth: parseNumber(oldRestrictions.maxWidth),
+				maxHeight: parseNumber(oldRestrictions.maxHeight),
 				imageWidth: this.imageSize.width,
 				imageHeight: this.imageSize.height,
 				props: this.$props
@@ -302,7 +316,7 @@ export default {
 				restrictions.heightFrozen = true;
 			}
 
-			if (this.imageRestriction === 'area') {
+			if (this.imageRestriction !== 'none') {
 				if (!restrictions.maxWidth || (restrictions.maxWidth > this.imageSize.width)) {
 					restrictions.maxWidth = this.imageSize.width;
 				}
@@ -330,6 +344,9 @@ export default {
 		maxHeight() {
 			this.onPropsChange();
 		},
+		imageRestriction() {
+			this.resetCoordinates();
+		},
 		stencilProps(oldProps, newProps) {
 			const significantProps = ['aspectRatio', 'minAspectRatio', 'maxAspectRatio'];
 			if (significantProps.find(prop => oldProps[prop] !== newProps[prop])) {
@@ -386,6 +403,7 @@ export default {
 				worldTransforms: this.worldTransforms,
 				coefficient: this.coefficient,
 				imageSize: this.imageSize,
+				allowedArea: this.getAllowedArea(true)
 			});
 
 			this.worldTransforms = worldTransforms;
@@ -497,7 +515,7 @@ export default {
 				this.resizeAlgorithm({
 					coordinates: this.coordinates,
 					restrictions: this.stencilRestrictions,
-					allowedArea: this.allowedArea(),
+					allowedArea: this.getAllowedArea(),
 					aspectRatio: this.stencilAspectRatios(),
 					resizeEvent
 				})
@@ -520,6 +538,9 @@ export default {
 				frozenDirections: this.frozenDirections,
 				stencilCoordinates: this.stencilCoordinates,
 				worldTransforms: this.worldTransforms,
+				allowedArea: this.getAllowedArea(true),
+				minScale: this.imageRestriction === 'none' ? MINIMAL_PERCENT_SIZE : 1,
+				fitImage: this.imageRestriction === 'area'
 			});
 			this.worldTransforms = worldTransforms;
 			this.onChangeCoordinates(coordinates);
@@ -532,7 +553,7 @@ export default {
 			this.onChangeCoordinates(
 				this.moveAlgorithm({
 					coordinates: this.coordinates,
-					allowedArea: this.allowedArea(),
+					allowedArea: this.getAllowedArea(),
 					moveEvent
 				})
 			);
@@ -590,12 +611,8 @@ export default {
 		},
 		applyTransforms(transforms, autoZoom = false) {
 			const aspectRatio = this.stencilAspectRatios();
-			const allowedArea = {
-				left: 0,
-				top: 0,
-				right: this.imageSize.width,
-				bottom: this.imageSize.height
-			};
+
+			const allowedArea = this.getAllowedArea(true);
 
 			const moveAlgorithm = (prevCoordinates, newCoordinates) => {
 				return this.moveAlgorithm({
@@ -649,7 +666,7 @@ export default {
 				}
 			});
 
-			if (autoZoom && this.worldTransforms.scale > 1) {
+			if (autoZoom) {
 				this.autoZoom(coordinates);
 			} else {
 				if (this.worldTransforms.scale > 1) {
@@ -791,13 +808,13 @@ export default {
 				}
 			});
 		},
-		allowedArea() {
-			return {
-				left: -this.worldTransforms.shift.left / this.worldTransforms.scale,
-				top: -this.worldTransforms.shift.top / this.worldTransforms.scale,
-				right: (this.boundarySize.width - this.worldTransforms.shift.left / this.coefficient) / this.worldTransforms.scale * this.coefficient,
-				bottom: (this.boundarySize.height - this.worldTransforms.shift.top / this.coefficient) / this.worldTransforms.scale * this.coefficient,
-			};
+		getAllowedArea(breakBoundaries) {
+			return this.allowedArea({
+				breakBoundaries,
+				imageSize: this.imageSize,
+				worldTransforms: this.worldTransforms,
+				imageRestriction: this.imageRestriction
+			});
 		},
 		stencilAspectRatios() {
 			if (this.$refs.stencil.aspectRatios) {