add grid lines

src/components/shared/Widget/Base.vue

@@ -36,6 +36,7 @@
 </template>
 
 <script lang="ts">
+import isEqual from 'lodash/fp/isEqual';
 import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
 
 import { debouncedInputHandler } from '@/utils';
@@ -71,20 +72,26 @@ export default class BaseWidget extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly loading!: boolean;
 
-  @Prop({ default: () => {}, type: Function }) readonly onResize!: (rect: DOMRect) => void;
+  @Prop({ default: () => {}, type: Function }) readonly onResize!: (rect: Partial<DOMRect>) => void;
 
   @Ref('container') readonly container!: Vue;
   @Ref('content') readonly content!: HTMLDivElement;
 
-  observer: ResizeObserver | null = null;
-  handleContentResize = debouncedInputHandler(this.onContentResize, 300, { leading: false });
+  private observer: ResizeObserver | null = null;
+  private handleContentResize = debouncedInputHandler(this.onContentResize, 300, { leading: false });
+
+  private rect: Partial<DOMRect> = {
+    width: 0,
+    height: 0,
+  };
 
   get hasHeader(): boolean {
     return !!this.title || !!this.$slots.title;
   }
 
   mounted(): void {
     this.createContentObserver();
+    this.updateRect(this.getClientRect()); // initial
   }
 
   beforeDestroy(): void {
@@ -101,9 +108,23 @@ export default class BaseWidget extends Vue {
     this.observer = null;
   }
 
+  private getClientRect(): DOMRect {
+    return this.container.$el.getBoundingClientRect();
+  }
+
+  private updateRect(rect: Partial<DOMRect>): void {
+    this.rect.width = rect.width;
+    this.rect.height = rect.height;
+  }
+
   onContentResize(): void {
-    const el = this.container.$el;
-    this.onResize(el.getBoundingClientRect());
+    const { width, height } = this.getClientRect();
+    const rect = { width, height };
+    // check necessary update
+    if (!isEqual(rect)(this.rect)) {
+      this.updateRect(rect);
+      this.onResize(this.rect);
+    }
   }
 }
 </script>

src/components/shared/Widget/Grid/Grid.vue

@@ -1,5 +1,6 @@
 <template>
   <grid-layout
+    class="widgets-grid"
     :layout.sync="gridLayout"
     :responsive-layouts="responsiveLayouts"
     :cols="cols"
@@ -14,6 +15,7 @@
     :use-css-transforms="true"
     @breakpoint-changed="onBreakpointChanged"
   >
+    <div v-if="lines" class="grid-lines" :style="gridLinesStyle" />
     <grid-item v-for="widget in gridLayout" :key="widget.i" v-bind="widget">
       <slot
         :name="widget.i"
@@ -67,6 +69,7 @@ export default class WidgetsGrid extends Vue {
   @Prop({ default: false, type: Boolean }) readonly resizable!: boolean;
   @Prop({ default: false, type: Boolean }) readonly compact!: boolean;
   @Prop({ default: false, type: Boolean }) readonly loading!: boolean;
+  @Prop({ default: false, type: Boolean }) readonly lines!: boolean;
   @Prop({ default: () => DEFAULT_COLS, type: Object }) readonly cols!: LayoutConfig;
   @Prop({ default: () => DEFAULT_BREAKPOINTS, type: Object }) readonly breakpoints!: LayoutConfig;
 
@@ -95,6 +98,19 @@ export default class WidgetsGrid extends Vue {
     }, {});
   }
 
