Merge pull request #639 from revolist/#638

#638 - do not correct scroll

src/components/revoGrid/revo-grid.tsx

@@ -1183,7 +1183,9 @@ export class RevoGridComponent {
         break;
       case 'source':
         type = 'rgRow';
-        /** applied for source only for cross compatability between plugins */
+        /**
+         * Applied for source only for cross compatability between plugins
+         */
         const beforesourceset = this.beforesourceset.emit({
           type,
           source: newVal,
@@ -1198,7 +1200,9 @@ export class RevoGridComponent {
     const newSource = [...beforesourceset.detail.source];
     this.dataProvider.setData(newSource, type, this.disableVirtualY);
 
-    /** applied for source only for cross compatability between plugins */
+    /** 
+     * Applied for source only for cross compatability between plugins
+     */
     if (watchName === 'source') {
       this.aftersourceset.emit({
         type,

src/components/scroll/revogr-viewport-scroll.tsx

@@ -84,9 +84,6 @@ export class RevogrViewportScroll implements ElementScroll {
 
   @Element() horizontalScroll: HTMLElement;
 
-  private oldValY = this.contentHeight;
-  private oldValX = this.contentWidth;
-
   private verticalScroll?: HTMLElement;
   private header?: HTMLElement;
   private footer?: HTMLElement;
@@ -285,18 +282,6 @@ export class RevogrViewportScroll implements ElementScroll {
   }
 
   async componentDidRender() {
-    // scroll update if number of rows changed
-    if (this.contentHeight < this.oldValY && this.verticalScroll) {
-      this.verticalScroll.scrollTop += this.contentHeight - this.oldValY;
-    }
-    this.oldValY = this.contentHeight;
-
-    // scroll update if number of cols changed
-    if (this.contentWidth < this.oldValX) {
-      this.horizontalScroll.scrollLeft += this.contentWidth - this.oldValX;
-    }
-    this.oldValX = this.contentWidth;
-
     this.localScrollService.setParams(
       {
         contentSize: this.contentHeight,

src/plugins/sorting/sorting.plugin.ts

@@ -7,12 +7,11 @@ import type {
   Order,
   CellCompareFunc,
   ColumnRegular,
-  InitialHeaderClick,
   DataType,
   DimensionRows,
   PluginProviders,
 } from '@type';
-import type { SortingOrder, SortingOrderFunction, ColumnSetEvent } from './sorting.types';
+import type { SortingOrder, SortingOrderFunction } from './sorting.types';
 import { getCellRaw, getColumnByProp } from '../../utils/column.utils';
 import { rowTypes } from '@store';
 import { sortIndexByItems } from './sorting.func';
@@ -35,16 +34,17 @@ export class SortingPlugin extends BasePlugin {
   sortingFunc?: SortingOrderFunction;
   sortingPromise: (() => void) | null = null;
   postponeSort = debounce(
-    (order?: SortingOrder, comparison?: SortingOrderFunction) =>
-      this.runSorting(order, comparison),
+    (order?: SortingOrder, comparison?: SortingOrderFunction, ignoreViewportUpdate?: boolean) =>
+      this.runSorting(order, comparison, ignoreViewportUpdate),
     50,
   );
 
   runSorting(
     order?: SortingOrder,
     comparison?: SortingOrderFunction,
+    ignoreViewportUpdate?: boolean
   ) {
-    this.sort(order, comparison);
+    this.sort(order, comparison, undefined, ignoreViewportUpdate);
     this.sortingPromise?.();
     this.sortingPromise = null;
   }
@@ -55,12 +55,9 @@ export class SortingPlugin extends BasePlugin {
   ) {
     super(revogrid, providers);
 
-    const beforeanysource = ({
+    this.addEventListener('beforeanysource', ({
       detail: { type },
-    }: CustomEvent<{
-      type: DimensionRows;
-      source: any[];
-    }>) => {
+    }) => {
       // if sorting was provided - sort data
       if (!!this.sorting && this.sortingFunc) {
         const beforeEvent = this.emit('beforesorting', { type });
@@ -69,10 +66,10 @@ export class SortingPlugin extends BasePlugin {
         }
         this.startSorting(this.sorting, this.sortingFunc);
       }
-    };
-    const aftercolumnsset = ({
+    });
+    this.addEventListener('aftercolumnsset', ({
       detail: { order },
-    }: CustomEvent<ColumnSetEvent>) => {
+    }) => {
       const columns = this.providers.column.getColumns();
       const sortingFunc: SortingOrderFunction = {};
 
@@ -83,9 +80,9 @@ export class SortingPlugin extends BasePlugin {
         );
         sortingFunc[prop] = cmp;
       }
-      this.runSorting(order, sortingFunc);
-    };
-    const headerclick = (e: CustomEvent<InitialHeaderClick>) => {
+      this.startSorting(order, sortingFunc, true);
+    });
+    this.addEventListener('beforeheaderclick', (e) => {
       if (e.defaultPrevented) {
         return;
       }
@@ -99,14 +96,10 @@ export class SortingPlugin extends BasePlugin {
         e.detail.index,
         e.detail?.originalEvent?.shiftKey,
       );
-    };
-
-    this.addEventListener('beforeanysource', beforeanysource);
-    this.addEventListener('aftercolumnsset', aftercolumnsset);
-    this.addEventListener('beforeheaderclick', headerclick);
+    });
   }
 
-  startSorting(order?: SortingOrder, sortingFunc?: SortingOrderFunction) {
+  startSorting(order?: SortingOrder, sortingFunc?: SortingOrderFunction, ignoreViewportUpdate?: boolean) {
     if (!this.sortingPromise) {
       // add job before render
       this.revogrid.jobsBeforeRender.push(
@@ -115,7 +108,7 @@ export class SortingPlugin extends BasePlugin {
         }),
       );
     }
-    this.postponeSort(order, sortingFunc);
+    this.postponeSort(order, sortingFunc, ignoreViewportUpdate);
   }
 
   getComparer(column: ColumnRegular | undefined, order: Order): CellCompareFunc | undefined {
@@ -206,6 +199,7 @@ export class SortingPlugin extends BasePlugin {
     sorting?: SortingOrder,
     sortingFunc?: SortingOrderFunction,
     types: DimensionRows[] = rowTypes,
+    ignoreViewportUpdate = false
   ) {
     // if no sorting - reset
     if (!Object.keys(sorting || {}).length) {
@@ -249,7 +243,10 @@ export class SortingPlugin extends BasePlugin {
         });
         // take currently visible row indexes
         const newItems = storeService.store.get('items');
-        this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItems, prevItems);
+        if (!ignoreViewportUpdate) {
+          this.providers.dimension
+            .updateSizesPositionByNewDataIndexes(type, newItems, prevItems);
+        }
       }
     }
     this.emit('aftersortingapply');

src/serve/data.js

@@ -115,14 +115,17 @@ export function generateFakeDataObject(config = {}) {
           'custom-row-index': rowIndex
         };
       }
+
+      columns[rgCol].rowDrag = true;
+
       // columns[rgCol].cellParser = () => 'a';
-      columns[rgCol].cellTemplate = (h, { value }) => {
+      // columns[rgCol].cellTemplate = (h, { value }) => {
       //   // delay
-      //   // for(let i = 0; i < 10000000; i++) {
-      //   //   // do nothing, this is just to slow down to test performance
-      //   // }
-        return value;
-      }
+      //   for(let i = 0; i < 10000000; i++) {
+      //     // do nothing, this is just to slow down to test performance
+      //   }
+      //   return value;
+      // }
     }
     // apply config
     if (rgCol === rowDrag) {

src/services/data.provider.ts

@@ -24,6 +24,8 @@ export type RowDataSources = {
 
 /**
  * Data source provider
+ * 
+ * @dependsOn DimensionProvider
  */
 
 export class DataProvider {
@@ -65,14 +67,34 @@ export class DataProvider {
   }
 
   changeOrder({ rowType = 'rgRow', from, to }: { rowType: DimensionRows, from: number; to: number }) {
-    const service = this.stores[rowType];
-    const items = [...service.store.get('items')];
-    const prevItems = [...items];
-
-    const toMove = items.splice(from, 1);
-    items.splice(to, 0, ...toMove);
-    this.dimensionProvider.updateSizesPositionByNewDataIndexes(rowType, items, prevItems);
-    service.setData({ items });
+    const storeService = this.stores[rowType];
+
+    // take currently visible row indexes
+    const newItemsOrder = [...storeService.store.get('proxyItems')];
+    const prevItems = storeService.store.get('items');
+
+    // take out
+    const toMove = newItemsOrder.splice(
+      newItemsOrder.indexOf(prevItems[from]), // get index in proxy
+      1
+    );
+    // insert before
+    newItemsOrder.splice(
+      newItemsOrder.indexOf(prevItems[to]),  // get index in proxy
+      0,
+      ...toMove
+    );
+    storeService.setData({
+      proxyItems: newItemsOrder,
+    });
+
+    // take currently visible row indexes
+    const newItems = storeService.store.get('items');
+    this.dimensionProvider.updateSizesPositionByNewDataIndexes(
+      rowType,
+      newItems,
+      prevItems
+    );
   }
 
   setCellData(

src/services/dimension.provider.ts

@@ -12,7 +12,7 @@ import {
   gatherTrimmedItems,
   Trimmed,
 } from '@store';
-import {
+import type {
   DimensionCols,
   DimensionType,
   MultiDimensionType,
@@ -30,6 +30,8 @@ export type DimensionConfig = {
 /**
  * Dimension provider
  * Stores dimension information and custom sizes
+ * 
+ * @dependsOn ViewportProvider
  */
 export default class DimensionProvider {
   readonly stores: DimensionStoreCollection;
@@ -86,7 +88,11 @@ export default class DimensionProvider {
       };
     }
     this.stores[type].setDimensionSize(newSizes);
-    this.updateViewport(type, true);
+    this.setViewPortCoordinate({
+      coordinate: this.viewports.stores[type].lastCoordinate,
+      type,
+      force: true,
+    });
   }
 
   setItemCount(realCount: number, type: MultiDimensionType) {
@@ -103,11 +109,15 @@ export default class DimensionProvider {
     const allTrimmed = gatherTrimmedItems(trimmed);
     const dimStoreType = this.stores[type];
     dimStoreType.setStore({ trimmed: allTrimmed });
-    this.updateViewport(type, true);
+    this.setViewPortCoordinate({
+      coordinate: this.viewports.stores[type].lastCoordinate,
+      type,
+      force: true,
+    });
   }
 
   /**
-   * Sets dimension data and view port coordinate
+   * Sets dimension data and viewport coordinate
    * @param itemCount
    * @param type - dimension type
    * @param noVirtual - disable virtual data
@@ -122,7 +132,10 @@ export default class DimensionProvider {
         virtualSize: dimension.realSize,
       });
     }
-    this.updateViewport(type);
+    this.setViewPortCoordinate({
+      coordinate: this.viewports.stores[type].lastCoordinate,
+      type,
+    });
   }
 
   /**
@@ -192,14 +205,6 @@ export default class DimensionProvider {
     return { y, x };
   }
 
-  updateViewport(type: MultiDimensionType, force = false) {
-    this.setViewPortCoordinate({
-      coordinate: this.viewports.stores[type].lastCoordinate,
-      type,
-      force,
-    });
-  }
-
   setViewPortCoordinate({
     coordinate,
     type,
@@ -252,6 +257,10 @@ export default class DimensionProvider {
       newItemsOrder,
       prevItemsOrder,
     );
-    this.updateViewport(type, true);
+    this.setViewPortCoordinate({
+      coordinate: this.viewports.stores[type].lastCoordinate,
+      type,
+      force: true,
+    });
   }
 }

src/store/dataSource/data.proxy.ts

@@ -3,6 +3,11 @@ import type { Observable, PluginSubscribe } from '../../utils';
 
 type State = DSourceState<any, any>;
 
+/**
+ * Todo:
+ * Refactor proxy plugin: when items changed outside proxy get recalculated
+ */
+
 /**
  * Proxy plugin for data source.
  *