Merge pull request #642 from VisActor/fix/bug-fix-0.15.1

Fix/bug fix 0.15.1
VisActor · Nov 29, 2023 · 6a3dcef · 6a3dcef
2 parents d0a1fc5 + efea051
commit 6a3dcef
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 21 deletions.
diff --git a/common/changes/@visactor/vtable/fix-bug-fix-0.15.1_2023-11-29-08-52.json b/common/changes/@visactor/vtable/fix-bug-fix-0.15.1_2023-11-29-08-52.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: fix merge cell checkbox update",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git a/packages/vtable/examples/list/list-merge-cell.ts b/packages/vtable/examples/list/list-merge-cell.ts
@@ -1,8 +1,8 @@
 import * as VTable from '../../src';
 import { bindDebugTool } from '../../src/scenegraph/debug-tool';
 const CONTAINER_ID = 'vTable';
-const generatePersons = count => {
-  return Array.from(new Array(count)).map((_, i) => ({
+const generatePersons = i => {
+  return {
     id: i + 1,
     email1: `${i + 1}@xxx.com`,
     name: `小明${i + 1}`,
@@ -12,11 +12,41 @@ const generatePersons = count => {
     sex: i % 2 === 0 ? 'boy' : 'girl',
     work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
     city: 'beijing'
-  }));
+  };
+};
+
+const getRecordsWithAjax = (startIndex, num) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const records = [];
+      for (let i = 0; i < num; i++) {
+        records.push(generatePersons(startIndex + i));
+      }
+      resolve(records);
+    }, 500);
+  });
 };
 
