Merge pull request #621 from revolist/column-group-size-preserve

fix: preserver column size during column move
revolist · Nov 4, 2024 · 558124a · 558124a
2 parents 2df5939 + 49b3fcd
commit 558124a
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 15 deletions.
diff --git a/formats/select b/formats/select
diff --git a/packages/angular b/packages/angular
diff --git a/packages/react b/packages/react
diff --git a/packages/vue2 b/packages/vue2
diff --git a/packages/vue3 b/packages/vue3
diff --git a/src/plugins/add-rows-on-past.plugin.ts → src/plugins/add-rows-on-paste.plugin.ts b/src/plugins/add-rows-on-past.plugin.ts → src/plugins/add-rows-on-paste.plugin.ts
@@ -1,4 +1,4 @@
-import { PluginProviders } from '../types/plugin.types';
+import type { PluginProviders } from '../types/plugin.types';
 import { BasePlugin } from './base.plugin';
 
 /**

diff --git a/src/plugins/index.ts b/src/plugins/index.ts
@@ -10,4 +10,4 @@ export * from './groupingRow/grouping.row.plugin';
 export * from './moveColumn/column.drag.plugin';
 export * from './sorting/sorting.plugin';
 export * from './sorting/sorting.sign';
-export * from './add-rows-on-past.plugin';
+export * from './add-rows-on-paste.plugin';
diff --git a/src/plugins/moveColumn/column.drag.plugin.ts b/src/plugins/moveColumn/column.drag.plugin.ts
@@ -7,7 +7,7 @@ import { getItemByPosition } from '@store';
 import { BasePlugin } from '../base.plugin';
 import { ColumnOrderHandler } from './order-column.handler';
 import { dispatch } from '../dispatcher';
-import { ColumnPropProp, ColumnRegular, DimensionSettingsState, PositionItem, DimensionCols, MultiDimensionType, PluginProviders } from '@type';
+import type { ColumnPropProp, ColumnTemplateProp, DimensionSettingsState, PositionItem, DimensionCols, MultiDimensionType, PluginProviders } from '@type';
 import { ON_COLUMN_CLICK } from '../../components/header/header-cell-renderer';
 import { isColGrouping } from '../../utils/column.utils';
 
@@ -27,7 +27,7 @@ export type DragStartEventDetails = {
 type StaticData = {
   startPos: number;
   startItem: PositionItem;
-  data: ColumnRegular;
+  data: ColumnTemplateProp;
   dataEl: HTMLElement;
   scrollEl: Element;
   gridEl: HTMLElement;
@@ -138,6 +138,11 @@ export class ColumnMovePlugin extends BasePlugin {
       const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
       const rgCol = getItemByPosition(this.staticDragData.cols, x);
       this.orderUi.autoscroll(x, dragData.elRect.width);
+
+      // prevent position change if out of bounds
+      if (rgCol.itemIndex >= this.staticDragData.cols.count) {
+        return;
+      }
       this.orderUi.showHandler(
         rgCol.end + dragData.scrollOffset,
         dragData.gridRect.width
@@ -163,20 +168,22 @@ export class ColumnMovePlugin extends BasePlugin {
       const newPosition = getItemByPosition(this.staticDragData.cols, relativePos);
 
       const store = this.providers.column.stores[this.dragData.type].store;
-      const items = [...store.get('items')];
+      const newItems = [...store.get('items')];
 
       // prevent position change if needed
       const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_DRAG_END, {
         ...this.staticDragData,
         startPosition: this.staticDragData.startItem,
         newPosition,
-        newItem: store.get('source')[items[this.staticDragData.startItem.itemIndex]]
+        newItem: store.get('source')[newItems[this.staticDragData.startItem.itemIndex]]
       });
       if (!stopDrag) {
+        const prevItems = [...newItems];
         // todo: if move item out of group remove item from group
-        const toMove = items.splice(this.staticDragData.startItem.itemIndex, 1);
-        items.splice(newPosition.itemIndex, 0, ...toMove);
-        store.set('items', items);
+        const toMove = newItems.splice(this.staticDragData.startItem.itemIndex, 1);
+        newItems.splice(newPosition.itemIndex, 0, ...toMove);
+        store.set('items', newItems);
+        this.providers.dimension.updateSizesPositionByNewDataIndexes(this.dragData.type, newItems, prevItems);
       }
       dispatch(this.revogrid, DRAG_END, this.dragData);
     }

diff --git a/src/store/dimension/dimension.helpers.ts b/src/store/dimension/dimension.helpers.ts
@@ -76,7 +76,7 @@ export const getItemByPosition = (
     positionIndexes,
     originItemSize,
     positionIndexToItem,
-  }: DimensionPosition,
+  }: Pick<DimensionPosition, 'indexes' | 'positionIndexes' | 'originItemSize' | 'positionIndexToItem'>,
   pos: number,
 ) => {
   const item: PositionItem = {
+3 −0		angular.json
+6 −6		package-lock.json
+3 −3		projects/angular-datagrid/src/lib/editor.adapter.ts
+2 −2		projects/angular-datagrid/src/lib/editor.ts
+4 −5		lib/editor.adapter.ts
+2 −2		lib/editor.ts
+9 −9		package-lock.json
+2 −3		lib/editor.adapter.ts
+2 −2		lib/editor.ts
+9 −9		package-lock.json
+3 −4		lib/editor.adapter.ts
+2 −2		lib/editor.ts
+9 −9		package-lock.json