Improve builder performance with record lists

client/web/compose/src/components/Common/Grid.vue

@@ -19,6 +19,7 @@
       :responsive="!editable"
       :use-css-transforms="false"
       class="flex-grow-1 d-flex w-100 h-100"
+      @layout-updated="onLayoutUpdated"
     >
       <template
         v-for="(item, index) in layout"
@@ -37,6 +38,8 @@
           :class="{ 'h-100': isStretchable }"
           class="grid-item"
           style="touch-action: none;"
+          @move="onGridAction"
+          @resize="onGridAction"
           @moved="onBlockUpdated(index)"
           @resized="onBlockUpdated(index)"
         >
@@ -44,7 +47,7 @@
             :block="blocks[item.i]"
             :index="index"
             :block-index="item.i"
-            :bounding-rect="boundingRects[index]"
+            :resizing="resizing"
             v-on="$listeners"
           />
         </grid-item>
@@ -64,8 +67,6 @@
 
 <script>
 import { GridLayout, GridItem } from 'vue-grid-layout'
-import { throttle } from 'lodash'
-import { compose } from '@cortezaproject/corteza-js'
 
 export default {
   i18nOptions: {
@@ -93,8 +94,7 @@ export default {
       // all blocks in vue-grid friendly structure
       layout: [],
 
-      // Grid items bounding rect info
-      boundingRects: [],
+      resizing: false,
     }
   },
 
@@ -137,42 +137,31 @@ export default {
     },
   },
 
-  mounted () {
-    window.addEventListener('resize', this.windowResizeThrottledHandler)
-    this.recalculateBoundingRect()
-  },
-
   beforeDestroy () {
-    this.destroyEvents()
     this.setDefaultValues()
   },
 
   methods: {
-    windowResizeThrottledHandler: throttle(function () { this.recalculateBoundingRect() }, 500),
-
-    // Fetch bounding boxes of all grid items
-    recalculateBoundingRect () {
-      this.boundingRects = (this.$refs.items || [])
-        .map(({ $el }) => {
-          const { x, y, width: w, height: h } = $el.getBoundingClientRect()
-          return { x, y, w, h }
-        })
-    },
-
     onBlockUpdated (index) {
       this.$emit('item-updated', index)
-      this.$emit('update:blocks', this.layout.map(
-        ({ x, y, w, h, i }) => new compose.PageBlockMaker({ ...this.blocks[i], xywh: [x, y, w, h] }),
-      ))
+
+      const { x, y, w, h } = this.layout[index]
+      this.blocks[index].xywh = [x, y, w, h]
+    },
+
+    onLayoutUpdated () {
+      this.resizing = false
+    },
+
+    onGridAction () {
+      if (!this.resizing) {
+        this.resizing = true
+      }
     },
 
     setDefaultValues () {
       this.layout = []
-      this.boundingRects = []
-    },
-
-    destroyEvents () {
-      window.removeEventListener('resize', this.windowResizeThrottledHandler)
+      this.resizing = false
     },
   },
 }

client/web/compose/src/components/PageBlocks/CalendarBase.vue

@@ -219,7 +219,7 @@ export default {
       },
     },
 
-    boundingRect: {
+    'block.xywh': {
       deep: true,
       handler () {
         setTimeout(() => {

client/web/compose/src/components/PageBlocks/CalendarConfigurator/CalendarDisplay.c3.js

@@ -15,7 +15,6 @@ const props = {
     },
   }),
   blockIndex: 7,
-  boundingRect: {},
   mode: 'configurator',
   module: null,
   namespace: new compose.Namespace(),

client/web/compose/src/components/PageBlocks/RecordListBase.vue

@@ -316,7 +316,7 @@
           </b-thead>
 
           <draggable
-            v-if="items.length && !processing"
+            v-if="items.length && !processing && !resizing"
             v-model="items"
             :disabled="!inlineEditing || !options.draggable"
             group="items"

client/web/compose/src/components/PageBlocks/Shared/AutomationTab.c3.js

@@ -18,7 +18,6 @@ const props = {
   namespace: new compose.Namespace(),
   module: new compose.Module(),
   field: new compose.ModuleFieldBool(),
-  boundingRect: {},
   blockIndex: -1,
   page: new compose.Page(),
   block: new compose.PageBlock(),

client/web/compose/src/components/PageBlocks/TabsBase.vue

@@ -44,7 +44,7 @@
       >
         <page-block-tab
           v-if="tab.block"
-          v-bind="{ ...$attrs, ...$props, page, block: tab.block, blockIndex: index, boundingRect: { xywh: block.xywh} }"
+          v-bind="{ ...$attrs, ...$props, page, block: tab.block, blockIndex: index }"
           :record="record"
           :module="module"
           :magnified="magnified"

client/web/compose/src/components/PageBlocks/Wrap/Plain.c3.js

@@ -4,7 +4,6 @@ import { compose } from '@cortezaproject/corteza-js'
 
 const props = {
   block: new compose.PageBlock(),
-  boundingRect: {},
 }
 
 export default {

client/web/compose/src/components/PageBlocks/base.vue

@@ -12,12 +12,6 @@ export default {
   },
 
   props: {
-    boundingRect: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-
     blockIndex: {
       type: Number,
       default: -1,
@@ -67,6 +61,12 @@ export default {
       default: false,
     },
 
+    resizing: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
     magnified: {
       type: Boolean,
       required: false,

client/web/compose/src/components/Public/Page/Grid.vue

@@ -4,14 +4,13 @@
     :editable="false"
   >
     <template
-      slot-scope="{ boundingRect, block, index }"
+      slot-scope="{ index, block }"
     >
       <page-block
         v-bind="{ ...$attrs }"
         :page="page"
         :blocks="blocks"
         :block="block"
-        :bounding-rect="boundingRect"
         :block-index="index"
         class="p-2"
         v-on="$listeners"

client/web/compose/src/views/Admin/Modules/Records/View.vue

@@ -144,7 +144,6 @@ export default {
 
       bindParams: {
         page: new compose.Page(),
-        boundingRect: {},
         namespace: this.$attrs.namespace,
       },
 

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -72,7 +72,7 @@
       @item-updated="onBlockUpdated"
     >
       <template
-        slot-scope="{ boundingRect, block, index }"
+        slot-scope="{ index, block, resizing }"
       >
         <div
           :data-test-id="`block-${block.kind}`"
@@ -149,7 +149,7 @@
             :block="block"
             :module="module"
             :record="record"
-            :bounding-rect="boundingRect"
+            :resizing="resizing"
             editable
             class="p-2"
           />

client/web/reporter/src/components/Report/Grid.vue

@@ -35,7 +35,6 @@
           :block="blocks[item.i]"
           :index="index"
           :block-index="item.i"
-          :bounding-rect="boundingRects[index]"
           v-on="$listeners"
         />
       </grid-item>
@@ -78,9 +77,6 @@ export default {
     return {
       // All blocks in vue-grid friendly structure
       grid: undefined,
-
-      // Grid items bounding rect info
-      boundingRects: [],
     }
   },