Merge pull request jbaysolutions#346 from SheanDe/feat/prevent-collision

gmsa · web-flow · commit 915f06a3cfe5 · 2019-08-31T12:54:48.000+01:00
Add prevent-collision options to GridLayout
diff --git a/README.md b/README.md
@@ -250,6 +250,14 @@ Include the browser-ready bundle (download from [releases](https://github.com/jb
 
     Says if the layout should be compact vertically.
 
+* **preventCollision**
+    
+    * type: `Boolean`
+    * required: `false`
+    * default: `false`
+
+    Says if grid items will move when being dragged over.
+
 * **useCssTransforms**
     
     * type: `Boolean`
diff --git a/examples/06-responsive.html b/examples/06-responsive.html
@@ -13,6 +13,8 @@ <h1>Vue Grid Layout Example 6 - Responsive</h1>
     <a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
     <br/>
     <a href="05-mirrored.html">Previous example: Mirrored grid layout</a>
+    <br/>
+    <a href="07-prevent-collision.html">Next example: Responsive</a>
 
     <div id="app" style="width: 100%;">
         <!--<pre>{{ $data | json }}</pre>-->
diff --git a/examples/07-prevent-collision.html b/examples/07-prevent-collision.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Vue Grid Layout Example 8 - Prevent Collision</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="app.css">
+    <!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
+</head>
+<body>
+    <h1>Vue Grid Layout Example 8 - Prevent Collision</h1>
+
+    <a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
+    <br/>
+    <a href="06-responsive.html">Previous example: Mirrored grid layout</a>
+
+    <div id="app" style="width: 100%;">
+        <!--<pre>{{ $data | json }}</pre>-->
+        <div>
+            <div class="layoutJSON">
+                Displayed as <code>[x, y, w, h]</code>:
+                <div class="columns">
+                    <div class="layoutItem" v-for="item in layout">
+                        <b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="content">
+            <!--<button @click="decreaseWidth">Decrease Width</button>
+            <button @click="increaseWidth">Increase Width</button>
+            <button @click="addItem">Add an item</button>-->
+            <br/>
+            <grid-layout :layout.sync="layout"
+                         :col-num="12"
+                         :row-height="30"
+                         :is-draggable="draggable"
+                         :is-resizable="resizable"
+                         :vertical-compact="false"
+                         :prevent-collision="true"
+                         :use-css-transforms="true"
+                         :responsive="true"
+            >
+                <grid-item v-for="item in layout"
+                           :x="item.x"
+                           :y="item.y"
+                           :w="item.w"
+                           :h="item.h"
+                           :i="item.i"
+                        >
+                    <span class="text">{{item.i}}</span>
+                </grid-item>
+            </grid-layout>
+        </div>
+
+    </div>
+    <script src="vue.min.js"></script>
+    <script src="../dist/vue-grid-layout.umd.min.js"></script>
+    <script src="07-prevent-collision.js"></script>
+</body>
+</html>
diff --git a/examples/07-prevent-collision.js b/examples/07-prevent-collision.js
@@ -0,0 +1,56 @@
+var testLayout = [
+  {"x":0,"y":0,"w":2,"h":5,"i":"0", static: false},
+  {"x":2,"y":0,"w":2,"h":2,"i":"1", static: false},
+  {"x":4,"y":0,"w":2,"h":5,"i":"2", static: false},
+  {"x":6,"y":0,"w":2,"h":3,"i":"3", static: false},
+  {"x":8,"y":0,"w":2,"h":3,"i":"4", static: false},
+  {"x":10,"y":0,"w":2,"h":3,"i":"5", static: false},
+  {"x":0,"y":5,"w":2,"h":5,"i":"6", static: false},
+  {"x":2,"y":5,"w":2,"h":5,"i":"7", static: false},
+  {"x":4,"y":5,"w":2,"h":5,"i":"8", static: false},
+  {"x":6,"y":3,"w":2,"h":4,"i":"9", static: false},
+  {"x":8,"y":4,"w":2,"h":4,"i":"10", static: false},
+  {"x":10,"y":4,"w":2,"h":4,"i":"11", static: false},
+  {"x":0,"y":10,"w":2,"h":5,"i":"12", static: false},
+  {"x":2,"y":10,"w":2,"h":5,"i":"13", static: false},
+  {"x":4,"y":8,"w":2,"h":4,"i":"14", static: false},
+  {"x":6,"y":8,"w":2,"h":4,"i":"15", static: false},
+  {"x":8,"y":10,"w":2,"h":5,"i":"16", static: false},
+  {"x":10,"y":4,"w":2,"h":2,"i":"17", static: false},
+  {"x":0,"y":9,"w":2,"h":3,"i":"18", static: false},
+  {"x":2,"y":6,"w":2,"h":2,"i":"19", static: false}
+];
+
+// var GridLayout = VueGridLayout.GridLayout;
+// var GridItem = VueGridLayout.GridItem;
+
+new Vue({
+  el: '#app',
+  // components: {
+  //     "GridLayout": GridLayout,
+  //     "GridItem": GridItem
+  // },
+  data: {
+      layout: testLayout,
+      draggable: true,
+      resizable: true,
+      index: 0
+  },
+
+/*
+  mounted: function () {
+      this.index = this.layout.length;
+  },
+  */
+  methods: {
+      itemTitle(item) {
+          var result = item.i;
+          if (item.static) {
+              result += " - Static";
+          }
+          return result;
+      }
+  }
+});
+
+
diff --git a/src/App.vue b/src/App.vue
@@ -30,6 +30,7 @@
             <input type="checkbox" v-model="resizable"/> Resizable
             <input type="checkbox" v-model="mirrored"/> Mirrored
             <input type="checkbox" v-model="responsive"/> Responsive
+            <input type="checkbox" v-model="preventCollision"/> Prevent Collision
             <div style="margin-top: 10px;margin-bottom: 10px;">
                 Row Height: <input type="number" v-model="rowHeight"/> Col nums: <input type="number" v-model="colNum"/>
             </div>
@@ -40,6 +41,7 @@
                     :is-draggable="draggable"
                     :is-resizable="resizable"
                     :is-mirrored="mirrored"
+                    :prevent-collision="preventCollision"
                     :vertical-compact="true"
                     :use-css-transforms="true"
                     :responsive="responsive"
@@ -143,6 +145,7 @@
                 resizable: true,
                 mirrored: false,
                 responsive: true,
+                preventCollision: false,
                 rowHeight: 30,
                 colNum: 12,
                 index: 0
diff --git a/src/components/GridLayout.vue b/src/components/GridLayout.vue
@@ -20,7 +20,7 @@
     import Vue from 'vue';
     var elementResizeDetectorMaker = require("element-resize-detector");
 
-    import {bottom, compact, getLayoutItem, moveElement, validateLayout, cloneLayout} from '../helpers/utils';
+    import {bottom, compact, getLayoutItem, moveElement, validateLayout, cloneLayout, getAllCollisions} from '../helpers/utils';
     import {getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout} from "../helpers/responsiveUtils";
     //var eventBus = require('./eventBus');
 
@@ -97,6 +97,10 @@
                 type: Object,
                 default: function(){return{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }},
             },
+            preventCollision: {
+                type: Boolean,
+                default: false
+            }
         },
         data: function () {
             return {
@@ -301,24 +305,55 @@
                     });
                 }
 