+// create DataSource
+const loadedData = {};
+const dataSource = new VTable.data.CachedDataSource({
+  get(index) {
+    // 每一批次请求100条数据 0-99 100-199 200-299
+    const loadStartIndex = Math.floor(index / 100) * 100;
+    // 判断是否已请求过？
+    if (!loadedData[loadStartIndex]) {
+      const promiseObject = getRecordsWithAjax(loadStartIndex, 100); // return Promise Object
+      loadedData[loadStartIndex] = promiseObject;
+    }
+    return loadedData[loadStartIndex].then(data => {
+      return data[index - loadStartIndex]; //获取批次数据列表中的index对应数据
+    });
+  },
+  length: 10000 //all records count
+});
+
 export function createTable() {
-  const records = generatePersons(10);
+  // const records = generatePersons(1000);
   const columns: VTable.ColumnsDefine = [
     {
       field: 'id',
@@ -74,7 +104,7 @@ export function createTable() {
   ];
   const option = {
     container: document.getElementById(CONTAINER_ID),
-    records,
+    // records,
     columns,
     tooltip: {
       isShowOverflowTextTooltip: true
@@ -108,6 +138,8 @@ export function createTable() {
   const tableInstance = new VTable.ListTable(option);
   window.tableInstance = tableInstance;
 
+  tableInstance.dataSource = dataSource;
+
   bindDebugTool(tableInstance.scenegraph.stage, { customGrapicKeys: ['col', 'row'] });
   // tableInstance.on('sort_click', args => {
   //   tableInstance.updateSortState(

diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts
@@ -20,6 +20,23 @@ export function createTable() {
         }
         // checked: false
       },
+      {
+        title: 'parent',
+        columns: [
+          {
+            field: 'percent',
+            title: 'percent',
+            width: 120,
+            sort: true
+          },
+          {
+            field: 'percent',
+            title: 'percent',
+            width: 120,
+            sort: true
+          }
+        ]
+      },
       {
         field: 'percent',
         title: 'percent',

diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts
@@ -2622,7 +2622,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
               col,
               row,
               table: this,
-              value: this.getCellValue(col, row),
+              value: customMerge.text,
               dataValue: this.getCellOriginValue(col, row),
               cellHeaderPaths: this.getCellHeaderPaths(col, row)
             },

diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts
@@ -13,6 +13,9 @@ import { Rect } from '../../tools/Rect';
 import type { EventManager } from '../event';
 import type { BaseTableAPI } from '../../ts-types/base-table';
 import type { IIconGraphicAttribute } from '../../scenegraph/graphic/icon';
+import { getCellMergeInfo } from '../../scenegraph/utils/get-cell-merge';
+import type { CheckBox, CheckboxAttributes } from '@visactor/vrender-components';
+
 // PointerMove敏感度太高了 记录下上一个鼠标位置 在接收到PointerMove事件时做判断 是否到到触发框选或者移动表头操作的标准，防止误触
 let LastPointerXY: { x: number; y: number };
 let LastBodyPointerXY: { x: number; y: number };
@@ -620,6 +623,23 @@ export function bindTableGroupListener(eventManager: EventManager) {
     const { col, row } = eventArgsSet.eventArgs;
     const cellInfo = table.getCellInfo(col, row);
 
+    const mergeRange = getCellMergeInfo(table, col, row);
+    if (mergeRange) {
+      for (let col = mergeRange.start.col; col <= mergeRange.end.col; col++) {
+        for (let row = mergeRange.start.row; row <= mergeRange.end.row; row++) {
+          const cellGroup = table.scenegraph.getCell(col, row);
+          cellGroup.forEachChildren((checkbox: CheckBox) => {
+            if (checkbox.name === 'checkbox') {
+              checkbox.setAttributes({
+                checked: (e.target.attribute as CheckboxAttributes).checked,
+                indeterminate: (e.target.attribute as CheckboxAttributes).indeterminate
+              });
+            }
+          });
+        }
+      }
+    }
+
     const cellsEvent: MousePointerCellEvent & { checked: boolean } = {
       ...cellInfo,
       event: e.nativeEvent,

diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
@@ -376,7 +376,7 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew
 
   let isMerge;
   let range;
-  if (cellLocation !== 'body' || (define as TextColumnDefine)?.mergeCell) {
+  if (cellLocation !== 'body' || (define as TextColumnDefine)?.mergeCell || table.internalProps.customMergeCell) {
     // 只有表头或者column配置合并单元格后再进行信息获取
     range = table.getCellRange(col, row);
     isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;

diff --git a/packages/vtable/src/scenegraph/group-creater/column-helper.ts b/packages/vtable/src/scenegraph/group-creater/column-helper.ts
@@ -48,7 +48,7 @@ export function createComplexColumn(
   //   // insert cell into column group bottom
   //   y = columnGroup.colHeight;
   // }
-  if (columnGroup.lastChild) {
+  if (columnGroup.lastChild && (columnGroup.lastChild as Group).row === rowStart - 1) {
     y = (columnGroup.lastChild as Group).attribute.y + (columnGroup.lastChild as Group).attribute.height;
   } else if (columnGroup.colHeight) {
     y = columnGroup.colHeight;
@@ -150,10 +150,7 @@ export function createComplexColumn(
         )
       );
       columnGroup.updateColumnRowNumber(row);
-      // const height = table.getRowHeight(row);
-      const height = isMerge
-        ? table.getRowHeight(row) / (range.end.row - range.start.row + 1)
-        : table.getRowHeight(row);
+      const height = table.getRowHeight(row);
       columnGroup.updateColumnHeight(height);
       y += height;
     } else {
@@ -176,12 +173,6 @@ export function createComplexColumn(
         cellTheme
       );
       columnGroup.updateColumnRowNumber(row);
-      // // const height = cellGroup.attribute.height;
-      // const height = isMerge
-      //   ? cellGroup.attribute.height / (range.end.row - range.start.row + 1)
-      //   : cellGroup.attribute.height;
-      // columnGroup.updateColumnHeight(height);
-      // y += height;
       if (isMerge) {
         const rangeHeight = table.getRowHeight(row);
         const rangeWidth = table.getColWidth(col);

diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts
@@ -22,11 +22,11 @@ export async function dynamicSetY(y: number, proxy: SceneProxy) {
 function move(deltaRow: number, screenTopRow: number, screenTopY: number, y: number, proxy: SceneProxy) {
   if (deltaRow > 0) {
     // 向下滚动，顶部cell group移到底部
-    moveCell(deltaRow, 'up', screenTopRow, screenTopY, proxy);
+    moveCell(deltaRow, 'up', screenTopRow, screenTopY, y, proxy);
     proxy.updateBody(y - proxy.deltaY);
   } else if (deltaRow < 0) {
     // 向上滚动，底部cell group移到顶部
-    moveCell(-deltaRow, 'down', screenTopRow, screenTopY, proxy);
+    moveCell(-deltaRow, 'down', screenTopRow, screenTopY, y, proxy);
     proxy.updateBody(y - proxy.deltaY);
   } else {
     // 不改变row，更新body group范围
@@ -39,6 +39,7 @@ async function moveCell(
   direction: 'up' | 'down',
   screenTopRow: number,
   screenTopY: number,
+  y: number,
   proxy: SceneProxy
 ) {
   // 限制count范围
@@ -197,7 +198,23 @@ async function moveCell(
         distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up' // 跳转到底部时，从下向上对齐
       );
     }
-    proxy.table.scenegraph.proxy.deltaY = 0;
+
+    // update body position when click scroll bar
+    if (syncTopRow === proxy.bodyTopRow) {
+      const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.bodyLeftCol, syncTopRow, true);
+      const delaY = cellGroup.attribute.y - y;
+      proxy.table.scenegraph.proxy.deltaY = delaY;
+    } else if (syncBottomRow === proxy.bodyBottomRow) {
+      const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.bodyLeftCol, syncBottomRow, true);
+      const delaY =
+        cellGroup.attribute.y +
+        cellGroup.attribute.height -
+        (proxy.table.tableNoFrameHeight - proxy.table.getFrozenRowsHeight()) -
+        y;
+      proxy.table.scenegraph.proxy.deltaY = -delaY;
+    } else {
+      proxy.table.scenegraph.proxy.deltaY = 0;
+    }
 
     proxy.currentRow = direction === 'up' ? proxy.currentRow + count : proxy.currentRow - count;
     proxy.totalRow = Math.max(