only compact items that are added after loading

Author: bensladden

dist/vue-responsive-dash.common.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-responsive-dash",
-  "version": "0.3.29",
+  "version": "0.3.30",
   "keywords": [
     "vuejs",
     "vue",

dist/vue-responsive-dash.common.js.map

@@ -16,6 +16,7 @@
         :minRowHeight="minRowHeight"
         :compact="compact"
         :margin="margin"
+        :debug="true"
       >
         <Dash-Item
           v-for="item in layout.items"
@@ -183,6 +184,17 @@ export default {
           ],
         },
       ],
+      dlayouts: [
+        {
+          breakpoint: "xl",
+          numberOfCols: 12,
+          items: [
+            { id: "1", x: 6, y: 3, width: 6, height: 3 },
+            { id: "2", x: 9, y: 0, width: 3, height: 3 },
+            { id: "3", x: 0, y: 0, width: 8, height: 3 },
+          ],
+        },
+      ],
       currentBreakpoint: "",
       origLayout: [],
       testHelper: false,

dist/vue-responsive-dash.umd.js

@@ -22,7 +22,8 @@
       Layout Number of Cols: {{ numberOfCols }} <br />
       placeholder: {{ JSON.stringify(placeholder) }} <br />
       Items: {{ JSON.stringify(itemsFromLayout) }} <br />
-      Height: {{ height }}
+      Height: {{ height }} <br />
+      Attrs: {{ $attrs }}
     </div>
   </div>
 </template>
@@ -154,7 +155,11 @@ export default {
     },
   },
   mounted() {
-    this.l = new Layout(this.$props);
+    let initialItems = [];
+    if (this.$attrs?.items) {
+      initialItems = this.$attrs.items;
+    }
+    this.l = new Layout({ ...this.$props, initialItems });
     //Check if dashboard exists and if not then start a watcher
     if (this.dashboard) {
       this.dashboard.addLayoutInstance(this.l);

dist/vue-responsive-dash.umd.js.map

@@ -19,6 +19,7 @@ export class Layout {
   private _useCssTransforms: boolean;
   private _itemBeingDragged: boolean = false;
   private _itemBeingResized: boolean = false;
+  private _initalItemIds: Array<number | string> = [];
   private _dashItems: DashItem[] = [];
   private _dragStartListeners: Subscription[] = [];
   private _dragListeners: Subscription[] = [];
@@ -43,6 +44,7 @@ export class Layout {
     minColWidth,
     maxColWidth,
     compact,
+    initialItems,
   }: {
     breakpoint: string;
     numberOfCols: number;
@@ -59,6 +61,7 @@ export class Layout {
     minColWidth?: number | boolean;
     maxColWidth?: number | boolean;
     compact?: boolean;
+    initialItems?: Item[];
   }) {
     this._breakpoint = breakpoint;
     this._numberOfCols = numberOfCols;
@@ -137,6 +140,12 @@ export class Layout {
     } else {
       this._compact = Layout.defaults.compact;
     }
+
+    if (typeof initialItems !== "undefined") {
+      this._initalItemIds = initialItems.map((item) => {
+        return item.id;
+      });
+    }
   }
   get breakpoint() {
     return this._breakpoint;
@@ -361,8 +370,11 @@ export class Layout {
     });
 
     //Check that the added item has not caused a collision and if so move the others.
-    let items = this.compactLayout(this.items);
-    this.syncItems(items);
+    //Only do this on items added after initialisation
+    if (!this._initalItemIds.includes(d.id)) {
+      let items = this.compactLayout(this.items);
+      this.syncItems(items);
+    }
   }
   removeDashItem(d: DashItem) {
     let index = this._dashItems.findIndex((item) => {