From c44fa6a4856b656742bc8c6563caba05a81a0f99 Mon Sep 17 00:00:00 2001
From: Cheng JIANG <cheng.jiang@outlook.fr>
Date: Tue, 1 May 2018 21:07:27 +0200
Subject: [PATCH] improve

---
 package.json                             |  2 +-
 src/components/LayoutGrid/LayoutGrid.vue | 40 ++++++++++++++++++------
 src/store/LayoutGridStore.js             |  3 ++
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index ddc8a49..b0721f4 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "layout-grid",
+  "name": "vue-layout-grid",
   "version": "0.0.1",
   "description": "layout gridster with vue",
   "main": "dist/LayoutGrid.min.js",
diff --git a/src/components/LayoutGrid/LayoutGrid.vue b/src/components/LayoutGrid/LayoutGrid.vue
index 434e1ee..377375e 100644
--- a/src/components/LayoutGrid/LayoutGrid.vue
+++ b/src/components/LayoutGrid/LayoutGrid.vue
@@ -7,7 +7,7 @@
             :margin="margin"
             :is-draggable="editable"
             :is-resizable="editable"
-            @layout-updated="(n) => $emit('updated', n)">
+            @layout-updated="(n) => onLayoutUpdated(n)">
 
             <grid-item
                 v-for="(l, idx) of layout"
@@ -17,10 +17,10 @@
                 :h="l.h"
                 :i="l.i"
                 :min-w="minW"
-                @resize="(i, h, w) => $emit('resize', i, h, w)"
+                @resize="(i, h, w) => onResize(i, h, w)"
                 @move="(i, x, y) => $emit('move', i, x, y)"
                 @moved="(i, x, y) => $emit('moved', i, x, y)"
-                @resized="(i, h, w, hpx, wpx) => $emit('resized', i, h, w, hpx, wpx)"
+                @resized="(i, h, w, hpx, wpx) => onResized(i, h, w, hpx, wpx)"
                 drag-allow-from=".layout-grid-item-header-title"
                 drag-ignore-from=".layout-grid-item-content"
                 :key="l.i">
@@ -75,6 +75,7 @@
                     <div class="layout-grid-item-content" :style="{ height : `${GetHeight(l.h) }` }">
 
                         <component
+                            :ref="GetRef(l.i)"
                             :is="l.is && l.data ? l.is : 'emotion'"
                             v-bind="l.data || null">
                         </component>
@@ -88,7 +89,7 @@
 <script>
     /* eslint-disable */
     import VueGridLayout from 'vue-grid-layout';
-    import {mapMutations, mapState} from 'vuex';
+    import {mapMutations, mapState, mapGetters} from 'vuex';
     import Emotion from './Emotion';
 
     export default {
@@ -120,11 +121,30 @@
             GetHeight(h) {
                 return `${h * this.rowHeight - 30}px`;
             },
+            GetRef(i) {
+                return `LayoutGridItem${i}`;
+            },
             ...mapMutations('LayoutGrid', [
                 'EXPAND_LAYOUT_ITEM',
                 'DELETE_LAYOUT_ITEM',
-                'COLLAPSE_LAYOUT_ITEM'
-            ])
+                'COLLAPSE_LAYOUT_ITEM',
+                'SET_LAYOUT'
+            ]),
+            onResize(i, h, w) {
+                this.$emit('resize', i, h, w);
+
+                this.$refs[this.GetRef(i)][0].safeDraw();
+            },
+            onResized(i, h, w, hpx, wpx) {
+                this.$emit('resized', i, h, w, hpx, wpx);
+
+                this.$refs[this.GetRef(i)][0].safeDraw();
+            },
+            onLayoutUpdated(n) {
+                this.$emit('updated', n);
+
+                this.SET_LAYOUT(n);
+            }
         },
         computed: {
             ...mapState('LayoutGrid', [
@@ -153,10 +173,10 @@
         /*border: 2px dashed #888;*/
 
         /*https://codepen.io/Hawkun/pen/rsIEp*/
-        box-shadow: 2px 0 0 0 #888,
-        0 2px 0 0 #888,
-        2px 2px 0 0 #888, /* Just to fix the corner */ 2px 0 0 0 #888 inset,
-        0 2px 0 0 #888 inset;
+        box-shadow: 2px 0 0 0 #e4e4e4,
+        0 2px 0 0 #e4e4e4,
+        2px 2px 0 0 #e4e4e4, /* Just to fix the corner */ 2px 0 0 0 #e4e4e4 inset,
+        0 2px 0 0 #e4e4e4 inset;
     }
 
     .layout-grid-item-header {
diff --git a/src/store/LayoutGridStore.js b/src/store/LayoutGridStore.js
index 541e9d6..785a30b 100644
--- a/src/store/LayoutGridStore.js
+++ b/src/store/LayoutGridStore.js
@@ -39,6 +39,9 @@ const mutations = {
     },
     COLLAPSE_LAYOUT_ITEM({layout, layoutCache}) {
         cloneLayout(layoutCache, layout);
+    },
+    SET_LAYOUT(state, layout) {
+        state.layout = _.cloneDeep(layout);
     }
 };