-                // set layout element coordinates to dragged position
-                l.x = x;
-                l.y = y;
                 // Move the element to the dragged ___location.
-                this.layout = moveElement(this.layout, l, x, y, true);
+                this.layout = moveElement(this.layout, l, x, y, true, this.preventCollision);
                 compact(this.layout, this.verticalCompact);
                 // needed because vue can't detect changes on array element properties
                 this.eventBus.$emit("compact");
                 this.updateHeight();
                 if (eventName === 'dragend') this.$emit('layout-updated', this.layout);
             },
             resizeEvent: function (eventName, id, x, y, h, w) {
+                let l = getLayoutItem(this.layout, id);
+                //GetLayoutItem sometimes return null object
+                if (l === undefined || l === null){
+                    l = {h:0, w:0}
+                }
+
+                let hasCollisions;
+                if (this.preventCollision) {
+                    const collisions = getAllCollisions(this.layout, { ...l, w, h }).filter(
+                        layoutItem => layoutItem.i !== l.i
+                    );
+                    hasCollisions = collisions.length > 0;
+
+                    // If we're colliding, we need adjust the placeholder.
+                    if (hasCollisions) {
+                        // adjust w && h to maximum allowed space
+                        let leastX = Infinity,
+                        leastY = Infinity;
+                        collisions.forEach(layoutItem => {
+                        if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
+                        if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+                        });
+
+                        if (Number.isFinite(leastX)) l.w = leastX - l.x;
+                        if (Number.isFinite(leastY)) l.h = leastY - l.y;
+                    }
+                }
+
+                if (!hasCollisions) {
+                    // Set new width and height.
+                    l.w = w;
+                    l.h = h;
+                }
+
                 if (eventName === "resizestart" || eventName === "resizemove") {
                     this.placeholder.i = id;
                     this.placeholder.x = x;
                     this.placeholder.y = y;
-                    this.placeholder.w = w;
-                    this.placeholder.h = h;
+                    this.placeholder.w = l.w;
+                    this.placeholder.h = l.h;
                     this.$nextTick(function() {
                         this.isDragging = true;
                     });
@@ -330,13 +365,6 @@
                         this.isDragging = false;
                     });
                 }
