Generate less gaps on drag when verticalCompact: false (#646)

* fix: make verticalCompact: false more elastic (generate less gaps)

* feat: add restoreOnDrag prop

* fix: fix behavior when verticalCompact: false and restoreOnDrag: false

Author: jledentu

src/App.vue

@@ -47,6 +47,7 @@
                     :is-mirrored="mirrored"
                     :prevent-collision="preventCollision"
                     :vertical-compact="compact"
+                    :restore-on-drag="restoreOnDrag"
                     :use-css-transforms="true"
                     :responsive="responsive"
                     @layout-created="layoutCreatedEvent"
@@ -167,6 +168,7 @@
                 responsive: true,
                 preventCollision: false,
                 compact: true,
+                restoreOnDrag: true,
                 rowHeight: 30,
                 colNum: 12,
                 index: 0,

src/components/GridLayout.vue

@@ -82,6 +82,10 @@
                 type: Boolean,
                 default: true
             },
+            restoreOnDrag: {
+                type: Boolean,
+                default: false
+            },
             layout: {
                 type: Array,
                 required: true,
@@ -315,6 +319,13 @@
                     l = {x:0, y:0}
                 }
 
+                if (eventName === "dragstart" && !this.verticalCompact) {
+                    this.positionsBeforeDrag = this.layout.reduce((result, {i, x, y}) => ({
+                        ...result,
+                        [i]: {x, y}
+                    }), {});
+                }
+
                 if (eventName === "dragmove" || eventName === "dragstart") {
                     this.placeholder.i = id;
                     this.placeholder.x = l.x;
@@ -334,11 +345,24 @@
 
                 // Move the element to the dragged location.
                 this.layout = moveElement(this.layout, l, x, y, true, this.preventCollision);
-                compact(this.layout, this.verticalCompact);
+
+                if (this.restoreOnDrag) {
+                    // Do not compact items more than in layout before drag
+                    // Set moved item as static to avoid to compact it
+                    l.static = true;
+                    compact(this.layout, this.verticalCompact, this.positionsBeforeDrag);
+                    l.static = false;
+                } else {
+                    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);
+                if (eventName === 'dragend') {
+                    delete this.positionsBeforeDrag;
+                    this.$emit('layout-updated', this.layout);
+                }
             },
             resizeEvent: function (eventName, id, x, y, h, w) {
                 let l = getLayoutItem(this.layout, id);

src/helpers/utils.js

@@ -75,9 +75,10 @@ export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
  * @param  {Array} layout Layout.
  * @param  {Boolean} verticalCompact Whether or not to compact the layout
  *   vertically.
+ * @param {Object} minPositions
  * @return {Array}       Compacted Layout.
  */
-export function compact(layout: Layout, verticalCompact: Boolean): Layout {
+export function compact(layout: Layout, verticalCompact: Boolean, minPositions): Layout {
     // Statics go in the compareWith array right away so items flow around them.
   const compareWith = getStatics(layout);
   // We go through the items by row and column.
@@ -90,7 +91,7 @@ export function compact(layout: Layout, verticalCompact: Boolean): Layout {
 
     // Don't move static elements
     if (!l.static) {
-      l = compactItem(compareWith, l, verticalCompact);
+      l = compactItem(compareWith, l, verticalCompact, minPositions);
 
       // Add to comparison array. We only collide with items before this one.
       // Statics are already in this array.
@@ -110,12 +111,17 @@ export function compact(layout: Layout, verticalCompact: Boolean): Layout {
 /**
  * Compact an item in the layout.
  */
-export function compactItem(compareWith: Layout, l: LayoutItem, verticalCompact: boolean): LayoutItem {
+export function compactItem(compareWith: Layout, l: LayoutItem, verticalCompact: boolean, minPositions): LayoutItem {
   if (verticalCompact) {
     // Move the element up as far as it can go without colliding.
     while (l.y > 0 && !getFirstCollision(compareWith, l)) {
       l.y--;
     }
+  } else if (minPositions) {
+    const minY = minPositions[l.i].y;
+    while (l.y > minY && !getFirstCollision(compareWith, l)) {
+      l.y--;
+    }
   }
 
   // Move it down, and keep moving it down if it's colliding.

website/docs/guide/properties.md

@@ -100,6 +100,14 @@ Says if the container height should swells and contracts to fit contents.
 
 Says if the layout should be compact vertically.
 
+### restoreOnDrag
+    
+* type: `Boolean`
+* required: `false`
+* default: `false`
+
+Says if the moved grid items should be restored after an item has been dragged over.
+
 ### preventCollision
 
 * type: `Boolean`