From 218646a6fc173abb87764b9a05a5e1e8ccfd3702 Mon Sep 17 00:00:00 2001
From: Norserium <norserium@yandex.ru>
Date: Sat, 2 Nov 2019 19:22:45 +0300
Subject: [PATCH] Add the possibility to move and resize background

---
 .../Examples/CircleExample/CircleStencil.vue  |   8 +-
 .../.vuepress/components/algorithm-tester.vue | 257 ++++++++
 .../docs/.vuepress/components/home-page.vue   |   2 +-
 .../components/mobile-fixed-example.vue       |  34 ++
 .../components/set-coordinates-example.vue    |  18 +-
 example/docs/.vuepress/styles/index.styl      |   4 +
 example/docs/introduction/algorithm.md        |   4 +
 example/docs/tutorials/recipes.md             |  32 +
 package-lock.json                             |  48 +-
 package.json                                  |   2 +-
 rollup.config.js                              |   4 +-
 src/Cropper.vue                               | 343 +++++++----
 src/components/handlers/SimpleHandler.vue     |   5 +
 src/components/lines/SimpleLine.vue           |   7 +-
 src/components/service/BoundingBox.vue        |  66 +--
 src/components/service/CropperWrapper.vue     | 192 ++++++
 src/components/service/DraggableArea.vue      | 111 ++--
 src/components/service/HandlerWrapper.vue     |  12 +-
 src/components/service/LineWrapper.vue        |  10 +-
 src/components/service/PreviewResult.vue      |  15 +-
 src/components/service/index.js               |   1 +
 src/components/stencils/RectangleStencil.vue  |  20 +-
 src/core/algorithms.js                        | 547 +++++++++++++-----
 src/core/constants.js                         |   2 +
 src/core/events.js                            |  11 +-
 src/core/utils.js                             |   6 +
 src/mixins/draggable.js                       |  20 +-
 src/mixins/index.js                           |   2 +-
 28 files changed, 1342 insertions(+), 441 deletions(-)
 create mode 100644 example/docs/.vuepress/components/algorithm-tester.vue
 create mode 100644 example/docs/.vuepress/components/mobile-fixed-example.vue
 create mode 100644 example/docs/introduction/algorithm.md
 create mode 100644 src/components/service/CropperWrapper.vue

diff --git a/example/docs/.vuepress/components/Home/Examples/CircleExample/CircleStencil.vue b/example/docs/.vuepress/components/Home/Examples/CircleExample/CircleStencil.vue
index 1484f2c4..1619ef59 100644
--- a/example/docs/.vuepress/components/Home/Examples/CircleExample/CircleStencil.vue
+++ b/example/docs/.vuepress/components/Home/Examples/CircleExample/CircleStencil.vue
@@ -41,12 +41,9 @@ export default {
 		},
 		onHandlerMove(dragEvent) {
 			const shift = dragEvent.shift();
-
 			const widthResize = shift.left/2;
 			const heightResize = -shift.top/2;
 			const { height, width, left, top, } = this.resultCoordinates;
-			const coefficient = width / this.stencilCoordinates.width;
-
 			this.$emit('resize', new ResizeEvent(
 				dragEvent.nativeEvent,
 				{
@@ -54,8 +51,11 @@ export default {
 					right: widthResize,
 					top: heightResize,
 					bottom: heightResize,
+				},
+				{
+					compensate: true,
 				}
-			));
+			))
 		},
 		aspectRatios() {
 			return {
diff --git a/example/docs/.vuepress/components/algorithm-tester.vue b/example/docs/.vuepress/components/algorithm-tester.vue
new file mode 100644
index 00000000..b594817d
--- /dev/null
+++ b/example/docs/.vuepress/components/algorithm-tester.vue
@@ -0,0 +1,257 @@
+<script>
+import { BoundingBox, ResizeEvent } from 'vue-advanced-cropper';
+import {resize} from 'vue-advanced-cropper/src/core/algorithms'
+
+export default {
+	name: 'AlgorithmTester',
+	components: {
+		BoundingBox,
+	},
+	data() {
+		return {
+			coordinates: {
+				cropper: {
+					width: 100,
+					height: 100,
+					left: 150,
+					top: 150,
+				},
+				stencil: {
+					width: 100,
+					height: 100,
+					left: 150,
+					top: 150,
+				},
+				current: {
+					width: 100,
+					height: 100,
+					left: 150,
+					top: 150,
+				},
+				area: {
+					width: 400,
+					height: 400,
+					left: 0,
+					top: 0,
+				},
+			},
+			stencilProps: `{\n\t"aspectRatio": 10/16\n}`,
+		};
+	},
+	computed: {
+		cropperStyle() {
+			return {
+				width: `${this.coordinates.cropper.width}px`,
+				height: `${this.coordinates.cropper.height}px`,
+				top: `${this.coordinates.cropper.top}px`,
+				left: `${this.coordinates.cropper.left}px`,
+			}
+		},
+		currentStyle() {
+			return {
+				width: `${this.coordinates.current.width}px`,
+				height: `${this.coordinates.current.height}px`,
+				top: `${this.coordinates.current.top}px`,
+				left: `${this.coordinates.current.left}px`,
+			}
+		},
+		stencilStyle() {
+			return {
+				width: `${this.coordinates.stencil.width}px`,
+				height: `${this.coordinates.stencil.height}px`,
+				top: `${this.coordinates.stencil.top}px`,
+				left: `${this.coordinates.stencil.left}px`,
+			}
+		},
+		areaStyle() {
+			return {
+				width: `${this.coordinates.area.width}px`,
+				height: `${this.coordinates.area.height}px`,
+				top: `${this.coordinates.area.top}px`,
+				left: `${this.coordinates.area.left}px`,
+			}
+		}
+	},
+	methods: {
+		onResizeStencil({directions}) {
+			this.coordinates.stencil.left -= directions.left
+			this.coordinates.stencil.top -= directions.top
+			this.coordinates.stencil.width += directions.right + directions.left
+			this.coordinates.stencil.height += directions.top + directions.bottom
+		},
+		onResizeArea({directions}) {
+			this.coordinates.area.left -= directions.left
+			this.coordinates.area.top -= directions.top
+			this.coordinates.area.width += directions.right + directions.left
+			this.coordinates.area.height += directions.top + directions.bottom
+		},
+		onResizeCurrent({directions}) {
+			this.coordinates.current.left -= directions.left
+			this.coordinates.current.top -= directions.top
+			this.coordinates.current.width += directions.right + directions.left
+			this.coordinates.current.height += directions.top + directions.bottom
+		},
+		onResize(complete) {
+			const coordinates = resize({
+				coordinates: {...this.coordinates.current},
+				restrictions: {
+					minWidth: 100,
+					minHeight: 100,
+					maxWidth: 400,
+					maxHeight: 400,
+				},
+				aspectRatio: {
+					minimum: 10/20,
+				},
+				allowedArea: {
+					left: this.coordinates.area.left,
+					top: this.coordinates.area.top,
+					bottom: this.coordinates.area.top + this.coordinates.area.height,
+					right: this.coordinates.area.left + this.coordinates.area.width,
+				},
+				coefficient: 1,
+				resizeEvent: new ResizeEvent({}, {
+					left: -(this.coordinates.stencil.left - this.coordinates.current.left),
+					top: -(this.coordinates.stencil.top - this.coordinates.current.top),
+					bottom: this.coordinates.stencil.top + this.coordinates.stencil.height - (this.coordinates.current.top + this.coordinates.current.height),
+					right: this.coordinates.stencil.left + this.coordinates.stencil.width - (this.coordinates.current.left + this.coordinates.current.width),
+				}, {
+					compensate: true
+				}),
+				complete
+			})
+			this.coordinates.current = {...coordinates}
+
+		}
+	}
+};
+</script>
+
+<template>
+  <div class="bounding-box-example">
+	  	<div class="playground">
+			<div class="area-wrapper">
+				<div class="area">
+					<BoundingBox
+						class="area-box"
+						handler-component="simple-handler"
+						line-component="simple-line"
+						:style="areaStyle"
+						:lines-classnames="{default: 'line line--area'}"
+						:handlers-classnames="{default: 'handler handler--area'}"
+						@resize="onResizeArea"
+					/>
+					<BoundingBox
+						class="stencil-box"
+						handler-component="simple-handler"
+						line-component="simple-line"
+						:style="stencilStyle"
+						:lines-classnames="{default: 'line line--stencil'}"
+						:handlers-classnames="{default: 'handler handler--stencil'}"
+						@resize="onResizeStencil"
+					/>
+					<div
+						class="current-box"
+						:style="currentStyle"
+					/>
+				</div>
+				<div class="buttons">
+					<div class="button" @click="onResize(false)">
+						<img :src="require('../assets/icons/resize.svg')"/>
+					</div>
+					<div class="button button--complete" @click="onResize(true)">
+						<img :src="require('../assets/icons/resize.svg')"/>
+					</div>
+				</div>
+
+			</div>
+		</div>
+		<div class="options">
+			<div class="option">
+				Stencil props:
+				<textarea class="option__textarea" v-model="stencilProps"/>
+			</div>
+		</div>
+  </div>
+</template>
+
+<style lang="scss">
+	.bounding-box-example {
+		position: relative;
+		padding-top: 20px;
+		.playground {
+			position: relative;
+		}
+		.buttons {
+			position: absolute;
+			right: 20px;
+			bottom: 20px;
+		}
+		.button {
+			background: rgb(61, 82, 206);
+			border-radius: 50%;
+			height: 50px;
+			width: 50px;
+			margin-top: 10px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			&--complete {
+				background: #3fb37f;
+			}
+		}
+		.options {
+			border-top: solid 1px #EEE;
+			padding-top: 20px;
+		}
+		.option {
+			&__textarea {
+				display: block;
+				height: 150px;
+				width: 100%;
+			}
+		}
+		.area-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding-top: 50px;
+			padding-bottom: 50px;
+			overflow: hidden;
+		}
+		.area {
+			width: 400px;
+			height: 400px;
+			position: relative;
+			outline: dashed 1px #EEE;
+		}
+		.current-box {
+			border: solid 1px rgba(255,150,150, 0.8);
+		}
+		.stencil-box, .area-box, .current-box {
+			pointer-events: none;
+			position: absolute;
+		}
+		.line {
+			pointer-events: all;
+			&--stencil {
+				border-color: rgba(#3fb37f, 0.5);
+			}
+			&--area {
+				border-color: rgba(#555, 0.5);
+				border-style: dotted;
+			}
+		}
+		.handler {
+			pointer-events: all;
+			&--stencil {
+				background: #3fb37f;
+			}
+			&--area {
+				background: #555;
+				opacity: 0.5;
+			}
+		}
+	}
+</style>
diff --git a/example/docs/.vuepress/components/home-page.vue b/example/docs/.vuepress/components/home-page.vue
index d46db7ca..2fc89183 100644
--- a/example/docs/.vuepress/components/home-page.vue
+++ b/example/docs/.vuepress/components/home-page.vue
@@ -50,7 +50,7 @@
           <h1 class="presentation__title">
             Advanced Cropper
             <div class="presentation__version">
-              0.13
+              0.14
             </div>
           </h1>
         </div>
diff --git a/example/docs/.vuepress/components/mobile-fixed-example.vue b/example/docs/.vuepress/components/mobile-fixed-example.vue
new file mode 100644
index 00000000..5d081b15
--- /dev/null
+++ b/example/docs/.vuepress/components/mobile-fixed-example.vue
@@ -0,0 +1,34 @@
+<script>
+import { Cropper } from 'vue-advanced-cropper';
+
+export default {
+	components: {
+		Cropper,
+	},
+	data() {
+		return {
+			img: 'https://images.unsplash.com/photo-1527137342181-19aab11a8ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
+		};
+	},
+};
+</script>
+
+<template>
+  <div class='mobile-fixed-example'>
+    <Cropper
+      :src="img"
+      :stencil-props="{
+		  handlers: {},
+		  movable: false,
+		  scalable: false,
+		  aspectRatio: 1,
+      }"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+	.mobile-fixed-example {
+
+	}
+</style>
diff --git a/example/docs/.vuepress/components/set-coordinates-example.vue b/example/docs/.vuepress/components/set-coordinates-example.vue
index 87efe31c..1ee15cbd 100644
--- a/example/docs/.vuepress/components/set-coordinates-example.vue
+++ b/example/docs/.vuepress/components/set-coordinates-example.vue
@@ -59,12 +59,12 @@ export default {
   <div class="set-coordinates-example">
     <Cropper
 	  	ref="cropper"
-			classname="coodinates-cropper"
-			:stencil-props="{
-				minAspectRatio: 10/20,
-			}"
-      :src="image"
-			@change="updateSize"
+		classname="coodinates-cropper"
+      	:src="image"
+	    :stencil-props="{
+			minAspectRatio: 10/20,
+		}"
+		@change="updateSize"
     />
 		<div class="buttons">
 			<div class="button" title="Resize (x2)" @click="resize(2, 2)">
