implements jbaysolutions#35, release 1.0.3

gmsa · gmsa · commit 18c279db0006 · 2017-08-16T14:20:49.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+1.0.3 (Aug 16, 2017)
+
+* merged #85, support for dragIgnoreFrom and resizeIgnoreFrom
+* implemented #35, resize, resized, move and moved events
+ 
+
 1.0.2 (Apr 18, 2017)
 
 * fixed #40 properly 
diff --git a/README.md b/README.md
@@ -118,6 +118,83 @@ npm install vue-grid-layout
 ```` 
 
 
+### Events
+
+Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized.
+Moved and resized event listeners can be added, if the only notification needed is when an item is finished moving or resizing.
+
+Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/02-events.html)   
+
+````html
+
+    <grid-layout
+            :layout="layout"
+            :col-num="12"
+            :row-height="30"
+            :is-draggable="true"
+            :is-resizable="true"
+            :vertical-compact="true"
+            :margin="[10, 10]"
+            :use-css-transforms="true"
+    >
+
+        <grid-item v-for="item in layout"
+                   :x="item.x"
+                   :y="item.y"
+                   :w="item.w"
+                   :h="item.h"
+                   :i="item.i"
+                   @resize="resizeEvent"
+                   @move="moveEvent"
+                   @resized="resizedEvent"
+                   @moved="movedEvent">
+            {{item.i}}
+        </grid-item>
+    </grid-layout>
+```` 
+
+* Move event: every time an item is being moved and changes position
+
+```javascript
+    moveEvent: function(i, newX, newY){
+        console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
+    },
+```
+
+* Resize event: every time an item is being resized and changes size
+ 
+```javascript
+    resizeEvent: function(i, newH, newW){
+        console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
+    },
+``` 
+
+* Moved event: every time an item is finished being moved and changes position
+
+```javascript
+    movedEvent: function(i, newX, newY){
+        console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
+    },
+```
+
+* Resized event: every time an item is finished being resized and changes size
+ 
+```javascript
+    /**
+     * 
+     * @param i the item id/index
+     * @param newH new height in grid rows 
+     * @param newW new width in grid columns
+     * @param newHPx new height in pixels
+     * @param newWPx new width in pixels
+     * 
+     */
+    resizedEvent: function(i, newH, newW, newHPx, newWPx){
+        console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
+    },
+``` 
+
+
 ## Contribute
 
 If you have a feature request, please add it as an issue or make a pull request.
diff --git a/dist/vue-grid-layout.js b/dist/vue-grid-layout.js
diff --git a/dist/vue-grid-layout.js.map b/dist/vue-grid-layout.js.map
diff --git a/dist/vue-grid-layout.min.js b/dist/vue-grid-layout.min.js
diff --git a/index.html b/index.html
@@ -43,7 +43,12 @@ <h1>Vue Grid Layout</h1>
                            :h.sync="item.h"
                            :min-w="2"
                            :min-h="2"
-                           :i="item.i">
+                           :i="item.i"
+                           @resize="resize"
+                           @move="move"
+                           @resized="resized"
+                           @moved="moved"
+                >
                     <test-element :text="item.i"></test-element>
                 </grid-item>
             </grid-layout>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-grid-layout",
