From 4c71a6c53eb6b2ee78f97a6a85757e14a1144c09 Mon Sep 17 00:00:00 2001
From: Edward Hibbert <edward@ehibbert.org.uk>
Date: Sun, 11 Oct 2020 13:21:13 +0100
Subject: [PATCH 1/2] Allow constraint of resize axis

---
 README.md                                  | 12 ++++++++++++
 src/components/vue-draggable-resizable.vue | 10 ++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 185d9873..7baaab37 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ If you are looking for the version 1 of the component, it is available on the [v
 * Restrict size and movement to parent element
 * Snap element to custom grid
 * Restrict drag to vertical or horizontal axis
+* Restrict sizes to vertical or horizontal axis
 * Maintain aspect ratio
 * Touch enabled
 * Use your own classes
@@ -403,6 +404,17 @@ Define the axis on which the element is draggable. Available values are `x`, `y`
 <vue-draggable-resizable axis="x">
 ```
 
+#### resizeAxis
+Type: `String`<br>
+Required: `false`<br>
+Default: `both`
+
+Define the axis on which the element is resizeable. Available values are `x`, `y` or `both`.
+
+```html
+<vue-draggable-resizable resizesAxis="x">
+```
+
 #### grid
 Type: `Array`<br>
 Required: `false`<br>
diff --git a/src/components/vue-draggable-resizable.vue b/src/components/vue-draggable-resizable.vue
index ccf35d17..7773df36 100644
--- a/src/components/vue-draggable-resizable.vue
+++ b/src/components/vue-draggable-resizable.vue
@@ -195,6 +195,11 @@ export default {
       default: 'both',
       validator: (val) => ['x', 'y', 'both'].includes(val)
     },
+    resizeAxis: {
+      type: String,
+      default: 'both',
+      validator: (val) => ['x', 'y', 'both'].includes(val)
+    },
     grid: {
       type: Array,
       default: () => [1, 1]
@@ -620,13 +625,14 @@ export default {
       let top = this.top
       let right = this.right
       let bottom = this.bottom
+      const axis = this.resizeAxis
 
       const mouseClickPosition = this.mouseClickPosition
       const lockAspectRatio = this.lockAspectRatio
       const aspectFactor = this.aspectFactor
 
-      const tmpDeltaX = mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX)
-      const tmpDeltaY = mouseClickPosition.mouseY - (e.touches ? e.touches[0].pageY : e.pageY)
+      const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX) : 0
+      const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - (e.touches ? e.touches[0].pageY : e.pageY) : 0
 
       if (!this.widthTouched && tmpDeltaX) {
         this.widthTouched = true

From 4879847be38653d228dd78f811fc2326a53ed43d Mon Sep 17 00:00:00 2001
From: Edward Hibbert <edward@ehibbert.org.uk>
Date: Mon, 19 Oct 2020 14:11:54 +0100
Subject: [PATCH 2/2] Resize is dragging too

---
 src/components/vue-draggable-resizable.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/vue-draggable-resizable.vue b/src/components/vue-draggable-resizable.vue
index 7773df36..8577c9c8 100644
--- a/src/components/vue-draggable-resizable.vue
+++ b/src/components/vue-draggable-resizable.vue
@@ -768,7 +768,8 @@ export default {
   computed: {
     style () {
       return {
-        transform: `translate(${this.left}px, ${this.top}px)`,
+        // The following line is turning a resize into a drag.
+        // transform: `translate(${this.left}px, ${this.top}px)`,
         width: this.computedWidth,
         height: this.computedHeight,
         zIndex: this.zIndex,