Add adaptation of the stencil to changes of props (stencilProps, maxW…

…idth, maxHeight and etc.)
advanced-cropper · Dec 5, 2019 · 01fe4f2 · 01fe4f2
1 parent 5ff84d8
commit 01fe4f2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-advanced-cropper",
-	"version": "0.14.0",
+	"version": "0.14.1",
 	"description": "The advanced library to create your own croppers suited for any website design",
 	"author": "Norserium",
 	"license": "MIT",

diff --git a/src/Cropper.vue b/src/Cropper.vue
@@ -298,17 +298,23 @@ export default {
 			this.onChangeImage();
 		},
 		minWidth() {
-			this.resetCoordinates();
+			this.onPropsChange();
 		},
 		maxWidth() {
-			this.resetCoordinates();
+			this.onPropsChange();
 		},
 		minHeight() {
-			this.resetCoordinates();
+			this.onPropsChange();
 		},
 		maxHeight() {
-			this.resetCoordinates();
+			this.onPropsChange();
 		},
+		stencilProps(oldProps, newProps) {
+			const significantProps = ['aspectRatio', 'minAspectRatio', 'maxAspectRatio'];
+			if (significantProps.find(prop => oldProps[prop] !== newProps[prop])) {
+				Vue.nextTick(this.onPropsChange);
+			}
+		}
 	},
 	mounted() {
 		this.debouncedUpdate = debounce(
@@ -558,6 +564,9 @@ export default {
 				this.applyTransforms(transforms, autoZoom);
 			});
 		},
+		onPropsChange() {
+			this.applyTransforms(this.coordinates, true);
+		},
 		applyTransforms(transforms, autoZoom = false) {
 			const aspectRatio = this.stencilAspectRatios();
 			const allowedArea = {