-  "version": "1.1.1",
+  "version": "1.0.3",
   "description": "A draggable and resizable grid layout, as a Vue component.",
   "keywords": [
     "grid",
diff --git a/src/GridItem.vue b/src/GridItem.vue
@@ -176,7 +176,12 @@
                 lastY: NaN,
                 lastW: NaN,
                 lastH: NaN,
-                style: {}
+                style: {} ,
+
+                previousW: null,
+                previousH: null,
+                previousX: null,
+                previousY: null,
             }
         },
         ready: function() {
@@ -191,7 +196,7 @@
 
             var self = this;
             if (this.isDraggable) {
-                if (this.interactObj == null) {
+                if (this.interactObj === null || this.interactObj === undefined) {
                     this.interactObj = interact(this.$els.item, {ignoreFrom: this.dragIgnoreFrom});
                 }
                 this.interactObj
@@ -202,7 +207,7 @@
                         });
             }
             if (this.isResizable) {
-                if (this.interactObj == null) {
+                if (this.interactObj === null) {
                     this.interactObj = interact(this.$els.item, {ignoreFrom: this.resizeIgnoreFrom});
                 }
                 this.interactObj
@@ -279,12 +284,15 @@
             handleResize: function(event) {
                 const position = getControlPosition(event);
                 // Get the current drag point from the event. This is used as the offset.
-                if (position == null) return; // not possible but satisfies flow
+                if (position === null) return; // not possible but satisfies flow
                 const {x, y} = position;
 
                 const newSize = {width: 0, height: 0};
                 switch (event.type) {
                     case "resizestart":
+                        this.previousW = this.w;
+                        this.previousH = this.h;
+
                         var pos = this.calcPosition(this.x, this.y, this.w, this.h);
                         newSize.width = pos.width;
                         newSize.height = pos.height;
@@ -341,6 +349,13 @@
                 this.lastW = x;
                 this.lastH = y;
 
+                if (this.w !== pos.w || this.h !== pos.h) {
+                    this.$dispatch("resize", this.i, pos.h, pos.w);
+                }
+                if (event.type === "resizeend" && (this.previousW !== this.w || this.previousH !== this.h)) {
+                    this.$dispatch("resized", this.i, pos.h, pos.w, newSize.height, newSize.width);
+                }
+
                 this.$dispatch("resizeEvent", event.type, this.i, this.x, this.y, this.h, this.w);
             },
             handleDrag(event) {
@@ -349,14 +364,17 @@
                 const position = getControlPosition(event);
 
                 // Get the current drag point from the event. This is used as the offset.
-                if (position == null) return; // not possible but satisfies flow
+                if (position === null) return; // not possible but satisfies flow
                 const {x, y} = position;
 
                 var shouldUpdate = false;
 
                 const newPosition = {top: 0, left: 0};
                 switch (event.type) {
                     case "dragstart":
+                        this.previousX = this.x;
+                        this.previousY = this.y;
+
                         var parentRect = event.target.offsetParent.getBoundingClientRect();
                         var clientRect = event.target.getBoundingClientRect();
                         newPosition.left = clientRect.left - parentRect.left;
@@ -395,6 +413,13 @@
                 this.lastX = x;
                 this.lastY = y;
 
+                if (this.x !== pos.x || this.y !== pos.y) {
+                    this.$dispatch("move", this.i, pos.x, pos.y);
+                }
+                if (event.type === "dragend" && (this.previousX !== this.x || this.previousY !== this.y)) {
+                    this.$dispatch("moved", this.i, pos.x, pos.y);
+                }
+
                 this.$dispatch("dragEvent", event.type, this.i, this.x, this.y, this.w, this.h);
             },
             calcPosition: function(x, y, w, h) {
diff --git a/src/GridLayout.vue b/src/GridLayout.vue
@@ -169,7 +169,7 @@
         },
         events: {
             dragEvent: function (eventName, id, x, y, w, h) {
-                if (eventName == "dragmove" || eventName == "dragstart") {
+                if (eventName === "dragmove" || eventName === "dragstart") {
                     this.isDragging = true;
                     this.placeholder.i = id;
                     this.placeholder.x = x;
@@ -190,7 +190,7 @@
                 this.updateHeight();
             },
             resizeEvent: function (eventName, id, x, y, h, w) {
-                if (eventName == "resizestart" || eventName == "resizemove") {
+                if (eventName === "resizestart" || eventName === "resizemove") {
                     this.isDragging = true;
                     this.placeholder.i = id;
                     this.placeholder.x = x;
diff --git a/src/app.js b/src/app.js
@@ -72,7 +72,19 @@ new Vue({
             var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
             this.index++;
             this.layout.push(item);
-        }
+        } ,
+        move: function(i, newX, newY){
+            console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
+        },
+        resize: function(i, newH, newW){
+            console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
+        },
+        moved: function(i, newX, newY){
+            console.log("### MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
+        },
+        resized: function(i, newH, newW){
+            console.log("### RESIZED i=" + i + ", H=" + newH + ", W=" + newW);
+        },
     },
 });
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-grid-layout",`
`3`		`- "version": "1.1.1",`
	`3`	`+ "version": "1.0.3",`
`4`	`4`	`"description": "A draggable and resizable grid layout, as a Vue component.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"grid",`