@@ -99,12 +99,10 @@ export default {
 	margin-bottom: 20px;
 	position: relative;
 	user-select: none;
-
 	.coodinates-cropper {
 		min-height: 400px;
 		background: black;
 	}
-
 	.size-info {
 		color: white;
 		position: absolute;
@@ -113,7 +111,6 @@ export default {
 		bottom: 10px;
 		opacity: 0.5;
 	}
-
 	.button {
 		background: rgba(black, 0.4);
 		display: flex;
@@ -128,14 +125,11 @@ export default {
 			background: black;
 		}
 	}
-
-
 	.buttons {
 		position: absolute;
 		left: 10px;
 		top: 50%;
 		transform: translateY(-50%);
 	}
-
 }
 </style>
diff --git a/example/docs/.vuepress/styles/index.styl b/example/docs/.vuepress/styles/index.styl
index 68d1565f..4ce2818c 100644
--- a/example/docs/.vuepress/styles/index.styl
+++ b/example/docs/.vuepress/styles/index.styl
@@ -1,3 +1,7 @@
+.sidebar
+	.repo-link
+		display: none !important;
+
 .navbar
 	background-color: #3fb37f;
 	background-image: url('/vue-advanced-cropper/background.png');
diff --git a/example/docs/introduction/algorithm.md b/example/docs/introduction/algorithm.md
new file mode 100644
index 00000000..80ee6dcf
--- /dev/null
+++ b/example/docs/introduction/algorithm.md
@@ -0,0 +1,4 @@
+# Algorithm
+
+## Tester
+<algorithm-tester/>
diff --git a/example/docs/tutorials/recipes.md b/example/docs/tutorials/recipes.md
index a24928bd..45834165 100644
--- a/example/docs/tutorials/recipes.md
+++ b/example/docs/tutorials/recipes.md
@@ -308,6 +308,38 @@ new Vue({
 </div>
 ```
 
+
+## Fixed stencil
+
+There is the example of a fixed stencil below, that may be useful for mobile devices.
+<mobile-fixed-example></mobile-fixed-example>
+
+```html
+<script>
+import { Cropper } from 'vue-advanced-cropper';
+
+export default {
+	components: {
+		Cropper,
+	},
+};
+</script>
+```
+
+```html
+<div id="app">
+	<Cropper
+		src="https://images.unsplash.com/photo-1527137342181-19aab11a8ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"
+		:stencil-props="{
+		  handlers: {},
+		  movable: false,
+		  scalable: false,
+		  aspectRatio: 1,
+      }"
+	/>
+</div>
+```
+
 ## 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.)
diff --git a/package-lock.json b/package-lock.json
index 2ea83926..b5ffe822 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-advanced-cropper",
-  "version": "0.12.6",
+  "version": "0.13.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -859,16 +859,6 @@
         "regexpu-core": "^4.5.4"
       }
     },
-    "@babel/polyfill": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.6.0.tgz",
-      "integrity": "sha512-q5BZJI0n/B10VaQQvln1IlDK3BTBJFbADx7tv+oXDPIDZuTo37H5Adb9jhlXm/fEN4Y7/64qD9mnrJJG7rmaTw==",
-      "dev": true,
-      "requires": {
-        "core-js": "^2.6.5",
-        "regenerator-runtime": "^0.13.2"
-      }
-    },
     "@babel/preset-env": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.3.4.tgz",
@@ -2882,15 +2872,6 @@
         "object.assign": "^4.1.0"
       }
     },
-    "babel-plugin-external-helpers": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-external-helpers/-/babel-plugin-external-helpers-6.22.0.tgz",
-      "integrity": "sha1-IoX0iwK9Xe3oUXXK+MYuhq3M76E=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.22.0"
-      }
-    },
     "babel-plugin-istanbul": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.4.tgz",
@@ -17601,6 +17582,26 @@
         }
       }
     },
+    "rollup-plugin-uglify": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.3.tgz",
+      "integrity": "sha512-PIv3CfhZJlOG8C85N0GX+uK09TPggmAS6Nk6fpp2ELzDAV5VUhNzOURDU2j7+MwuRr0zq9IZttUTADc/jH8Gkg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "jest-worker": "^24.0.0",
+        "serialize-javascript": "^1.9.0",
+        "uglify-js": "^3.4.9"
+      },
+      "dependencies": {
+        "serialize-javascript": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.9.1.tgz",
+          "integrity": "sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==",
+          "dev": true
+        }
+      }
+    },
     "rollup-plugin-url": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-url/-/rollup-plugin-url-2.2.2.tgz",
@@ -19646,7 +19647,6 @@
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.15.tgz",
       "integrity": "sha512-fe7aYFotptIddkwcm6YuA0HmknBZ52ZzOsUxZEdhhkSsz7RfjHDX2QDxwKTiv4JQ5t5NhfmpgAK+J7LiDhKSqg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "commander": "~2.20.0",
         "source-map": "~0.6.1"
@@ -19656,15 +19656,13 @@
           "version": "2.20.0",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
           "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index 1baadbd4..ac898566 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-advanced-cropper",
-	"version": "0.13.2",
+	"version": "0.14.0",
 	"description": "The advanced library to create your own croppers suited for any website design",
 	"author": "Norserium",
 	"license": "MIT",
diff --git a/rollup.config.js b/rollup.config.js
index e35f03f0..1558a9e2 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -41,7 +41,9 @@ export default {
 			id: 'vue-advanced-cropper'
 		}),
 		url(),
-		minify(),
+		minify({
+			comments: false
+		}),
 		babel({
 			exclude: '/node_modules/**',
 			extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue'],
diff --git a/src/Cropper.vue b/src/Cropper.vue
index bd51dce0..cc745a7d 100644
--- a/src/Cropper.vue
+++ b/src/Cropper.vue
@@ -4,9 +4,11 @@ import bem from 'easy-bem';
 import Vue from 'vue';
 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 } from './core/utils';
 import { arrayBufferToDataURL, getImageTransforms, getStyleTransforms, prepareSource, parseImage } from './core/image';
+import { ALL_DIRECTIONS } from './core/constants';
 import * as algorithms from './core/algorithms';
 
 const cn = bem('vue-advanced-cropper');
@@ -31,6 +33,9 @@ function migrateAlgorithm(f, name, transform) {
 
 export default {
 	name: 'Cropper',
+	components: {
+		CropperWrapper
+	},
 	props: {
 		src: {
 			type: String,
@@ -117,7 +122,23 @@ export default {
 		transitionTime: {
 			type: Number,
 			default: 300
-		}
+		},
+		wheelResize: {
+			type: Boolean,
+			default: true,
+		},
+		touchResize: {
+			type: Boolean,
+			default: true,
+		},
+		touchMove: {
+			type: Boolean,
+			default: true,
+		},
+		mouseMove: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {
@@ -130,7 +151,7 @@ export default {
 				crossOrigin: false,
 				src: null,
 			},
-			imageTransforms: {
+			basicImageTransforms: {
 				rotate: null,
 				scaleX: null,
 				scaleY: null,
@@ -145,13 +166,35 @@ export default {
 				width: 0,
 				height: 0,
 			},
+			stencilCoordinates: {
+				left: 0,
+				top: 0,
+				width: 0,
+				height: 0,
+			},
 			frozenDirections: {
 				width: false,
 				height: false,
 			},
+			worldTransforms: {
+				scale: 1,
+				shift: {
+					left: 0,
+					top: 0
+				}
+			},
 		};
 	},
 	computed: {
+		imageTransforms() {
+			return {
+				...this.basicImageTransforms,
+				scaleX: (this.basicImageTransforms.scaleX || 1) * this.worldTransforms.scale,
+				scaleY: (this.basicImageTransforms.scaleY || 1) * this.worldTransforms.scale,
+				translateX: this.worldTransforms.shift.left / this.coefficient + (this.imageSize.width * this.worldTransforms.scale - this.imageSize.width)/2/this.coefficient,
+				translateY: this.worldTransforms.shift.top / this.coefficient + (this.imageSize.height * this.worldTransforms.scale - this.imageSize.height)/2/this.coefficient,
+			};
+		},
 		coefficient() {
 			return this.imageSize.width
 				? this.imageSize.width / this.boundarySize.width
@@ -164,15 +207,8 @@ export default {
 				area: classnames(cn('area'), this.areaClassname),
 				stretcher: classnames(cn('stretcher')),
 				background: classnames(cn('background'), this.backgroundClassname),
-			};
-		},
-		stencilCoordinates() {
-			const { width, height, left, top, } = this.coordinates;
-			return {
-				width: width / this.coefficient,
-				height: height / this.coefficient,
-				left: left / this.coefficient,
-				top: top / this.coefficient,
+				imageWrapper: classnames(cn('image-wrapper')),
+				cropperWrapper: classnames(cn('cropper-wrapper')),
 			};
 		},
 		wrapperStyle() {
@@ -197,13 +233,11 @@ export default {
 		},
 		imageStyle() {
 			const result = {
-				left: '50%',
-				top: '50%',
+				left: `calc(50% + ${this.imageTransforms.translateX}px)`,
+				top: `calc(50% + ${this.imageTransforms.translateY}px)`,
 				transform: 'translate(-50%, -50%)' + getStyleTransforms(this.imageTransforms),
 			};
-
 			const flipped = this.imageTransforms.flipped;
-
 			if (flipped) {
 				result.width = `${this.boundarySize.height}px`;
 				result.height = `${this.boundarySize.width}px`;
@@ -211,7 +245,6 @@ export default {
 				result.width = `${this.boundarySize.width}px`;
 				result.height = `${this.boundarySize.height}px`;
 			}
-
 			return result;
 		},
 		stencilRestrictions() {
@@ -282,8 +315,8 @@ export default {
 			this.update,
 			this.debounce
 		);
-		window.addEventListener('resize', this.refreshImage);
-		window.addEventListener('orientationchange', this.refreshImage);
+		window.addEventListener('resize', this.onResizeWindow);
+		window.addEventListener('orientationchange', this.onResizeWindow);
 		this.$refs.image.addEventListener('load', () => {
 			// After loading image the current component can be unmounted
 			// Therefore there is a workaround to prevent processing the following code
@@ -319,6 +352,27 @@ export default {
 		getStencil() {
 			return this.$refs.stencil;
 		},
+		autoZoom(coordinates) {
+			const { worldTransforms, stencilCoordinates } = algorithms.autoZoom({
+				coordinates,
+				stencilCoordinates: this.stencilCoordinates,
+				worldTransforms: this.worldTransforms,
+				coefficient: this.coefficient,
+				imageSize: this.imageSize,
+			});
+
+			this.worldTransforms = worldTransforms;
+			this.stencilCoordinates = stencilCoordinates;
+		},
+		updateStencilCoordinates(coordinates) {
+			const { width, height, left, top, } = coordinates;
+			this.stencilCoordinates =  {
+				width: this.worldTransforms.scale * width / this.coefficient,
+				height: this.worldTransforms.scale * height / this.coefficient,
+				left: (left * this.worldTransforms.scale + this.worldTransforms.shift.left) / this.coefficient,
+				top: (top * this.worldTransforms.scale + this.worldTransforms.shift.top) / this.coefficient,
+			};
+		},
 		updateCanvas(coordinates) {
 			// This function can be asynchronously called because it's debounced
 			// Therefore there is workaround to prevent processing after the component was unmounted
@@ -348,6 +402,14 @@ export default {
 		update() {
 			this.$emit('change', this.getResult());
 		},
+		onResizeWindow() {
+			const image = this.$refs.image;
+			if (this.src && image) {
+				this.refreshImage().then(() => {
+					this.updateStencilCoordinates(this.coordinates);
+				});
+			}
+		},
 		onChangeCoordinates(newCoordinates, debounce = true) {
 			this.coordinates = newCoordinates;
 			if (this.$listeners && this.$listeners.change) {
@@ -384,7 +446,7 @@ export default {
 			} else {
 				this.imageAttributes.src = this.src;
 			}
-			this.imageTransforms = getImageTransforms(orientation);
+			this.basicImageTransforms = getImageTransforms(orientation);
 			Vue.nextTick(() => {
 				const image = this.$refs.image;
 				if (image && image.complete) {
@@ -401,26 +463,53 @@ export default {
 				resizeEvent.directions.top = 0;
 				resizeEvent.directions.bottom = 0;
 			}
+			ALL_DIRECTIONS.forEach(direction => {
+				resizeEvent.directions[direction] /= this.worldTransforms.scale / this.coefficient;
+			});
 			this.onChangeCoordinates(
 				this.resizeAlgorithm({
 					coordinates: this.coordinates,
 					restrictions: this.stencilRestrictions,
-					imageSize: this.imageSize,
-					coefficient: this.coefficient,
+					allowedArea: this.allowedArea(),
 					aspectRatio: this.stencilAspectRatios(),
 					resizeEvent
 				})
 			);
+			this.updateStencilCoordinates(this.coordinates);
+		},
+		onManipulateImage(manipulateImageEvent) {
+			if (manipulateImageEvent.move.left) {
+				manipulateImageEvent.move.left *= this.coefficient;
+			}
+			if (manipulateImageEvent.move.top) {
+				manipulateImageEvent.move.top *= this.coefficient;
+			}
+			const { worldTransforms, coordinates } = algorithms.manipulateImage({
+				manipulateImageEvent,
+				coordinates: this.coordinates,
+				coefficient: this.coefficient,
+				stencilRestrictions: this.stencilRestrictions,
+				imageSize: this.imageSize,
+				frozenDirections: this.frozenDirections,
+				stencilCoordinates: this.stencilCoordinates,
+				worldTransforms: this.worldTransforms,
+			});
+			this.worldTransforms = worldTransforms;
+			this.onChangeCoordinates(coordinates);
+			this.updateStencilCoordinates(coordinates);
 		},
 		onMove(moveEvent) {
+			ALL_DIRECTIONS.forEach(direction => {
+				moveEvent.directions[direction] /= this.worldTransforms.scale / this.coefficient;
+			});
 			this.onChangeCoordinates(
 				this.moveAlgorithm({
 					coordinates: this.coordinates,
-					imageSize: this.imageSize,
-					coefficient: this.coefficient,
+					allowedArea: this.allowedArea(),
 					moveEvent
 				})
 			);
+			this.updateStencilCoordinates(this.coordinates);
 		},
 		defaultCoordinates() {
 			const aspectRatio = this.stencilAspectRatios();
@@ -440,7 +529,7 @@ export default {
 					},
 					height: {
 						maximum: aspectRatio.maximum ? Math.min(maxWidth, minHeight * aspectRatio.maximum) : maxWidth,
-						minimum: aspectRatio.mininum ? Math.max(minWidth, minHeight * aspectRatio.mininum) : minWidth,
+						minimum: aspectRatio.minimum ? Math.max(minWidth, minHeight * aspectRatio.minimum) : minWidth,
 					}
 				};
 				if (ranges.width.maximum >= ranges.width.minimum) {
@@ -459,28 +548,32 @@ export default {
 
 			return coordinates;
 		},
-		setCoordinates(transforms) {
+		setCoordinates(transforms, params = {}) {
+			const { autoZoom = true } = params;
 			Vue.nextTick(() => {
 				if (!this.imageLoaded) {
 					this.delayedTransforms = transforms;
 					return;
 				}
-				this.applyTransforms(transforms);
+				this.applyTransforms(transforms, autoZoom);
 			});
 		},
-		applyTransforms(transforms) {
-			const imageSize = this.imageSize;
-			const coefficient = this.coefficient;
+		applyTransforms(transforms, autoZoom = false) {
 			const aspectRatio = this.stencilAspectRatios();
+			const allowedArea = {
+				left: 0,
+				top: 0,
+				right: this.imageSize.width,
+				bottom: this.imageSize.height
+			};
 
 			const moveAlgorithm = (prevCoordinates, newCoordinates) => {
 				return this.moveAlgorithm({
 					coordinates: prevCoordinates,
-					imageSize,
-					coefficient,
+					allowedArea,
 					moveEvent: new MoveEvent(null, {
-						left: (newCoordinates.left - prevCoordinates.left) / coefficient,
-						top: (newCoordinates.top - prevCoordinates.top) / coefficient,
+						left: (newCoordinates.left - prevCoordinates.left),
+						top: (newCoordinates.top - prevCoordinates.top),
 					})
 				});
 			};
@@ -490,16 +583,15 @@ export default {
 				coordinates = this.resizeAlgorithm({
 					coordinates,
 					restrictions: this.stencilRestrictions,
-					imageSize,
-					coefficient,
+					allowedArea,
 					aspectRatio,
 					resizeEvent: new ResizeEvent(
 						null,
 						{
-							left: (newCoordinates.width - coordinates.width) / (2 * coefficient),
-							right: (newCoordinates.width - coordinates.width) / (2 * coefficient),
-							top: (newCoordinates.height - coordinates.height) / (2 * coefficient),
-							bottom: (newCoordinates.height - coordinates.height) / (2 * coefficient),
+							left: (newCoordinates.width - coordinates.width) / 2,
+							right: (newCoordinates.width - coordinates.width) / 2,
+							top: (newCoordinates.height - coordinates.height) / 2,
+							bottom: (newCoordinates.height - coordinates.height) / 2,
 						}
 					)
 				});
@@ -508,7 +600,7 @@ export default {
 
 			let coordinates = this.coordinates;
 
-			if (!transforms.forEach) {
+			if (!Array.isArray(transforms)) {
 				transforms = [transforms];
 			}
 
@@ -527,9 +619,27 @@ export default {
 				}
 			});
 
+			if (autoZoom && this.worldTransforms.scale > 1) {
+				this.autoZoom(coordinates);
+			} else {
+				if (this.worldTransforms.scale > 1) {
+					this.resetWorldTransforms();
+				}
+				this.updateStencilCoordinates(coordinates);
+			}
 			this.onChangeCoordinates(coordinates, false);
+
 			return coordinates;
 		},
+		resetWorldTransforms() {
+			this.worldTransforms = {
+				scale: 1,
+				shift: {
+					left:0,
+					top: 0
+				}
+			};
+		},
 		resetCoordinates() {
 			// This function can be asynchronously called after completion of refreshing image promise
 			// Therefore there is a workaround to prevent processing after the component was unmounted
@@ -551,11 +661,12 @@ export default {
 				imageWidth: this.imageSize.width,
 				imageHeight: this.imageSize.height,
 				props: this.$props,
+				aspectRatio: this.stencilAspectRatios(),
 				...this.stencilRestrictions,
 			});
 
 			if (defaultSize.width < minWidth || defaultSize.height < minHeight || defaultSize.width > maxWidth || defaultSize.height > maxHeight) {
-				console.warn('Warning: default size breaking size restrictions. Check your defaultSize function');
+				console.warn('Warning: default size breaking size restrictions. Check your defaultSize function', defaultSize, this.stencilRestrictions);
 			}
 
 			const transforms = [
@@ -579,6 +690,7 @@ export default {
 				transforms.push(...Array.isArray(this.delayedTransforms) ? this.delayedTransforms : [this.delayedTransforms]);
 			}
 
+			this.resetWorldTransforms();
 			this.applyTransforms(transforms);
 			this.delayedTransforms = null;
 			this.imageLoaded = true;
@@ -598,37 +710,34 @@ export default {
 			}, this.transitionTime);
 		},
 		refreshImage() {
-			if (this.src) {
+			return new Promise((resolve, reject) => {
 				const image = this.$refs.image;
-				const stretcher = this.$refs.stretcher;
-
-				if (this.imageTransforms.flipped) {
-					this.imageSize.height = image.naturalWidth;
-					this.imageSize.width = image.naturalHeight;
-				} else {
-					this.imageSize.height = image.naturalHeight;
-					this.imageSize.width = image.naturalWidth;
-				}
+				const cropper = this.$refs.cropper;
+				if (this.src && image) {
+					const stretcher = this.$refs.stretcher;
+					if (this.imageTransforms.flipped) {
+						this.imageSize.height = image.naturalWidth;
+						this.imageSize.width = image.naturalHeight;
+					} else {
+						this.imageSize.height = image.naturalHeight;
+						this.imageSize.width = image.naturalWidth;
+					}
 
-				const aspectRatio = this.imageSize.width / this.imageSize.height;
+					const aspectRatio = this.imageSize.width / this.imageSize.height;
 
-				if (this.imageSize.height > this.imageSize.width) {
-					stretcher.style.height = `${this.imageSize.height}px`;
-					stretcher.style.width = `${stretcher.clientHeight * aspectRatio}px`;
-					if (stretcher.clientWidth / stretcher.clientHeight !== aspectRatio) {
-						stretcher.style.height = `${stretcher.clientWidth / aspectRatio}px`;
-					}
-				} else {
-					stretcher.style.width = `${this.imageSize.width}px`;
-					stretcher.style.height = `${stretcher.clientWidth / aspectRatio }px`;
-					if (stretcher.clientHeight / stretcher.clientWidth !== aspectRatio) {
+					if (this.imageSize.height > this.imageSize.width) {
+						stretcher.style.height = `${this.imageSize.height}px`;
 						stretcher.style.width = `${stretcher.clientHeight * aspectRatio}px`;
+						if (stretcher.clientWidth / stretcher.clientHeight !== aspectRatio) {
+							stretcher.style.height = `${stretcher.clientWidth / aspectRatio}px`;
+						}
+					} else {
+						stretcher.style.width = `${this.imageSize.width}px`;
+						stretcher.style.height = `${stretcher.clientWidth / aspectRatio }px`;
+						if (stretcher.clientHeight / stretcher.clientWidth !== aspectRatio) {
+							stretcher.style.width = `${stretcher.clientHeight * aspectRatio}px`;
+						}
 					}
-				}
-
-				return new Promise(resolve => {
-					const cropper = this.$refs.cropper;
-					const image = this.$refs.image;
 
 					Vue.nextTick(() => {
 						const { height, width, } = migrateAlgorithm(this.areaSize, 'areaSize', (args) => ([
@@ -647,8 +756,18 @@ export default {
 						}
 						resolve();
 					});
-				});
-			}
+				} else {
+					reject();
+				}
+			});
+		},
+		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,
+			};
 		},
 		stencilAspectRatios() {
 			if (this.$refs.stencil.aspectRatios) {
@@ -677,42 +796,57 @@ export default {
       ref="stretcher"
       :class="classes.stretcher"
     />
+
     <div
       ref="area"
       :class="classes.area"
       :style="areaStyle"
     >
-      <img
-        ref="image"
-        :crossOrigin="imageAttributes.crossOrigin"
-        :src="imageAttributes.src"
-        :class="classes.image"
-        :style="imageStyle"
+      <CropperWrapper
+        :class="classes.cropperWrapper"
+        :wheel-resize="wheelResize"
+        :touch-resize="touchResize"
+        :touch-move="touchMove && worldTransforms.scale > 1"
+        :mouse-move="touchMove && worldTransforms.scale > 1"
+        @move="onManipulateImage"
+        @resize="onManipulateImage"
       >
-      <component
-        :is="stencilComponent"
-        ref="stencil"
-        :img="{
-          src: imageAttributes.src,
-          size: imageSize,
-          transforms: imageTransforms
-        }"
-        :result-coordinates="coordinates"
-        :stencil-coordinates="stencilCoordinates"
-        v-bind="stencilProps"
-        @resize="onResize"
-        @move="onMove"
-      />
-      <canvas
-        v-if="canvas"
-        ref="canvas"
-        :style="{display:'none'}"
-      />
-      <canvas
-        v-if="canvas"
-        ref="sourceCanvas"
-        :style="{display:'none'}"
-      />
+        <div :class="classes.imageWrapper">
+          <img
+            ref="image"
+            :crossOrigin="imageAttributes.crossOrigin"
+            :src="imageAttributes.src"
+            :class="classes.image"
+            :style="imageStyle"
+            @mousedown.prevent
+          >
+        </div>
+        <component
+          :is="stencilComponent"
+          ref="stencil"
+          :img="{
+            src: imageAttributes.src,
+            size: imageSize,
+            transforms: imageTransforms,
+            coefficient: coefficient
+          }"
+          :result-coordinates="coordinates"
+          :stencil-coordinates="stencilCoordinates"
+          v-bind="stencilProps"
+          @resize="onResize"
+          @move="onMove"
+        />
+        <canvas
+          v-if="canvas"
+          ref="canvas"
+          :style="{display:'none'}"
+        />
+        <canvas
+          v-if="canvas"
+          ref="sourceCanvas"
+          :style="{display:'none'}"
+        />
+      </CropperWrapper>
     </div>
   </div>
 </template>
@@ -721,7 +855,6 @@ export default {
 .vue-advanced-cropper {
 	text-align: center;
 	position: relative;
-	overflow: hidden;
 	user-select: none;
 	max-height: 100%;
 	max-width: 100%;
@@ -755,6 +888,16 @@ export default {
 	left: 50%;
 	transform: translate(-50%, -50%);
   }
+  &__cropper-wrapper {
+	width: 100%;
+	height: 100%;
+  }
+  &__image-wrapper {
+	overflow: hidden;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+  }
   &__stencil-wrapper {
 	position: absolute;
   }
diff --git a/src/components/handlers/SimpleHandler.vue b/src/components/handlers/SimpleHandler.vue
index 6dc157e3..e93e66c0 100644
--- a/src/components/handlers/SimpleHandler.vue
+++ b/src/components/handlers/SimpleHandler.vue
@@ -23,6 +23,10 @@ export default {
 		verticalPosition: {
 			type: String,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		}
 	},
 	computed: {
 		classnames() {
@@ -53,6 +57,7 @@ export default {
   <HandlerWrapper
     :vertical-position="verticalPosition"
     :horizontal-position="horizontalPosition"
+    :disabled="disabled"
     @drag="onDrag"
   >
     <div :class="classnames.default" />
diff --git a/src/components/lines/SimpleLine.vue b/src/components/lines/SimpleLine.vue
index 82bb8d60..72ec568d 100644
--- a/src/components/lines/SimpleLine.vue
+++ b/src/components/lines/SimpleLine.vue
@@ -20,6 +20,10 @@ export default {
 		position: {
 			type: String,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -30,7 +34,7 @@ export default {
 		classnames() {
 			return {
 				default: classnames(
-					cn({ [this.position]: true, }),
+					cn({ [this.position]: true }),
 					this.classname,
 					this.hover && this.hoverClassname
 				),
@@ -54,6 +58,7 @@ export default {
 <template>
   <LineWrapper
     :position="position"
+    :disabled="disabled"
     @enter="onEnter"
     @leave="onLeave"
     @drag="onDrag"
diff --git a/src/components/service/BoundingBox.vue b/src/components/service/BoundingBox.vue
index 7370a697..bbfa82a4 100644
--- a/src/components/service/BoundingBox.vue
+++ b/src/components/service/BoundingBox.vue
@@ -59,6 +59,10 @@ export default {
 				return {};
 			},
 		},
+		scalable: {
+			type: Boolean,
+			default: true
+		}
 	},
 	data() {
 		const points = [];
@@ -102,11 +106,13 @@ export default {
 						component: this.lineComponent,
 						classname: classnames(
 							this.classnames.lines.default,
-							this.classnames.lines[point.name]
+							this.classnames.lines[point.name],
+							!this.scalable && this.classnames.lines.disabled
 						),
 						hoverClassname: this.classnames.lines.hover,
 						verticalDirection: point.verticalDirection,
 						horizontalDirection: point.horizontalDirection,
+						disabled: !this.scalable
 					});
 				}
 			});
@@ -126,6 +132,7 @@ export default {
 						hoverClassname: this.classnames.handlers.hover,
 						verticalDirection: point.verticalDirection,
 						horizontalDirection: point.horizontalDirection,
+						disabled: !this.scalable
 					});
 				}
 			});
@@ -177,20 +184,22 @@ export default {
 				respectDirection = 'height';
 			}
 
-			this.$emit('resize', new ResizeEvent(
-				dragEvent.nativeEvent,
-				directions,
-				{
-					allowedDirections: {
-						left: horizontalDirection === 'west' || !horizontalDirection,
-						right: horizontalDirection === 'east' || !horizontalDirection,
-						bottom: verticalDirection === 'south' || !verticalDirection,
-						top: verticalDirection === 'north' || !verticalDirection,
-					},
-					preserveAspectRatio: dragEvent.nativeEvent.shiftKey,
-					respectDirection,
-				}
-			));
+			if (this.scalable) {
+				this.$emit('resize', new ResizeEvent(
+					dragEvent.nativeEvent,
+					directions,
+					{
+						allowedDirections: {
+							left: horizontalDirection === 'west' || !horizontalDirection,
+							right: horizontalDirection === 'east' || !horizontalDirection,
+							bottom: verticalDirection === 'south' || !verticalDirection,
+							top: verticalDirection === 'north' || !verticalDirection,
+						},
+						preserveAspectRatio: dragEvent.nativeEvent.shiftKey,
+						respectDirection,
+					}
+				));
+			}
 		},
 	},
 };
@@ -210,6 +219,7 @@ export default {
         :classname="line.classname"
         :hover-classname="line.hoverClassname"
         :position="line.name"
+        :disabled="line.disabled"
         @drag="onHandlerDrag($event, line.horizontalDirection, line.verticalDirection)"
       />
     </div>
@@ -222,6 +232,7 @@ export default {
         :hover-classname="handler.hoverClassname"
         :horizontal-position="handler.horizontalDirection"
         :vertical-position="handler.verticalDirection"
+        :disabled="handler.disabled"
         @drag="onHandlerDrag($event, handler.horizontalDirection, handler.verticalDirection)"
       />
     </div>
@@ -233,30 +244,5 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
-  &__line {
-    position: absolute;
-    &--north {
-      top: 0;
-      width: 100%;
-      cursor: n-resize;
-    }
-    &--east {
-      left: 100%;
-      top: 0;
-      height: 100%;
-      cursor: e-resize;
-    }
-    &--south {
-      top: 100%;
-      width: 100%;
-      cursor: s-resize;
-    }
-    &--west {
-      left: 0;
-      top: 0;
-      height: 100%;
-      cursor: w-resize;
-    }
-  }
 }
 </style>
diff --git a/src/components/service/CropperWrapper.vue b/src/components/service/CropperWrapper.vue
new file mode 100644
index 00000000..7b5f5c49
--- /dev/null
+++ b/src/components/service/CropperWrapper.vue
@@ -0,0 +1,192 @@
+<script>
+import { ManipulateImageEvent } from '../../core/events.js';
+import { distance } from '../../core/utils.js';
+
+export default {
+	name: 'CropperWrapper',
+	props: {
+		touchMove: {
+			type: Boolean,
+		},
+		mouseMove: {
+			type: Boolean,
+		},
+		touchResize: {
+			type: Boolean,
+		},
+		wheelResize: {
+			type: Boolean,
+		},
+		wheelZoomRatio: {
+			type: Number,
+			default: 0.1,
+		},
+	},
+	beforeMount() {
+		window.addEventListener('mouseup', this.onMouseUp, { passive: false, });
+		window.addEventListener('mousemove', this.onMouseMove, { passive: false, });
+		window.addEventListener('touchmove', this.onTouchMove, { passive: false, });
+		window.addEventListener('touchend', this.onTouchEnd, { passive: false, });
+	},
+	beforeDestroy() {
+		window.removeEventListener('mouseup', this.onMouseUp);
+		window.removeEventListener('mousemove', this.onMouseMove);
+		window.removeEventListener('touchmove', this.onTouchMove);
+		window.removeEventListener('touchend', this.onTouchEnd);
+	},
+	mounted() {
+		this.touches = [];
+		this.draggingAnchor = [];
+	},
+	methods: {
+		onTouchStart(e) {
+			if (e.cancelable && (this.touchMove || (this.touchResize && e.touches.length > 1))) {
+				const container = this.$refs.container;
+				const { left, top, bottom, right } = container.getBoundingClientRect();
+				this.touches = [...e.touches].filter(touch => (
+					touch.clientX > left && touch.clientX < right && touch.clientY > top && touch.clientY < bottom
+				));
+				this.oldGeometricProperties = this.calculateGeometricProperties(this.touches);
+
+				if (e.preventDefault) {
+					e.preventDefault();
+				}
+				e.stopPropagation();
+			}
+		},
+		onTouchEnd(e) {
+			if (e.touches.length === 0) {
+				this.processEnd();
+			}
+		},
+		onTouchMove(e) {
+			if (this.touches.length) {
+				const touches = [...e.touches].filter(touch => !touch.identifier || this.touches.find(
+					anotherTouch => anotherTouch.identifier === touch.identifier
+				));
+				this.processMove(e, touches);
+				if (e.preventDefault) {
+					e.preventDefault();
+				}
+				if (e.stopPropagation) {
+					e.stopPropagation();
+				}
+			}
+		},
+		onMouseDown(e) {
+			if (this.mouseMove && ('buttons' in e) && e.buttons === 1) {
+				const touch = {
+					fake: true,
+					clientX: e.clientX,
+					clientY: e.clientY,
+				};
+				this.touches = [touch];
+				this.initAnchor(touch);
+				e.stopPropagation();
+			}
+		},
+		onMouseMove(e) {
+			if (this.touches.length) {
+				this.processMove(e, [{
+					fake: true,
+					clientX: e.clientX,
+					clientY: e.clientY,
+				}]);
+				if (e.preventDefault  && e.cancelable) {
+					e.preventDefault();
+				}
+			}
+		},
+		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 };
+			let spread = 0;
+
+			touches.forEach(touch => {
+				centerMass.left += (touch.clientX - left) / touches.length;
+				centerMass.top += (touch.clientY - top) / touches.length;
+			});
+
+			touches.forEach((touch) => {
+				spread += distance({ x: centerMass.left, y: centerMass.top }, { x: touch.clientX - left, y: touch.clientY - top });
+			});
+
+			return { centerMass, spread, count: touches.length };
+		},
+		processMove(event, newTouches) {
+			if (this.touches.length) {
+				if (this.touches.length === 1 && newTouches.length === 1 && this.touchMove) {
+					this.$emit('move', new ManipulateImageEvent(event, {
+						left: (newTouches[0].clientX - this.touches[0].clientX),
+						top: (newTouches[0].clientY - this.touches[0].clientY),
+					}));
+				} else if (this.touches.length > 1 && this.touchResize) {
+					const oldProperties = this.oldGeometricProperties;
+					const newProperties = this.calculateGeometricProperties(newTouches);
+
+					if (oldProperties.count === newProperties.count && oldProperties.count > 1) {
+						this.$emit('resize', new ManipulateImageEvent(
+							event,
+							{
+								left: newProperties.centerMass.left - oldProperties.centerMass.left,
+								top: newProperties.centerMass.top - oldProperties.centerMass.top,
+							},
+							{
+								factor: oldProperties.spread / newProperties.spread,
+								center: newProperties.centerMass,
+							}
+						));
+					}
+					this.oldGeometricProperties = newProperties;
+				}
+				this.touches = newTouches;
+			}
+		},
+		processEnd() {
+			this.touches = [];
+		},
+		onWheel(event) {
+			if (this.wheelResize) {
+				const container = this.$refs.container;
+				const { left, top } = container.getBoundingClientRect();
+				const factor = 1 + this.wheelZoomRatio * Math.sign(event.deltaY || event.detail || event.wheelDelta);
+				const center = {
+					left: (event.clientX - left),
+					top: (event.clientY - top),
+				};
+
+				this.$emit('resize', new ManipulateImageEvent(event, {}, { factor, center }));
+
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		}
+	},
+
+};
+</script>
+
+<template>
+  <div
+    ref="container"
+    @touchstart="onTouchStart"
+    @mousedown="onMouseDown"
+    @wheel="onWheel"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/service/DraggableArea.vue b/src/components/service/DraggableArea.vue
index 64561069..c2291b19 100644
--- a/src/components/service/DraggableArea.vue
+++ b/src/components/service/DraggableArea.vue
@@ -1,13 +1,23 @@
 <script>
 import classnames from 'classnames';
 import bem from 'easy-bem';
-
-import { ResizeEvent, MoveEvent } from '../../core/events.js';
+import { distance } from '../../core/utils';
+import { MoveEvent } from '../../core/events.js';
 
 const cn = bem('vue-draggable-area');
 
 export default {
 	name: 'DraggableArea',
+	props: {
+		movable: {
+			type: Boolean,
+			default: true,
+		},
+		activationDistance: {
+			type: Number,
+			default: 10,
+		}
+	},
 	computed: {
 		classnames() {
 			return {
@@ -29,50 +39,51 @@ export default {
 	},
 	mounted() {
 		this.touches = [];
-		this.draggingAnchor = [];
+		this.touchStarted = false;
 	},
 	methods: {
 		onTouchStart(e) {
 			if (e.cancelable) {
-				this.touches = [...e.touches];
-
-				if (e.touches.length) {
-					this.initAnchor(this.touches.reduce((mean, touch) => {
-						return {
-							clientX: mean.clientX + touch.clientX / e.touches.length,
-							clientY: mean.clientY + touch.clientY / e.touches.length,
-						};
-					}, { clientX: 0, clientY: 0, }));
+				const shouldStartMove = this.movable && e.touches.length === 1;
+				if (shouldStartMove) {
+					this.touches = [...e.touches];
 				}
-				if (e.preventDefault) {
+				if (this.touchStarted || shouldStartMove) {
 					e.preventDefault();
+					e.stopPropagation();
 				}
-				e.stopPropagation();
 			}
 		},
 		onTouchEnd() {
+			this.touchStarted = false;
 			this.processEnd();
 		},
 		onTouchMove(e) {
-			if (this.touches.length) {
-				this.processMove(e, e.touches);
-				if (e.preventDefault) {
+			if (this.touches.length >= 1) {
+				if (this.touchStarted) {
+					this.processMove(e, e.touches);
 					e.preventDefault();
-				}
-				if (e.stopPropagation) {
 					e.stopPropagation();
+				} else if (distance({ x: this.touches[0].clientX, y: this.touches[0].clientY }, { x: e.touches[0].clientX, y: e.touches[0].clientY }) > this.activationDistance) {
+					this.initAnchor({
+						clientX: e.touches[0].clientX,
+						clientY: e.touches[0].clientY,
+					});
+					this.touchStarted = true;
 				}
 			}
 		},
 		onMouseDown(e) {
-			const touch = {
-				fake: true,
-				clientX: e.clientX,
-				clientY: e.clientY,
-			};
-			this.touches = [touch];
-			this.initAnchor(touch);
-			e.stopPropagation();
+			if (this.movable) {
+				const touch = {
+					fake: true,
+					clientX: e.clientX,
+					clientY: e.clientY,
+				};
+				this.touches = [touch];
+				this.initAnchor(touch);
+				e.stopPropagation();
+			}
 		},
 		onMouseMove(e) {
 			if (this.touches.length) {
@@ -84,6 +95,7 @@ export default {
 				if (e.preventDefault  && e.cancelable) {
 					e.preventDefault();
 				}
+				e.stopPropagation();
 			}
 		},
 		onMouseUp() {
@@ -102,58 +114,13 @@ export default {
 			const newTouches = [...touches];
 			if (this.touches.length) {
 				const container = this.$refs.container;
-
 				const { left, top, } = container.getBoundingClientRect();
-
 				if (this.touches.length === 1 && newTouches.length === 1) {
 					this.$emit('move', new MoveEvent(event, {
 						left: (newTouches[0].clientX - left - this.anchor.x),
 						top: (newTouches[0].clientY - top - this.anchor.y),
 					}));
-				} else if (this.touches.length > 1 && this.touches.length === newTouches.length) {
-					const vectors = newTouches.map((touch, index) => ({
-						x: touch.clientX - this.touches[index].clientX,
-						y: touch.clientY - this.touches[index].clientY,
-						position: {
-							clientX: touch.clientX,
-							clientY: touch.clientY,
-						},
-						length: Math.sqrt(
-							Math.pow(touch.clientX - this.touches[index].clientX, 2) + Math.pow(touch.clientY - this.touches[index].clientY, 2)
-						),
-					}));
-
-					const summaryShift = vectors.reduce((shift, vector) => shift + vector.length, 0);
-
-					const massPoint = {
-						left: vectors.reduce((value, vector, index) => value + (1 - vector.length / summaryShift) * newTouches[index].clientX, 0),
-						top: vectors.reduce((value, vector, index) => value + (1 - vector.length / summaryShift) * newTouches[index].clientY, 0),
-					};
-
-					let directions = {
-						top: 0,
-						bottom: 0,
-						left: 0,
-						right: 0,
-					};
-
-					vectors.forEach((vector, index) => {
-						if (vector.length / summaryShift > 0.25) {
-							if (newTouches[index].clientY > massPoint.top) {
-								directions.bottom += vector.y;
-							} else {
-								directions.top -= vector.y;
-							}
-							if (newTouches[index].clientX > massPoint.left) {
-								directions.right += vector.x;
-							} else {
-								directions.left -= vector.x;
-							}
-						}
-					});
-					this.$emit('resize', new ResizeEvent(event, directions));
 				}
-				this.touches = newTouches;
 			}
 		},
 		processEnd() {
diff --git a/src/components/service/HandlerWrapper.vue b/src/components/service/HandlerWrapper.vue
index 9d623073..3df33888 100644
--- a/src/components/service/HandlerWrapper.vue
+++ b/src/components/service/HandlerWrapper.vue
@@ -21,6 +21,10 @@ export default {
 		classname: {
 			type: String,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		}
 	},
 	computed: {
 		classnames() {
@@ -30,9 +34,9 @@ export default {
 					this.horizontalPosition,
 					this.verticalPosition
 				);
-				defaultClassname = classnames(this.classname, cn({ [position.classname]: true, }));
+				defaultClassname = classnames(this.classname, cn({ [position.classname]: true, disabled: this.disabled }));
 			} else {
-				defaultClassname = classnames(this.classname, cn());
+				defaultClassname = classnames(this.classname, cn({ disabled: this.disabled }));
 			}
 			return {
 				default: defaultClassname,
@@ -47,6 +51,7 @@ export default {
   <div :class="classnames.default">
     <DraggableElement
       :class="classnames.draggable"
+      :disabled="disabled"
       @drag="$emit('drag', $event)"
       @leave="$emit('leave')"
       @enter="$emit('enter')"
@@ -107,5 +112,8 @@ export default {
     top: 50%;
     cursor: w-resize;
   }
+  &--disabled {
+    cursor: auto;
+  }
 }
 </style>
diff --git a/src/components/service/LineWrapper.vue b/src/components/service/LineWrapper.vue
index 975cd277..8f6418c7 100644
--- a/src/components/service/LineWrapper.vue
+++ b/src/components/service/LineWrapper.vue
@@ -14,10 +14,14 @@ export default {
 			type: String,
 			required: true,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		classname() {
-			return cn({ [this.position]: true, });
+			return cn({ [this.position]: true, disabled: this.disabled });
 		},
 	},
 };
@@ -26,6 +30,7 @@ export default {
 <template>
   <DraggableElement
     :class="classname"
+    :disabled="disabled"
     @drag="$emit('drag', $event)"
     @leave="$emit('leave')"
     @enter="$emit('enter')"
@@ -73,5 +78,8 @@ export default {
     left: 0;
     cursor: w-resize;
   }
+  &--disabled {
+    cursor: auto;
+  }
 }
 </style>
diff --git a/src/components/service/PreviewResult.vue b/src/components/service/PreviewResult.vue
index b17c8ae1..a4400403 100644
--- a/src/components/service/PreviewResult.vue
+++ b/src/components/service/PreviewResult.vue
@@ -60,25 +60,26 @@ export default {
 			const imageTransforms = this.img.transforms;
 			const imageWidth = this.img.size.width;
 			const imageHeight = this.img.size.height;
-			const coefficient = this.stencilCoordinates.height / this.resultCoordinates.height;
-			const height = imageHeight * coefficient;
-			const width = imageWidth * coefficient;
+			const coefficient = this.img.coefficient;
+			const height = imageHeight / coefficient;
+			const width = imageWidth / coefficient;
 			const flipped = imageTransforms.flipped;
 
 			const result = {
 				width: `${width}px`,
 				height: `${height}px`,
 			};
+
 			if (flipped) {
 				result.width = `${height}px`;
 				result.height = `${width}px`;
-				result.left = `${-this.stencilCoordinates.left - (height - width)/2}px`;
-				result.top = `${-this.stencilCoordinates.top - (width - height)/2}px`;
+				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}px`;
-				result.top = `${-this.stencilCoordinates.top}px`;
+				result.left = `${-this.stencilCoordinates.left + imageTransforms.translateX}px`;
+				result.top = `${-this.stencilCoordinates.top + imageTransforms.translateY}px`;
 			}
 			result.transform = getStyleTransforms(imageTransforms);
 			return result;
diff --git a/src/components/service/index.js b/src/components/service/index.js
index b6dbe01a..8656756b 100644
--- a/src/components/service/index.js
+++ b/src/components/service/index.js
@@ -4,3 +4,4 @@ export { default as BoundingBox } from './BoundingBox.vue';
 export { default as DraggableArea } from './DraggableArea.vue';
 export { default as PreviewResult } from './PreviewResult.vue';
 export { default as DraggableElement } from './DraggableElement.vue';
+export { default as CropperWrapper } from './CropperWrapper.vue';
diff --git a/src/components/stencils/RectangleStencil.vue b/src/components/stencils/RectangleStencil.vue
index 672f2519..e7316770 100644
--- a/src/components/stencils/RectangleStencil.vue
+++ b/src/components/stencils/RectangleStencil.vue
@@ -72,11 +72,19 @@ export default {
 		maxAspectRatio: {
 			type: [Number, String],
 		},
+		movable: {
+			type: Boolean,
+			default: true,
+		},
+		scalable: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	computed: {
 		classes() {
 			return {
-				stencil: classnames(cn(), this.classname),
+				stencil: classnames(cn({ movable: this.movable }), this.classname),
 				preview: classnames(cn('preview'), this.previewClassname),
 				boundingBox: classnames(cn('bounding-box'), this.boundingBoxClassname),
 			};
@@ -121,9 +129,13 @@ export default {
       :lines="lines"
       :line-component="lineComponent"
       :lines-classnames="linesClassnames"
+      :scalable="scalable"
       @resize="onResize"
     >
-      <DraggableArea @move="onMove">
+      <DraggableArea
+        :movable="movable"
+        @move="onMove"
+      >
         <PreviewResult
           :img="img"
           :classname="classes.preview"
@@ -141,6 +153,8 @@ export default {
   height: 100%;
   width: 100%;
   box-sizing: border-box;
-  cursor: move;
+  &--movable {
+    cursor: move;
+  }
 }
 </style>
diff --git a/src/core/algorithms.js b/src/core/algorithms.js
index 393a8277..c35dfa4f 100644
--- a/src/core/algorithms.js
+++ b/src/core/algorithms.js
@@ -1,148 +1,153 @@
 import {
 	HORIZONTAL_DIRECTIONS,
 	VERTICAL_DIRECTIONS,
-	ALL_DIRECTIONS
+	ALL_DIRECTIONS,
 } from './constants';
+import { MoveEvent } from './events';
 
 
-function getCurrentWidth(actualCoordinates, directions, coefficient) {
-	return actualCoordinates.width + coefficient * (directions.left + directions.right);
+function getCurrentWidth(actualCoordinates, directions) {
+	return actualCoordinates.width + (directions.left + directions.right);
 }
 
-function getCurrentHeight(actualCoordinates, directions, coefficient) {
-	return actualCoordinates.height + coefficient * (directions.top + directions.bottom);
+function getCurrentHeight(actualCoordinates, directions) {
+	return actualCoordinates.height + (directions.top + directions.bottom);
 }
 
-function fitConditions(oldDirections, coordinates, restrictions, coefficient, imageSize, ratioBroken) {
+function getBrokenLimits(coordinates, directions, allowedArea) {
+	return {
+		left: ('left' in allowedArea) ? -Math.min(0, Math.ceil(coordinates.left - allowedArea.left) - directions.left) : 0,
+		top: ('top' in allowedArea) ? -Math.min(0, Math.ceil(coordinates.top - allowedArea.top) - directions.top) : 0,
+		bottom: ('bottom' in allowedArea) ? -Math.min(0, allowedArea.bottom - (coordinates.bottom + directions.bottom)) : 0,
+		right: ('right' in allowedArea) ? -Math.min(0, allowedArea.right - (coordinates.right + directions.right)) : 0,
+	};
+}
 
-	const { minHeight, minWidth, maxHeight, maxWidth, } = restrictions;
+function fitConditions({ directions: oldDirections, coordinates, restrictions, preserveAspectRatio, stopOnBreak, mode = 'crop', allowedArea = {}}) {
 	const directions = { ...oldDirections, };
 
-	const currentWidth = getCurrentWidth(coordinates, directions, coefficient);
-	const currentHeight = getCurrentHeight(coordinates, directions, coefficient);
+
+	let currentWidth = getCurrentWidth(coordinates, directions);
+	let currentHeight = getCurrentHeight(coordinates, directions);
 
 	if (currentWidth < 0) {
 		if (directions.left < 0 && directions.right < 0) {
-			directions.left = -(coordinates.width - minWidth) / (directions.left / directions.right);
-			directions.right = -(coordinates.width - minWidth) / (directions.right / directions.left);
+			directions.left = -(coordinates.width - restrictions.minWidth) / (directions.left / directions.right);
+			directions.right = -(coordinates.width - restrictions.minWidth) / (directions.right / directions.left);
 		} else if (directions.left < 0) {
-			directions.left = -(coordinates.width - minWidth) / coefficient;
+			directions.left = -(coordinates.width - restrictions.minWidth);
 		} else if (directions.right < 0) {
-			directions.right = -(coordinates.width - minWidth) / coefficient;
+			directions.right = -(coordinates.width - restrictions.minWidth);
 		}
 	}
 
 	if (currentHeight < 0) {
 		if (directions.top < 0 && directions.bottom < 0) {
-			directions.top = -(coordinates.height - minHeight) / (directions.top / directions.bottom);
-			directions.bottom = -(coordinates.height - minHeight) / (directions.bottom / directions.top);
+			directions.top = -(coordinates.height - restrictions.minHeight) / (directions.top / directions.bottom);
+			directions.bottom = -(coordinates.height - restrictions.minHeight) / (directions.bottom / directions.top);
 		} else if (directions.top < 0) {
-			directions.top = -(coordinates.height - minHeight);
+			directions.top = -(coordinates.height - restrictions.minHeight);
 		} else if (directions.bottom < 0) {
-			directions.bottom = -(coordinates.height - minHeight);
+			directions.bottom = -(coordinates.height - restrictions.minHeight);
 		}
 	}
 
-	const maxMultiplier = {
-		width: Infinity,
-		height: Infinity,
-	};
+	let breaks = getBrokenLimits(coordinates, directions, allowedArea);
 
-	if (directions.right + directions.left) {
-		// Break right border
-		if (Math.ceil(coordinates.left + coordinates.width + coefficient * directions.right) > imageSize.width) {
-			maxMultiplier.width = Math.min(
-				maxMultiplier.width,
-				Math.abs(Math.floor(imageSize.width - (coordinates.left + coordinates.width)) / (coefficient * directions.right))
-			);
-		}
-		// Break left border
-		if (coordinates.left - coefficient * directions.left < 0) {
-			maxMultiplier.width = Math.min(
-				maxMultiplier.width,
-				Math.abs((coordinates.left) / (coefficient * directions.left))
-			);
-		}
 
-		// Break min width
-		if (currentWidth < minWidth) {
-			maxMultiplier.width = Math.min(
-				maxMultiplier.width,
-				Math.abs((coordinates.width - minWidth) / ((directions.right + directions.left) * coefficient))
-			);
+	if (mode === 'move') {
+		if (breaks.left > 0 && breaks.right === 0) {
+			directions.right += breaks.left;
+			directions.left -= breaks.left;
+		} else if (breaks.right > 0 && breaks.left === 0) {
+			directions.left += breaks.right;
+			directions.right -= breaks.right;
 		}
-		// Break max width
-		if (currentWidth > maxWidth) {
-			maxMultiplier.width = Math.min(
-				maxMultiplier.width,
-				Math.abs((maxWidth - coordinates.width) / ((directions.right + directions.left) * coefficient))
-			);
+
+		if (breaks.top > 0 && breaks.bottom === 0) {
+			directions.bottom += breaks.top;
+			directions.top -= breaks.top;
+		} else if (breaks.bottom > 0 && breaks.top === 0) {
+			directions.top += breaks.bottom;
+			directions.bottom -= breaks.bottom;
 		}
+
+		breaks = getBrokenLimits(coordinates, directions, allowedArea);
 	}
 
-	if (directions.top + directions.bottom) {
-		// Break bottom border
-		if (Math.ceil(coordinates.top + coordinates.height + coefficient * directions.bottom) > imageSize.height) {
-			maxMultiplier.height = Math.min(
-				maxMultiplier.height,
-				Math.abs(Math.floor(imageSize.height - (coordinates.top + coordinates.height)) / (coefficient * directions.bottom))
-			);
-		}
-		// Break top border
-		if (coordinates.top - coefficient * directions.top < 0) {
-			maxMultiplier.height = Math.min(
-				maxMultiplier.height,
-				Math.abs((coordinates.top) / (coefficient * directions.top))
-			);
-		}
-		// Break min height
-		if (currentHeight < minHeight) {
-			maxMultiplier.height = Math.min(
-				maxMultiplier.height,
-				Math.abs((coordinates.height - minHeight) / ((directions.top + directions.bottom) * coefficient))
-			);
+	const maxResize = {
+		width: Infinity,
+		height: Infinity
+	};
+
+	ALL_DIRECTIONS.forEach(direction => {
+		if (breaks[direction] && directions[direction]) {
+			maxResize[direction] = Math.max(0, 1 - breaks[direction] / (directions[direction]));
+		} else {
+			maxResize[direction] = Infinity;
 		}
-		// Break max height
-		if (currentHeight > maxHeight) {
-			maxMultiplier.height = Math.min(
-				maxMultiplier.height,
-				Math.abs((maxHeight - coordinates.height) / ((directions.top + directions.bottom) * coefficient))
-			);
+	});
+
+
+
+	if (preserveAspectRatio) {
+		const multiplier = Math.min(...ALL_DIRECTIONS.map(direction => maxResize[direction]));
+		if (multiplier !== Infinity) {
+			ALL_DIRECTIONS.forEach(direction => {
+				directions[direction] *= multiplier;
+			});
 		}
+	} else {
+		HORIZONTAL_DIRECTIONS.forEach(direction => {
+			const multiplier = stopOnBreak ? Math.min(maxResize.top, maxResize.bottom) : maxResize[direction];
+			if (multiplier !== Infinity) {
+				directions[direction] *= multiplier;
+			}
+		});
+		VERTICAL_DIRECTIONS.forEach(direction => {
+			const multiplier = stopOnBreak ? Math.min(maxResize.top, maxResize.bottom) : maxResize[direction];
+			if (multiplier !== Infinity) {
+				directions[direction] *= multiplier;
+			}
+		});
 	}
 
-	// Prevent the incorrect resizing due  small values of max multipliers:
-	if (maxMultiplier.width < 10**(-1)) {
-		maxMultiplier.width = 0;
+	currentWidth = getCurrentWidth(coordinates, directions);
+	currentHeight = getCurrentHeight(coordinates, directions);
+
+	if (directions.right + directions.left) {
+		if (currentWidth > restrictions.maxWidth) {
+			maxResize.width = (restrictions.maxWidth - coordinates.width) / (directions.right + directions.left);
+		} else if (currentWidth < restrictions.minWidth) {
+			maxResize.width = (restrictions.minWidth - coordinates.width) / (directions.right + directions.left);
+		}
 	}
-	if (maxMultiplier.height < 10**(-1)) {
-		maxMultiplier.height = 0;
+
+	if (directions.bottom + directions.top) {
+		if (currentHeight > restrictions.maxHeight) {
+			maxResize.height = (restrictions.maxHeight - coordinates.height) / (directions.bottom + directions.top);
+		} else if (currentHeight < restrictions.minHeight) {
+			maxResize.height = (restrictions.minHeight - coordinates.height) / (directions.bottom + directions.top);
+		}
 	}
 
-	// If ratio is not broken, resize all directions independently
-	if (!ratioBroken) {
-		if (maxMultiplier.width !== Infinity) {
-			HORIZONTAL_DIRECTIONS.forEach(direction => {
-				directions[direction] *= maxMultiplier.width;
+	if (preserveAspectRatio) {
+		const multiplier = Math.min(maxResize.width, maxResize.height);
+		if (multiplier !== Infinity) {
+			ALL_DIRECTIONS.forEach(direction => {
+				directions[direction] *= multiplier;
 			});
 		}
-		if (maxMultiplier.height !== Infinity) {
-			VERTICAL_DIRECTIONS.forEach(direction => {
-				directions[direction] *= maxMultiplier.height;
+	}
+	else {
+		if (maxResize.width !== Infinity) {
+			HORIZONTAL_DIRECTIONS.forEach(direction => {
+				directions[direction] *= maxResize.width;
 			});
 		}
-	// If ratio is broken, resize all directions same time to preserve restored aspect ratio
-	} else {
-		let multiplier;
-		if (maxMultiplier.height < maxMultiplier.width) {
-			multiplier = maxMultiplier.height;
-		} else if (directions.right + directions.left) {
-			multiplier = maxMultiplier.width;
-		}
-
-		if (maxMultiplier.height !== Infinity || maxMultiplier.width !== Infinity) {
-			ALL_DIRECTIONS.forEach(direction => {
-				directions[direction] *= multiplier;
+		if (maxResize.height !== Infinity) {
+			VERTICAL_DIRECTIONS.forEach(direction => {
+				directions[direction] *= maxResize.height;
 			});
 		}
 	}
@@ -150,7 +155,21 @@ function fitConditions(oldDirections, coordinates, restrictions, coefficient, im
 	return directions;
 }
 
-export function resize ({ coordinates, restrictions, imageSize, coefficient, aspectRatio, resizeEvent }) {
+
+
+function getBrokenRatio(currentWidth, currentHeight, aspectRatio, actualCoordinates, preserveAspectRatio) {
+	let ratioBroken;
+	if (aspectRatio.minimum && currentWidth / currentHeight < aspectRatio.minimum) {
+		ratioBroken = aspectRatio.minimum;
+	} else if (aspectRatio.maximum && currentWidth / currentHeight > aspectRatio.maximum) {
+		ratioBroken = aspectRatio.maximum;
+	} else if (preserveAspectRatio) {
+		ratioBroken = actualCoordinates.width / actualCoordinates.height;
+	}
+	return ratioBroken;
+}
+
+export function resize ({ coordinates, restrictions, allowedArea, aspectRatio, resizeEvent }) {
 	const actualCoordinates = {
 		...coordinates,
 		right: coordinates.left + coordinates.width,
@@ -170,51 +189,41 @@ export function resize ({ coordinates, restrictions, imageSize, coefficient, asp
 		top: true,
 	};
 
-	Object.keys(allowedDirections).forEach(direction => {
+	ALL_DIRECTIONS.forEach(direction => {
 		if (!allowedDirections[direction]) {
 			directions[direction] = 0;
 		}
 	});
 
-	let currentWidth = getCurrentWidth(actualCoordinates, directions, coefficient);
-	let currentHeight = getCurrentHeight(actualCoordinates, directions, coefficient);
-
-	// 1. First step: fit desired box to existing limits to prevent unpredictable behaviour during aspect ratio fixing
-	directions = fitConditions(directions, actualCoordinates, restrictions, coefficient, imageSize);
+	// 1. First step: determine the safe and desired area
+	directions = fitConditions({ directions, restrictions, coordinates: actualCoordinates, allowedArea, stopOnBreak: params.stopOnBreak });
 
 	// 2. Second step: fix desired box to correspondent to aspect ratio
-	currentWidth = getCurrentWidth(actualCoordinates, directions, coefficient);
-	currentHeight = getCurrentHeight(actualCoordinates, directions, coefficient);
+	let currentWidth = getCurrentWidth(actualCoordinates, directions);
+	let currentHeight = getCurrentHeight(actualCoordinates, directions);
 
 	// Checks ratio:
-	let ratioBroken = null;
-	if (params.preserveAspectRatio) {
-		ratioBroken = actualCoordinates.width / actualCoordinates.height;
-	} else if (aspectRatio.minimum && currentWidth / currentHeight < aspectRatio.minimum) {
-		ratioBroken = aspectRatio.minimum;
-	} else if (aspectRatio.maximum && currentWidth / currentHeight > aspectRatio.maximum) {
-		ratioBroken = aspectRatio.maximum;
-	}
+	let ratioBroken = getBrokenRatio(currentWidth, currentHeight, aspectRatio, actualCoordinates, params.preserveAspectRatio);
 
 	if (ratioBroken) {
 		let { respectDirection, } = params;
 		if (!respectDirection) {
-			if (actualCoordinates.width > actualCoordinates.height) {
+			if (actualCoordinates.width >= actualCoordinates.height || ratioBroken == 1) {
 				respectDirection = 'width';
 			} else {
 				respectDirection = 'height';
 			}
 		}
 		if (respectDirection === 'width') {
-			let overlapHeight = actualCoordinates.height - currentWidth / ratioBroken;
-			if (allowedDirections.top && allowedDirections.bottom) {
-				directions.bottom = -overlapHeight / (2 * coefficient);
-				directions.top = -overlapHeight / (2 * coefficient);
-			} else if (allowedDirections.top) {
-				directions.top = -overlapHeight / coefficient;
+			let overlapHeight = currentWidth / ratioBroken - actualCoordinates.height;
+			if ((allowedDirections.top && allowedDirections.bottom)) {
+				directions.bottom = overlapHeight / 2;
+				directions.top = overlapHeight / 2;
 			} else if (allowedDirections.bottom) {
-				directions.bottom = -overlapHeight / coefficient;
-			} else if (allowedDirections.right) {
+				directions.bottom = overlapHeight;
+			} else if (allowedDirections.top) {
+				directions.top = overlapHeight;
+			}  else if (allowedDirections.right) {
 				directions.right = 0;
 			} else if (allowedDirections.left) {
 				directions.left = 0;
@@ -222,58 +231,75 @@ export function resize ({ coordinates, restrictions, imageSize, coefficient, asp
 		} else if (respectDirection === 'height') {
 			let overlapWidth = actualCoordinates.width - currentHeight * ratioBroken;
 			if (allowedDirections.left && allowedDirections.right) {
-				directions.left = -overlapWidth / (2 * coefficient);
-				directions.right = -overlapWidth / (2 * coefficient);
+				directions.left = -overlapWidth / 2;
+				directions.right = -overlapWidth / 2;
 			} else if (allowedDirections.left) {
-				directions.left = -overlapWidth / coefficient;
+				directions.left = -overlapWidth;
 			} else if (allowedDirections.right) {
-				directions.right = -overlapWidth / coefficient;
+				directions.right = -overlapWidth;
 			} else if (allowedDirections.top) {
 				directions.top = 0;
 			} else if (allowedDirections.bottom) {
 				directions.bottom = 0;
 			}
-		} else {
-			ALL_DIRECTIONS.forEach(direction => {
-				directions[direction] *= 0;
-			});
 		}
+		// 3. Third step: check if desired box with correct aspect ratios break some limits and fit to this conditions
+		directions = fitConditions({ directions, restrictions, coordinates: actualCoordinates, allowedArea, preserveAspectRatio: true, mode: params.compensate && !params.stopOnBreak ? 'move' : 'crop' });
 	}
 
-	// 3. Third step: check if desired box with correct aspect ratios break some limits and fit to this conditions
-	directions = fitConditions(directions, actualCoordinates, restrictions, coefficient, imageSize, ratioBroken);
+	// 4. Check if ratio broken (temporary):
+	currentWidth = getCurrentWidth(actualCoordinates, directions);
+	currentHeight = getCurrentHeight(actualCoordinates, directions);
+	ratioBroken = getBrokenRatio(currentWidth, currentHeight, aspectRatio, actualCoordinates, params.preserveAspectRatio);
+	if (Math.abs(ratioBroken - currentWidth/currentHeight) > 1e-3) {
+		console.error(`Something went wrong and ratio was broken: ${currentWidth/currentHeight} instead of ${ratioBroken}`);
+		ALL_DIRECTIONS.forEach(direction => {
+			if (!allowedDirections[direction]) {
+				directions[direction] = 0;
+			}
+		});
+	}
 
-	return {
-		width: coordinates.width + coefficient * (Math.round(directions.right) + Math.round(directions.left)),
-		height: coordinates.height + coefficient * (Math.round(directions.top) + Math.round(directions.bottom)),
-		left: Math.max(0, coordinates.left - coefficient * Math.round(directions.left)),
-		top: Math.max(0, coordinates.top - coefficient * Math.round(directions.top)),
-	};
+	return move({
+		coordinates: {
+			width: coordinates.width + directions.right + directions.left,
+			height: coordinates.height + directions.top + directions.bottom,
+			left: coordinates.left,
+			top: coordinates.top,
+		},
+		allowedArea,
+		moveEvent: new MoveEvent({}, {
+			left: -directions.left,
+			top: -directions.top,
+		})
+	});
 }
 
-export function move ({ coordinates, imageSize, coefficient, moveEvent }) {
+export function move ({ coordinates, allowedArea = {}, moveEvent }) {
+
 	const directions = {
 		...moveEvent.directions,
 	};
 
 	const newCoordinates = {
-		left: coordinates.left + coefficient * directions.left,
-		top: coordinates.top + coefficient * directions.top,
+		left: coordinates.left + directions.left,
+		top: coordinates.top + directions.top,
 		width: coordinates.width,
 		height: coordinates.height,
 	};
 
-	if (newCoordinates.left < 0) {
-		newCoordinates.left = 0;
+
+	if ('left' in allowedArea && newCoordinates.left < allowedArea.left) {
+		newCoordinates.left = allowedArea.left;
 	}
-	if (newCoordinates.left + newCoordinates.width > imageSize.width) {
-		newCoordinates.left = Math.max(0, imageSize.width - newCoordinates.width);
+	if ('right' in allowedArea && newCoordinates.left + newCoordinates.width > allowedArea.right) {
+		newCoordinates.left = Math.max(0, allowedArea.right - newCoordinates.width);
 	}
-	if (newCoordinates.top < 0) {
-		newCoordinates.top = 0;
+	if ('top' in allowedArea && newCoordinates.top < allowedArea.top) {
+		newCoordinates.top = allowedArea.top;
 	}
-	if (newCoordinates.top + newCoordinates.height > imageSize.height) {
-		newCoordinates.top = Math.max(0, imageSize.height - newCoordinates.height);
+	if ('bottom' in allowedArea && newCoordinates.top + newCoordinates.height > allowedArea.bottom) {
+		newCoordinates.top = Math.max(0, allowedArea.bottom - newCoordinates.height);
 	}
 
 	return newCoordinates;
@@ -307,16 +333,26 @@ export function defaultPosition ({ cropper, image, stencilWidth, stencilHeight,
 }
 
 // eslint-disable-next-line no-unused-vars
-export function defaultSize ({ cropper, image, minWidth, minHeight, maxWidth, maxHeight, imageWidth, imageHeight, props }) {
+export function defaultSize ({ cropper, image, minWidth, minHeight, maxWidth, maxHeight, imageWidth, imageHeight, aspectRatio, props }) {
 	let newHeight, newWidth;
-	if (maxHeight > maxWidth) {
-		newHeight = Math.max(minHeight, maxHeight * 0.8);
-		newWidth = Math.max(minWidth, maxWidth * 0.8);
-	} else {
-		newWidth = Math.max(minWidth, maxWidth * 0.8);
-		newHeight = Math.max(minHeight, maxHeight * 0.8);
+	let areaWidth = imageWidth;
+	let areaHeight = imageHeight;
+
+	const ratio = imageWidth > imageHeight ? aspectRatio.maximum : aspectRatio.minimum;
+
+	if (imageWidth / imageHeight > aspectRatio.maximum || imageWidth / imageHeight < aspectRatio.minimum) {
+		if (ratio <= 1) {
+			areaHeight = imageHeight;
+			areaWidth = areaHeight * aspectRatio.maximum;
+		} else {
+			areaWidth = imageWidth;
+			areaHeight = areaWidth / aspectRatio.minimum;
+		}
 	}
 
+	newHeight = Math.min(maxHeight, Math.max(minHeight, areaHeight * 0.8));
+	newWidth = Math.min(maxWidth, Math.max(minWidth, areaWidth * 0.8));
+
 	return {
 		height: newHeight,
 		width: newWidth,
@@ -331,3 +367,194 @@ export function percentRestrictions({ minWidth, minHeight, maxWidth, maxHeight,
 		maxHeight: maxHeight ? maxHeight / 100 * imageHeight : imageHeight,
 	};
 }
+
+export function autoZoom({ coordinates, stencilCoordinates: originalStencilCoordinates, worldTransforms: originalWorldTransforms, coefficient, imageSize }) {
+	const worldTransforms = {
+		...originalWorldTransforms
+	};
+
+	const stencilCoordinates = {
+		width: worldTransforms.scale * coordinates.width / coefficient,
+		height: worldTransforms.scale * coordinates.height / coefficient,
+		left: originalStencilCoordinates.left,
+		top: originalStencilCoordinates.top,
+	};
+
+	worldTransforms.shift.left -= (coordinates.left * worldTransforms.scale + worldTransforms.shift.left) - originalStencilCoordinates.left * coefficient;
+	worldTransforms.shift.top -= (coordinates.top * worldTransforms.scale + worldTransforms.shift.top) - originalStencilCoordinates.top * coefficient;
+
+	// 1. Scale the image, if the stencil is too big
+	let multiplier = 1;
+	if (stencilCoordinates.width > imageSize.width / coefficient) {
+		multiplier = Math.min(multiplier, imageSize.width / coefficient / stencilCoordinates.width);
+	}
+	if (stencilCoordinates.height > imageSize.height / coefficient) {
+		multiplier = Math.min(multiplier, imageSize.height / coefficient / stencilCoordinates.height);
+	}
+
+	if (multiplier !== 1) {
+		worldTransforms.scale *= multiplier;
+		stencilCoordinates.left += stencilCoordinates.width * (1 - multiplier)/2;
+		stencilCoordinates.top += stencilCoordinates.height * (1 - multiplier)/2;
+		worldTransforms.shift.left = stencilCoordinates.left * coefficient - (coordinates.left) * worldTransforms.scale;
+		worldTransforms.shift.top = stencilCoordinates.top * coefficient - (coordinates.top) * worldTransforms.scale;
+		stencilCoordinates.width *= multiplier;
+		stencilCoordinates.height *= multiplier;
+	}
+
+	// 2. Move the stencil to prevent breaking borders
+	if (stencilCoordinates.left < 0) {
+		worldTransforms.shift.left -= stencilCoordinates.left * coefficient;
+		stencilCoordinates.left = 0;
+	}
+
+	if (stencilCoordinates.top < 0) {
+		worldTransforms.shift.top -= stencilCoordinates.top * coefficient;
+		stencilCoordinates.top = 0;
+	}
+
+	if (stencilCoordinates.left + stencilCoordinates.width > imageSize.width / coefficient) {
+		worldTransforms.shift.left -= (stencilCoordinates.left + stencilCoordinates.width) * coefficient - imageSize.width;
+		stencilCoordinates.left = imageSize.width / coefficient - stencilCoordinates.width;
+	}
+
+	if (stencilCoordinates.top + stencilCoordinates.height > imageSize.height / coefficient) {
+		worldTransforms.shift.top -= (stencilCoordinates.top + stencilCoordinates.height) * coefficient - imageSize.height;
+		stencilCoordinates.top = imageSize.height / coefficient - stencilCoordinates.height;
+	}
+
+	// 3. Move the image to prevent breaking borders:
+	const scaledImageSize = {
+		width: imageSize.width * worldTransforms.scale,
+		height: imageSize.height * worldTransforms.scale,
+	};
+
+	if (worldTransforms.shift.left > 0) {
+		stencilCoordinates.left -= worldTransforms.shift.left / coefficient;
+		worldTransforms.shift.left = 0;
+	}
+	if (worldTransforms.shift.left < imageSize.width - scaledImageSize.width) {
+		stencilCoordinates.left -= (worldTransforms.shift.left - (imageSize.width - scaledImageSize.width)) / coefficient;
+		worldTransforms.shift.left = imageSize.width - scaledImageSize.width;
+	}
+	if (worldTransforms.shift.top > 0) {
+		stencilCoordinates.top -= worldTransforms.shift.top / coefficient;
+		worldTransforms.shift.top = 0;
+	}
+	if (worldTransforms.shift.top < imageSize.height - scaledImageSize.height) {
+		stencilCoordinates.top -= (worldTransforms.shift.top - (imageSize.height - scaledImageSize.height)) / coefficient;
+		worldTransforms.shift.top = imageSize.height - scaledImageSize.height;
+	}
+
+	return {
+		stencilCoordinates,
+		worldTransforms
+	};
+}
+
+export function manipulateImage({ manipulateImageEvent, coordinates, stencilRestrictions, coefficient, stencilCoordinates, worldTransforms: originalWorldTransforms, imageSize, frozenDirections }) {
+	let { scale, move } = manipulateImageEvent;
+
+	const worldTransforms = { ...originalWorldTransforms };
+
+	const scaledImageSize = {
+		width: imageSize.width * worldTransforms.scale,
+		height: imageSize.height * worldTransforms.scale,
+	};
+
+	const imageShifts = {
+		left: move.left || 0,
+		top: move.top || 0,
+	};
+
+	let scaleImage = 1;
+	let scaleStencil = 1;
+
+	// If there is scaling then begin scale
+	if (!frozenDirections.width && !frozenDirections.height && Math.abs(scale.factor - 1) > 1e-3) {
+		const epsilon = Math.abs(1 - scaleImage) / 2;
+		const { maxWidth, maxHeight, minWidth, minHeight } = stencilRestrictions;
+
+		scaleImage = scale.factor;
+
+		// Determine allowed resize:
+		if (worldTransforms.scale / scaleImage < 1 + epsilon) {
+			scaleImage = worldTransforms.scale;
+		}
+
+		let width = coordinates.width * scaleImage;
+		let height = coordinates.height * scaleImage;
+
+		// Prevent breaking the restrictions
+		const breaks = {
+			minWidth: width < minWidth + epsilon,
+			minHeight: height < minHeight + epsilon,
+			maxWidth: width > maxWidth - epsilon,
+			maxHeight: height > maxHeight - epsilon,
+		};
+
+		if (breaks.minWidth) {
+			scaleImage = minWidth / coordinates.width;
+		}
+		if (breaks.minHeight) {
+			scaleImage = minHeight / coordinates.height;
+		}
+		if (breaks.maxHeight || breaks.maxWidth) {
+			let allowedImageScale = scaleImage;
+			if (breaks.maxWidth && breaks.maxHeight) {
+				allowedImageScale = Math.min(maxHeight / coordinates.height, coordinates.width);
+			} else if (breaks.maxHeight) {
+				allowedImageScale = maxHeight / coordinates.height;
+			} else if (breaks.maxWidth) {
+				allowedImageScale = maxWidth / coordinates.width;
+			}
+			scaleStencil = allowedImageScale / scaleImage;
+		}
+
+		const imageSizeChanges = {
+			width: scaledImageSize.width * (1 - 1/scaleImage),
+			height:  scaledImageSize.height * (1- 1/scaleImage),
+		};
+
+		imageShifts.left += imageSizeChanges.width * Math.abs((worldTransforms.shift.left - scale.center.left * coefficient) / scaledImageSize.width);
+		imageShifts.top += imageSizeChanges.height * Math.abs((worldTransforms.shift.top - scale.center.top * coefficient) / scaledImageSize.height);
+
+		scaledImageSize.width /= scaleImage;
+		scaledImageSize.height /= scaleImage;
+	}
+
+	// Process the moving:
+	if (Math.ceil(worldTransforms.shift.left + imageShifts.left) > 0) {
+		imageShifts.left = -worldTransforms.shift.left;
+	} else if (worldTransforms.shift.left + imageShifts.left < imageSize.width - scaledImageSize.width) {
+		imageShifts.left = imageSize.width - scaledImageSize.width  - worldTransforms.shift.left;
+	}
+
+	if (Math.ceil(worldTransforms.shift.top + imageShifts.top) > 0) {
+		imageShifts.top = -worldTransforms.shift.top;
+	} else if (worldTransforms.shift.top + imageShifts.top < imageSize.height - scaledImageSize.height) {
+		imageShifts.top = imageSize.height - scaledImageSize.height - worldTransforms.shift.top;
+	}
+
+	worldTransforms.shift.left += imageShifts.left;
+	worldTransforms.shift.top += imageShifts.top;
+	worldTransforms.scale = worldTransforms.scale / scaleImage;
+
+	const stencilResizeAmends = { left: 0, top: 0 };
+	if (imageSize.width !== coordinates.width) {
+		stencilResizeAmends.left = stencilCoordinates.width * (1 - scaleStencil) * (coordinates.left / (imageSize.width - coordinates.width));
+	}
+	if (imageSize.height !== coordinates.height) {
+		stencilResizeAmends.top = stencilCoordinates.height * (1 - scaleStencil) * (coordinates.top / (imageSize.height - coordinates.height));
+	}
+
+	return {
+		coordinates: {
+			width: coordinates.width * scaleImage * scaleStencil,
+			height: coordinates.height * scaleImage * scaleStencil,
+			left: (stencilCoordinates.left - worldTransforms.shift.left / coefficient + stencilResizeAmends.left) * coefficient / worldTransforms.scale,
+			top: (stencilCoordinates.top - worldTransforms.shift.top / coefficient + stencilResizeAmends.top) * coefficient / worldTransforms.scale,
+		},
+		worldTransforms
+	};
+}
diff --git a/src/core/constants.js b/src/core/constants.js
index d2a23d89..c7f4caf0 100644
--- a/src/core/constants.js
+++ b/src/core/constants.js
@@ -11,4 +11,6 @@ export const HORIZONTAL_DIRECTIONS = ['left', 'right'];
 export const VERTICAL_DIRECTIONS = ['top', 'bottom'];
 export const ALL_DIRECTIONS = ['left', 'right', 'top', 'bottom'];
 
+export const COORDINATES_TYPES = ['width', 'height', 'left', 'top'];
+
 export const XHR_DONE = 4;
diff --git a/src/core/events.js b/src/core/events.js
index 7f28202a..069886c0 100644
--- a/src/core/events.js
+++ b/src/core/events.js
@@ -1,5 +1,14 @@
+export class ManipulateImageEvent {
+	constructor(nativeEvent, move = {}, scale = {}, params = {}) {
+		this.nativeEvent = nativeEvent;
+		this.move = move;
+		this.scale = scale;
+		this.params = params;
+	}
+}
+
 export class ResizeEvent {
-	constructor(nativeEvent, directions, params) {
+	constructor(nativeEvent, directions, params = {}) {
 		this.nativeEvent = nativeEvent;
 		this.directions = directions;
 		this.params = params;
diff --git a/src/core/utils.js b/src/core/utils.js
index 16523c65..3931241b 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -50,3 +50,9 @@ export function addTimestamp(url) {
 	const timestamp = `timestamp=${(new Date()).getTime()}`;
 	return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp;
 }
+
+export function distance(firstPoint, secondPoint) {
+	return Math.sqrt(
+		Math.pow(firstPoint.x - secondPoint.x, 2) + Math.pow(firstPoint.y - secondPoint.y, 2)
+	);
+}
diff --git a/src/mixins/draggable.js b/src/mixins/draggable.js
index ad2d5739..8aecd434 100644
--- a/src/mixins/draggable.js
+++ b/src/mixins/draggable.js
@@ -37,7 +37,7 @@ export default {
 			}
 		},
 		onTouchStart (e) {
-			if (e.cancelable) {
+			if (e.cancelable && !this.disabled && e.touches.length === 1) {
 				this.touches = [...e.touches];
 
 				if (!this.hovered) {
@@ -78,14 +78,16 @@ export default {
 			}
 		},
 		onMouseDown (e) {
-			const touch = {
-				fake: true,
-				clientX: e.clientX,
-				clientY: e.clientY,
-			};
-			this.touches = [touch];
-			this.initAnchor(touch);
-			e.stopPropagation();
+			if (!this.disabled) {
+				const touch = {
+					fake: true,
+					clientX: e.clientX,
+					clientY: e.clientY,
+				};
+				this.touches = [touch];
+				this.initAnchor(touch);
+				e.stopPropagation();
+			}
 		},
 		onMouseMove (e) {
 			if (this.touches.length) {
diff --git a/src/mixins/index.js b/src/mixins/index.js
index 55f7fc42..37c5c406 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -1 +1 @@
-export { default as handler } from './handler.js';
+export { default as draggable } from './draggable.js';