Refactor the code

Author: Norserium

example/docs/.vuepress/components/getting-result-example.vue

@@ -61,7 +61,7 @@ export default {
         <img
           :src="this.image"
           alt=""
-        >>
+        >
       </div>
     </div>
   </div>

example/docs/.vuepress/components/getting-result-second-example.vue

@@ -64,7 +64,7 @@ export default {
         <img
           :src="this.image"
           alt=""
-        >>
+        >
       </div>
     </div>
 

src/components/helpers/PreviewImage.vue

@@ -60,13 +60,11 @@ export default {
 		},
 		imageStyle() {
 			const coefficient = this.previewHeight / this.height;
-			const height = this.imageSize.height * coefficient;
-			const width = this.imageSize.width * coefficient;
 			return {
-				width: `${width}px`,
-				height: `${height}px`,
-				left: `${-this.left*coefficient}px`,
-				top: `${-this.top*coefficient}px`,
+				width: `${this.imageSize.width * coefficient}px`,
+				height: `${this.imageSize.height * coefficient}px`,
+				left: `${-this.left * coefficient}px`,
+				top: `${-this.top * coefficient}px`,
 			};
 		},
 	},
@@ -95,7 +93,6 @@ export default {
 			}
 		},
 	},
-
 };
 </script>
 