-                let l = getLayoutItem(this.layout, id);
-                //GetLayoutItem sometimes return null object
-                if (l === undefined || l === null){
-                    l = {h:0, w:0}
-                }
-                l.h = h;
-                l.w = w;
 
                 if (this.responsive) this.responsiveGridLayout();
 
diff --git a/src/helpers/utils.js b/src/helpers/utils.js
@@ -206,12 +206,15 @@ export function getStatics(layout: Layout): Array<LayoutItem> {
  * @param  {Boolean}    [isUserAction] If true, designates that the item we're moving is
  *                                     being dragged/resized by th euser.
  */
-export function moveElement(layout: Layout, l: LayoutItem, x: Number, y: Number, isUserAction: Boolean): Layout {
+export function moveElement(layout: Layout, l: LayoutItem, x: Number, y: Number, isUserAction: Boolean, preventCollision: Boolean): Layout {
   if (l.static) return layout;
 
   // Short-circuit if nothing to do.
   //if (l.y === y && l.x === x) return layout;
 
+  const oldX = l.x;
+  const oldY = l.y;
+
   const movingUp = y && l.y > y;
   // This is quite a bit faster than extending the object
   if (typeof x === 'number') l.x = x;
@@ -226,6 +229,13 @@ export function moveElement(layout: Layout, l: LayoutItem, x: Number, y: Number,
   if (movingUp) sorted = sorted.reverse();
   const collisions = getAllCollisions(sorted, l);
 
+  if (preventCollision && collisions.length) {
+    l.x = oldX;
+    l.y = oldY;
+    l.moved = false;
+    return layout;
+  }
+
   // Move each item that collides away from this element.
   for (let i = 0, len = collisions.length; i < len; i++) {
     const collision = collisions[i];
@@ -261,6 +271,7 @@ export function moveElement(layout: Layout, l: LayoutItem, x: Number, y: Number,
 export function moveElementAwayFromCollision(layout: Layout, collidesWith: LayoutItem,
                                              itemToMove: LayoutItem, isUserAction: ?boolean): Layout {
 
+  const preventCollision = false // we're already colliding
   // If there is enough space above the collision to put this element, move it there.
   // We only do this on the main collision as this can get funky in cascades and cause
   // unwanted swapping behavior.
@@ -275,13 +286,13 @@ export function moveElementAwayFromCollision(layout: Layout, collidesWith: Layou
     };
     fakeItem.y = Math.max(collidesWith.y - itemToMove.h, 0);
     if (!getFirstCollision(layout, fakeItem)) {
-      return moveElement(layout, itemToMove, undefined, fakeItem.y);
+      return moveElement(layout, itemToMove, undefined, fakeItem.y, preventCollision);
     }
   }
 
   // Previously this was optimized to move below the collision directly, but this can cause problems
   // with cascading moves, as an item may actually leapflog a collision and cause a reversal in order.
-  return moveElement(layout, itemToMove, undefined, itemToMove.y + 1);
+  return moveElement(layout, itemToMove, undefined, itemToMove.y + 1, preventCollision);
 }
 
 /**
