update resizable grid item logic

sora-xor · Mar 21, 2024 · 8971c01 · 8971c01
1 parent ee1a4c0
commit 8971c01
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/src/components/shared/Widget/Base.vue b/src/components/shared/Widget/Base.vue
@@ -39,10 +39,9 @@
 import isEqual from 'lodash/fp/isEqual';
 import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
 
+import type { Size } from '@/types/layout';
 import { debouncedInputHandler } from '@/utils';
 
-type Size = Pick<DOMRect, 'width' | 'height'>;
-
 @Component
 export default class BaseWidget extends Vue {
   /**

diff --git a/src/components/shared/Widget/Grid.vue b/src/components/shared/Widget/Grid.vue
@@ -17,7 +17,7 @@
     @layout-updated="updateLayout"
   >
     <div v-if="lines" class="grid-lines" :style="gridLinesStyle" />
-    <grid-item v-for="widget in layout" :key="widget.i" v-bind="widget">
+    <grid-item v-for="widget in layout" :key="widget.i" :is-resizable="isResizable(widget)" v-bind="widget">
       <slot
         :name="widget.i"
         v-bind="{
@@ -41,7 +41,14 @@ import { GridLayout, GridItem } from 'vue-grid-layout';
 import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
 
 import { Breakpoint, BreakpointKey } from '@/consts/layout';
-import type { Layout, LayoutConfig, ResponsiveLayouts, LayoutWidget, WidgetsVisibilityModel } from '@/types/layout';
+import type {
+  Layout,
+  LayoutConfig,
+  ResponsiveLayouts,
+  LayoutWidget,
+  WidgetsVisibilityModel,
+  Size,
+} from '@/types/layout';
 import { layoutsStorage } from '@/utils/storage';
 
 const DEFAULT_BREAKPOINTS: LayoutConfig = {
@@ -209,11 +216,20 @@ export default class WidgetsGrid extends Vue {
     this.checkLayoutUpdate();
   }
 
+  isResizable(widget: LayoutWidget): boolean {
+    if (!this.resizable) return false;
+
+    const { maxW, maxH, minW, minH } = widget;
+    const fixed = maxW === minW && maxH === minH;
+
+    return !fixed;
+  }
+
   /**
    * Calculate widget layout height
    * Occurs after widget emits resize event with new own rect coordinates
    */
-  onResize(widgetId: string, rect: DOMRect): void {
+  onResize(widgetId: string, rect: Size): void {
     const layout = cloneDeep(this.layout);
     const widget = findWidgetInLayout(layout, widgetId);
 

diff --git a/src/types/layout.ts b/src/types/layout.ts
@@ -1,5 +1,7 @@
 import type { BreakpointKey } from '@/consts/layout';
 
+export type Size = Pick<DOMRect, 'width' | 'height'>;
+
 export type WidgetSize = {
   w: number;
   h: number;

diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -85,7 +85,7 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
       { x: 0, y: 0, w: 6, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
       { x: 0, y: 20, w: 6, h: 4, minW: 4, minH: 4, i: SwapWidgets.Distribution },
       { x: 6, y: 0, w: 9, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
-      { x: 6, y: 20, w: 6, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
+      { x: 6, y: 20, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
       { x: 15, y: 0, w: 9, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
     ],
     md: [