+  get gridLinesStyle(): Partial<CSSStyleDeclaration> {
+    const r = this.rowHeight;
+    const m = this.margin / 2;
+    const c = this.cols[this.breakpoint];
+
+    return {
+      backgroundSize: `calc(calc(100% - ${m}px) / ${c}) ${r + m * 2}px`,
+      height: `calc(100% - ${m}px)`,
+      width: `calc(100% - ${m}px)`,
+      margin: `${m}px`,
+    };
+  }
+
   @Watch('responsiveLayouts')
   private updateCurrentLayout(updatedLayouts: ResponsiveLayouts<LayoutWidget>): void {
     const updatedLayout = updatedLayouts[this.breakpoint];
@@ -108,7 +124,7 @@ export default class WidgetsGrid extends Vue {
     this.breakpoint = newBreakpoint;
   }
 
-  onWidgetResize(rect: DOMRectReadOnly, id: string): void {
+  onWidgetResize(rect: DOMRect, id: string): void {
     const layout = cloneDeep(this.gridLayout);
     const widget = layout.find((item) => item.i === id);
 
@@ -125,7 +141,7 @@ export default class WidgetsGrid extends Vue {
     this.gridLayout = layout;
   }
 
-  private emitUpdate(layout: Layout): void {
+  private emitUpdate(layout: Layout<LayoutWidget>): void {
     const update: ResponsiveLayouts<LayoutWidget> = {
       [this.breakpoint]: layout,
     };
@@ -134,3 +150,20 @@ export default class WidgetsGrid extends Vue {
   }
 }
 </script>
+
+<style lang="scss">
+$line: var(--s-color-base-border-secondary);
+
+.widgets-grid {
+  .vue-grid-item.vue-grid-placeholder {
+    background: var(--s-color-status-success-background);
+    opacity: 0.5;
+  }
+
+  .grid-lines {
+    position: absolute;
+    background-image: linear-gradient(to right, $line 1px, transparent 1px), linear-gradient($line 1px, transparent 1px);
+    background-repeat: repeat;
+  }
+}
+</style>

src/views/Swap.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div class="s-flex" style="flex-flow: column; height: 100%">
     <div class="controls s-flex" style="gap: 16px; justify-content: space-between">
       <div class="s-flex">
         <s-checkbox v-model="draggable" label="Draggable" />
         <s-checkbox v-model="resizable" label="Resizable" />
         <s-checkbox v-model="compact" label="Compact" />
+        <s-checkbox v-model="lines" label="Show grid" />
       </div>
       <div class="s-flex">
         <s-checkbox v-model="form" @change="updateWidget(SwapWidgets.Form, $event)" label="Form" />
@@ -22,6 +23,7 @@
       :draggable="draggable"
       :resizable="resizable"
       :compact="compact"
+      :lines="lines"
       :layouts="layouts"
       :loading="parentLoading"
       @update="updateLayoutsConfig"
@@ -72,23 +74,17 @@ enum SwapWidgets {
 }
 
 const LayoutsConfigDefault: ResponsiveLayouts<LayoutWidgetConfig> = {
-  // lg: [
-  //   { x: 0, y: 0, w: 6, h: 20, i: SwapWidgets.Form },
-  //   { x: 6, y: 0, w: 10, h: 20, i: SwapWidgets.Chart },
-  //   { x: 16, y: 0, w: 8, h: 24, i: SwapWidgets.Transactions },
-  //   { x: 0, y: 20, w: 6, h: 6, i: SwapWidgets.Distribution },
-  // ],
   md: [
-    { x: 0, y: 0, w: 4, h: 20, i: SwapWidgets.Form },
-    { x: 4, y: 0, w: 12, h: 20, i: SwapWidgets.Chart },
-    { x: 0, y: 20, w: 4, h: 6, i: SwapWidgets.Distribution },
-    { x: 4, y: 20, w: 8, h: 24, i: SwapWidgets.Transactions },
+    { x: 0, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
+    { x: 4, y: 0, w: 12, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
+    { x: 0, y: 20, w: 4, h: 6, minW: 4, minH: 6, i: SwapWidgets.Distribution },
+    { x: 4, y: 20, w: 8, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
   ],
   sm: [
-    { x: 0, y: 0, w: 4, h: 20, i: SwapWidgets.Form },
-    { x: 4, y: 0, w: 8, h: 20, i: SwapWidgets.Chart },
-    { x: 0, y: 20, w: 4, h: 12, i: SwapWidgets.Distribution },
-    { x: 4, y: 20, w: 8, h: 24, i: SwapWidgets.Transactions },
+    { x: 0, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
+    { x: 4, y: 0, w: 8, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
+    { x: 0, y: 20, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Distribution },
+    { x: 4, y: 20, w: 8, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
   ],
   xs: [
     { x: 0, y: 0, w: 4, h: 20, i: SwapWidgets.Form },
@@ -122,6 +118,7 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   draggable = false;
   resizable = false;
   compact = false;
+  lines = false;
 
   form = true;
   chart = true;
@@ -139,11 +136,10 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   updateWidget(id: SwapWidgets, flag: boolean): void {
     Object.keys(this.layouts).forEach((key) => {
       if (flag) {
-        const defaultWidget = LayoutsConfigDefault[key].find((widget) => widget.i === id);
+        const widget = LayoutsConfigDefault[key].find((widget) => widget.i === id);
 
-        if (defaultWidget) {
-          const updatedWidget = { ...defaultWidget, x: 0, y: 0 }; // add to start point ?
-          this.layouts[key] = [...this.layouts[key], updatedWidget];
+        if (widget) {
+          this.layouts[key] = [...this.layouts[key], { ...widget }];
         }
       } else {
         this.layouts[key] = this.layouts[key].filter((widget) => widget.i !== id);
@@ -188,6 +184,8 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
 
 <style lang="scss" scoped>
 .swap-container {
+  flex: 1;
+
   #form,
   #chart {
     min-height: 502px;