Added reactivity to position props

Author: kirillmurashov

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-drag-resize",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Vue Component for resize and drag elements",
   "author": "Kirill Murashov <me@kirillmurashov.com>",
   "main": "dist/index.js",

src/components/vue-drag-resize.js

@@ -187,9 +187,6 @@ export default {
                 return
             }
 
-            const parentWidth = this.parentWidth;
-            const parentHeight = this.parentHeight;
-
             this.bodyDrag = true;
 
             this.stickStartPos.mouseX = ev.x;
@@ -200,6 +197,13 @@ export default {
             this.stickStartPos.top = this.top;
             this.stickStartPos.bottom = this.bottom;
 
+            this.calcDragLimitation();
+        },
+
+        calcDragLimitation(){
+            const parentWidth = this.parentWidth;
+            const parentHeight = this.parentHeight;
+
             if (this.parentLimitation) {
                 this.limits = {
                     minLeft: 0,
@@ -212,7 +216,6 @@ export default {
                     maxBottom: parentHeight - this.height
                 };
             }
-
         },
 
         bodyMove(ev) {
@@ -610,6 +613,20 @@ export default {
             if (val > 0 && val <= this.height) {
                 this.minHeight = val
             }
+        },
+
+        x(){
+            this.calcDragLimitation();
+            let delta = this.x - this.left;
+            this.rawLeft = this.x;
+            this.rawRight = this.right - delta;
+        },
+
+        y(){
+            this.calcDragLimitation();
+            let delta = this.y - this.top;
+            this.rawTop = this.y;
+            this.rawBottom = this.bottom - delta;
         }
     }
 }

src/demo/components/toolbar/toolbar.html

@@ -2,7 +2,7 @@
     <div class="toolbar-wh-row">
         <p class="toolbar-row-title">Position</p>
         <span class="toolbar-position-inp">top
-            <input :value="top" disabled />
+            <input :value="top" @keyup="changeTop" />
 
             <svgicon name="lock"
                      :color="topIsLocked ? '#42b983 #35495e' : '#AAA'"
@@ -13,7 +13,7 @@
             ></svgicon>
         </span>
         <span class="toolbar-position-inp">left
-            <input :value="left" disabled  />
+            <input :value="left" @keyup="changeLeft" />
             <svgicon name="lock"
                      :color="leftIsLocked ? '#42b983 #35495e' : '#AAA'"
                      width="15"

src/demo/components/toolbar/toolbar.js

@@ -60,7 +60,7 @@ export default {
                 this.$store.state.rect.rects[this.activeRect].axis === 'none')
         },
 
-        zIndex(){
+        zIndex() {
             if (this.activeRect === null) {
                 return null;
             }
@@ -119,7 +119,7 @@ export default {
 
         changeMinWidth(ev) {
             let minw = parseInt(ev.target.value);
-            if(typeof minw !== 'number' || isNaN(minw)){
+            if (typeof minw !== 'number' || isNaN(minw)) {
                 minw = 1;
             }
 
@@ -137,7 +137,7 @@ export default {
         changeMinHeight(ev) {
             let minh = parseInt(ev.target.value);
 
-            if(typeof minh !== 'number' || isNaN(minh)){
+            if (typeof minh !== 'number' || isNaN(minh)) {
                 minh = 1;
             }
 
@@ -150,6 +150,27 @@ export default {
             ev.target.value = minh;
 
             this.$store.dispatch('rect/setMinHeight', {id: this.activeRect, height: minh});
+        },
+
+        changeTop(ev) {
+            let top = parseInt(ev.target.value);
+
+            if (typeof top !== 'number' || isNaN(top)) {
+                top = this.$store.state.rect.rects[this.activeRect].top;
+                ev.target.value = top;
+                return
+            }
+        },
+
+        changeLeft(ev) {
+            let left = parseInt(ev.target.value);
+
+            if (typeof left !== 'number' || isNaN(left)) {
+                left = this.$store.state.rect.rects[this.activeRect].left;
+                ev.target.value = left;
+            }
+
+            this.$store.dispatch('rect/setLeft', {id: this.activeRect, left: left});
         }
     }
 }