fix: map grid item event params

xiaoluoboding · Jan 7, 2021 · 194a09a · 194a09a
1 parent d40dde0
commit 194a09a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/app/views/WidgetWithGrid.vue b/app/views/WidgetWithGrid.vue
@@ -5,7 +5,8 @@
     :margin="[15, 15]"
     :is-static="isStatic"
     @layout-updated="onLayoutUpdated"
-    @move="onMove"
+    @moved="onMove"
+    @resized="onResize"
   >
     <smart-widget slot="0" simple>
       <div class="layout-center">

diff --git a/src/packages/SmartWidget.vue b/src/packages/SmartWidget.vue
@@ -302,6 +302,7 @@ export default {
 // overwirte vue-grid-layout styles
 .vue-grid-item {
   touch-action: none;
+  box-sizing: border-box;
 }
 .vue-grid-item.vue-grid-placeholder {
   background: #7CBEFF;

diff --git a/src/packages/SmartWidgetGrid.vue b/src/packages/SmartWidgetGrid.vue
@@ -19,7 +19,7 @@
 
 <script>
 import { GridLayout, GridItem } from 'vue-grid-layout'
-import { pick } from '../utils/index'
+import { pick, mapObject } from '../utils/index'
 
 export default {
   name: 'SmartWidgetGrid',
@@ -84,7 +84,8 @@ export default {
         // responsiveLayouts: {},
         // breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
         ...this.$attrs
-      }
+      },
+      gridLayoutItemEvents: {}
     }
   },
   created () {
@@ -100,19 +101,23 @@ export default {
       'breakpoint-changed'
     ]
 
-    const layoutItemEventList = [
-      'move',
-      'resize',
-      'moved',
-      'resized',
-      'container-resized'
-    ]
+    const layoutItemEventMap = {
+      move: ['i', 'newX', 'newY'],
+      resize: ['i', 'newH', 'newW', 'newHPx', 'newWPx'],
+      moved: ['i', 'newX', 'newY'],
+      resized: ['i', 'newH', 'newW', 'newHPx', 'newWPx'],
+      'container-resized': ['i', 'newH', 'newW', 'newHPx', 'newWPx']
+    }
 
     this.gridLayoutEvents = pick(listeners, layoutEventList)
 
-    layoutItemEventList.forEach(item => {
+    Object.keys(layoutItemEventMap).forEach(event => {
+      const eventParams = layoutItemEventMap[event]
       this.gridLayoutItemEvents = Object.assign(this.gridLayoutItemEvents, {
-        [item]: (...args) => this.$emit(item, { ...args })
+        [event]: (...args) => {
+          const params = mapObject(eventParams, (key, idx) => args[idx])
+          this.$emit(event, params)
+        }
       })
     })
   }

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -4,3 +4,10 @@ export const pick = (obj, arr) => {
     return (curr in obj && (acc[curr] = obj[curr]), acc)
   }, {})
 }
+
+// Maps the values of an array to an object using a function.
+export const mapObject = (arr, fn) =>
+  arr.reduce((acc, el, i) => {
+    acc[el] = fn(el, i, arr)
+    return acc
+  }, {})