From 8530e1dbfa38ae16485d7082571bcf8ed5361fa6 Mon Sep 17 00:00:00 2001
From: Eelco Brolman <eelco@openeye.nl>
Date: Thu, 31 Aug 2017 21:33:16 +0200
Subject: [PATCH] added emits for updates of x,y,w,h

This way, the .sync
(https://vuejs.org/v2/guide/components.html#sync-Modifier) works for the
:x.sync :y.sync :w.sync :h.sync bindings
---
 src/App.vue                                |  5 ++++-
 src/components/vue-draggable-resizable.vue | 12 ++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 1cef39eb..60e994fc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div style="height: 500px; width: 500px; margin: 20px; border: 1px solid red; position: relative;">
-      <vue-draggable-resizable :x="50" :y="50" :w="400" :h="400" :parent="true" @resizing="onResize" @dragging="onDrag">
+      <vue-draggable-resizable :x.sync="x" :y.sync="y" :w.sync="w" :h.sync="h" :parent="true" @resizing="onResize" @dragging="onDrag">
         <p>Component</p>
       </vue-draggable-resizable>
     </div>
@@ -13,6 +13,9 @@ import VueDraggableResizable from './components/vue-draggable-resizable'
 
 export default {
   name: 'app',
+  data () {
+    return {x: 50, y: 50, w: 400, h: 400}
+  },
   components: {
     'vue-draggable-resizable': VueDraggableResizable
   }
diff --git a/src/components/vue-draggable-resizable.vue b/src/components/vue-draggable-resizable.vue
index c01a796e..ae3eaf7b 100644
--- a/src/components/vue-draggable-resizable.vue
+++ b/src/components/vue-draggable-resizable.vue
@@ -138,6 +138,7 @@ export default {
     }
 
     this.$emit('resizing', this.left, this.top, this.width, this.height)
+    this.emitUpdates()
   },
   beforeDestroy: function () {
     document.documentElement.removeEventListener('mousemove', this.handleMove, true)
@@ -253,6 +254,7 @@ export default {
         }
 
         this.$emit('resizing', this.left, this.top, this.width, this.height)
+        this.emitUpdates()
       }
 
       window.requestAnimationFrame(animate)
@@ -306,6 +308,7 @@ export default {
         this.height = (Math.round(this.elmH / this.grid[1]) * this.grid[1])
 
         this.$emit('resizing', this.left, this.top, this.width, this.height)
+        this.emitUpdates()
       } else if (this.dragging) {
         if (this.elmX + dX < this.parentX) this.mouseOffX = (dX - (diffX = this.parentX - this.elmX))
         else if (this.elmX + this.elmW + dX > this.parentW) this.mouseOffX = (dX - (diffX = this.parentW - this.elmX - this.elmW))
@@ -324,6 +327,7 @@ export default {
         }
 
         this.$emit('dragging', this.left, this.top)
+        this.emitUpdates()
       }
     },
     handleUp: function (e) {
@@ -331,15 +335,23 @@ export default {
       if (this.resizing) {
         this.resizing = false
         this.$emit('resizestop', this.left, this.top, this.width, this.height)
+        this.emitUpdates()
       }
       if (this.dragging) {
         this.dragging = false
         this.$emit('dragstop', this.left, this.top)
+        this.emitUpdates()
       }
       this.opacity = 1
 
       this.elmX = this.left
       this.elmY = this.top
+    },
+    emitUpdates: function () {
+      this.$emit('update:x', this.left)
+      this.$emit('update:y', this.top)
+      this.$emit('update:w', this.width)
+      this.$emit('update:h', this.height)
     }
   },
   computed: {