Fixed scrolling not being set properly by filters (#386)

* Fixed scrolling not being set properly by filters

* v1.8.4

Author: ota-meshi

packages/cheetah-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cheetah-grid",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "Cheetah Grid is a high performance grid engine that works on canvas",
   "keywords": [
     "spreadsheet",

packages/cheetah-grid/src/js/core/DrawGrid.ts

@@ -3229,8 +3229,8 @@ export abstract class DrawGrid extends EventTarget implements DrawGridAPI {
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
 
-    const sel = this[_].selection.select;
-    this[_].focusControl.setFocusRect(this.getCellRect(sel.col, sel.row));
+    const { focus } = this[_].selection;
+    this[_].focusControl.setFocusRect(this.getCellRect(focus.col, focus.row));
   }
   /**
    * Apply the changed scroll size.
@@ -3251,6 +3251,9 @@ export abstract class DrawGrid extends EventTarget implements DrawGridAPI {
       left: scrollable.scrollLeft,
       top: scrollable.scrollTop,
     };
+
+    const { focus } = this[_].selection;
+    this[_].focusControl.setFocusRect(this.getCellRect(focus.col, focus.row));
     return true;
   }
   /**

packages/cheetah-grid/src/js/data/FilterDataSource.ts

@@ -59,7 +59,7 @@ class FilterData<T> {
   _owner: FilterDataSource<T>;
   _dataSourceItr: DataSourceIterator<T>;
   _filter: Filter<T>;
-  _filterdList: (T | undefined)[];
+  _filteredList: (T | undefined)[];
   _queues: (Promise<T | undefined> | null)[];
   _cancel = false;
   constructor(
@@ -70,16 +70,16 @@ class FilterData<T> {
     this._owner = dc;
     this._dataSourceItr = new DataSourceIterator(original);
     this._filter = filter;
-    this._filterdList = [];
+    this._filteredList = [];
     this._queues = [];
   }
   get(index: number): MaybePromiseOrUndef<T> {
     if (this._cancel) {
       return undefined;
     }
-    const filterdList = this._filterdList;
-    if (index < filterdList.length) {
-      return filterdList[index];
+    const filteredList = this._filteredList;
+    if (index < filteredList.length) {
+      return filteredList[index];
     }
     const queues = this._queues;
     const indexQueue = queues[index];
@@ -110,7 +110,7 @@ class FilterData<T> {
     index: number,
     testTimeout: () => boolean
   ): MaybePromiseOrUndef<T> {
-    const filterdList = this._filterdList;
+    const filteredList = this._filteredList;
     const filter = this._filter;
     const dataSourceItr = this._dataSourceItr;
 
@@ -131,9 +131,9 @@ class FilterData<T> {
         return queue;
       }
       if (filter(record)) {
-        filterdList.push(record);
-        if (index < filterdList.length) {
-          return filterdList[index];
+        filteredList.push(record);
+        if (index < filteredList.length) {
+          return filteredList[index];
         }
       }
       if (testTimeout()) {
@@ -151,7 +151,7 @@ class FilterData<T> {
       }
     }
     const dc = this._owner;
-    dc.length = filterdList.length;
+    dc.length = filteredList.length;
     return undefined;
   }
 }

packages/cheetah-grid/src/js/internal/Scrollable.ts

@@ -77,9 +77,9 @@ export class Scrollable {
   }
   private _update(): void {
     let domHeight;
+    const { offsetHeight, offsetWidth } = this._scrollable;
     if (this._height > MAX_SCROLL) {
       const sbSize = style.getScrollBarSize();
-      const { offsetHeight } = this._scrollable;
       const vScrollRange = MAX_SCROLL - offsetHeight + sbSize;
       const rScrollRange = this._height - offsetHeight + sbSize;
       this._p = vScrollRange / rScrollRange;
@@ -91,5 +91,14 @@ export class Scrollable {
 
     this._endPointElement.style.top = `${domHeight.toFixed()}px`;
     this._endPointElement.style.left = `${this._width.toFixed()}px`;
+
+    // Sets the maximum value to the scroll position
+    // if the current scroll position exceeds the maximum value.
+    if (this.scrollTop > this.scrollHeight - offsetHeight) {
+      this.scrollTop = this.scrollHeight - offsetHeight;
+    }
+    if (this.scrollLeft > this.scrollWidth - offsetWidth) {
+      this.scrollLeft = this.scrollWidth - offsetWidth;
+    }
   }
 }

packages/vue-cheetah-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cheetah-grid",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "Cheetah Grid for Vue.js",
   "main": "lib/index.js",
   "unpkg": "dist/vueCheetahGrid.js",