@@ -114,15 +111,15 @@ export default {
 </template>
 
 <style lang="scss">
-  .vue-preview-image{
+  .vue-preview-image {
     overflow: hidden;
-	position: relative;
+		position: relative;
     &__image {
-		pointer-events: none;
-		position: absolute;
-		// Workaround to prevent bugs at the websites with max-width
-		// rule applied to img (Vuepress for example)
-		max-width: unset !important;
+			pointer-events: none;
+			position: absolute;
+			// Workaround to prevent bugs at the websites with max-width
+			// rule applied to img (Vuepress for example)
+			max-width: unset !important;
     }
   }
 </style>

src/components/service/BoundingBox.vue

@@ -153,7 +153,6 @@ export default {
 	},
 	mounted() {
 		this.touches = [];
-		this.draggingAnchor = [];
 	},
 	methods: {
 		onHandlerDrag(dragEvent, horizontalDirection, verticalDirection) {

src/components/service/CropperWrapper.vue

@@ -36,7 +36,6 @@ export default {
 	},
 	mounted() {
 		this.touches = [];
-		this.draggingAnchor = [];
 	},
 	methods: {
 		onTouchStart(e) {
@@ -81,7 +80,6 @@ export default {
 					clientY: e.clientY,
 				};
 				this.touches = [touch];
-				this.initAnchor(touch);
 				e.stopPropagation();
 			}
 		},
@@ -100,20 +98,11 @@ export default {
 		onMouseUp() {
 			this.touches = [];
 		},
-		initAnchor(touch) {
-			const container = this.$refs.container;
-			const { left, top, } = container.getBoundingClientRect();
-
-			this.anchor = {
-				x: touch.clientX - left,
-				y: touch.clientY - top,
-			};
-		},
 		calculateGeometricProperties(touches) {
 			const container = this.$refs.container;
 			const { left, top } = container.getBoundingClientRect();
 
-			const centerMass = { left: 0,top: 0 };
+			const centerMass = { left: 0, top: 0 };
 			let spread = 0;
 
 			touches.forEach(touch => {

src/components/service/PreviewResult.vue

@@ -17,17 +17,6 @@ export default {
 		imageClassname: {
 			type: String,
 		},
-		resultCoordinates: {
-			type: Object,
-			default() {
-				return {
-					width: 0,
-					height: 0,
-					left: 0,
-					top: 0,
-				};
-			},
-		},
 		stencilCoordinates: {
 			type: Object,
 			default() {
@@ -58,12 +47,10 @@ export default {
 		},
 		imageStyle() {
 			const imageTransforms = this.img.transforms;
-			const imageWidth = this.img.size.width;
-			const imageHeight = this.img.size.height;
-			const coefficient = this.img.coefficient;
-			const height = imageHeight / coefficient;
-			const width = imageWidth / coefficient;
 			const flipped = imageTransforms.flipped;
+			const coefficient = this.img.coefficient;
+			const height = this.img.size.height / coefficient;
+			const width = this.img.size.width / coefficient;
 
 			const result = {
 				width: `${width}px`,
@@ -76,8 +63,6 @@ export default {
 				result.left = `${-this.stencilCoordinates.left - (height - width)/2 + imageTransforms.translateX}px`;
 				result.top = `${-this.stencilCoordinates.top - (width - height)/2 + imageTransforms.translateY}px`;
 			} else {
-				result.width = `${width}px`;
-				result.height = `${height}px`;
 				result.left = `${-this.stencilCoordinates.left + imageTransforms.translateX}px`;
 				result.top = `${-this.stencilCoordinates.top + imageTransforms.translateY}px`;
 			}

src/components/stencils/CircleStencil.vue

@@ -157,7 +157,7 @@ export default {
   box-sizing: content-box;
   cursor: move;
   &__preview {
-	border-radius: 50%;
+		border-radius: 50%;
   }
 }
 </style>

src/core/algorithms.js

@@ -3,6 +3,7 @@ import {
 	VERTICAL_DIRECTIONS,
 	ALL_DIRECTIONS,
 } from './constants';
+
 import { MoveEvent } from './events';
 
 
@@ -30,6 +31,7 @@ function fitConditions({ directions: oldDirections, coordinates, restrictions, p
 	let currentWidth = getCurrentWidth(coordinates, directions);
 	let currentHeight = getCurrentHeight(coordinates, directions);
 
+	// Prevent strange resizes when the width or height of stencil becomes smaller than 0
 	if (currentWidth < 0) {
 		if (directions.left < 0 && directions.right < 0) {
 			directions.left = -(coordinates.width - restrictions.minWidth) / (directions.left / directions.right);
@@ -40,7 +42,6 @@ function fitConditions({ directions: oldDirections, coordinates, restrictions, p
 			directions.right = -(coordinates.width - restrictions.minWidth);
 		}
 	}
-
 	if (currentHeight < 0) {
 		if (directions.top < 0 && directions.bottom < 0) {
 			directions.top = -(coordinates.height - restrictions.minHeight) / (directions.top / directions.bottom);
@@ -52,9 +53,9 @@ function fitConditions({ directions: oldDirections, coordinates, restrictions, p
 		}
 	}
 
+	// Prevent breaking limits 
 	let breaks = getBrokenLimits(coordinates, directions, allowedArea);
 
-
 	if (mode === 'move') {
 		if (breaks.left > 0 && breaks.right === 0) {
 			directions.right += breaks.left;
@@ -88,8 +89,6 @@ function fitConditions({ directions: oldDirections, coordinates, restrictions, p
 		}
 	});
 
-
-
 	if (preserveAspectRatio) {
 		const multiplier = Math.min(...ALL_DIRECTIONS.map(direction => maxResize[direction]));
 		if (multiplier !== Infinity) {

src/core/constants.js

@@ -1,12 +1,3 @@
-export const WEST = 1;
-export const WEST_NORTH = 2;
-export const NORTH = 3;
-export const EAST_NORTH = 4;
-export const EAST = 5;
-export const EAST_SOUTH = 6;
-export const SOUTH = 7;
-export const WEST_SOUTH = 8;
-
 export const HORIZONTAL_DIRECTIONS = ['left', 'right'];
 export const VERTICAL_DIRECTIONS = ['top', 'bottom'];
 export const ALL_DIRECTIONS = ['left', 'right', 'top', 'bottom'];

src/core/utils.js

@@ -46,6 +46,10 @@ export function isUndefined(obj) {
 	return typeof obj === 'undefined';
 }
 
+export function isObject(obj) {
+	return typeof obj === 'object' && obj !== null;
+}
+
 export function addTimestamp(url) {
 	const timestamp = `timestamp=${(new Date()).getTime()}`;
 	return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp;
@@ -58,16 +62,12 @@ export function distance(firstPoint, secondPoint) {
 }
 
 export function getSettings(param, defaultParams = {}) {
-	if (typeof param === 'object' && param !== null) {
-		return {
-			enabled: true,
-			...defaultParams,
-			...param
-		};
-	} else {
-		return {
-			enabled: Boolean(param),
-			...defaultParams,
-		};
+	let result = {
+		enabled: Boolean(param),
+		...defaultParams
+	};
+	if (isObject(param)) {
+		result = { ...result, ...param };
 	}
-}
+	return result;
+}