Merge pull request #779 from VisActor/release/0.17.2

[Auto release] release 0.17.2

common/config/rush/version-policies.json

@@ -1 +1 @@
-[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.17.1","mainProject":"@visactor/vtable","nextBump":"patch"}]
+[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"0.17.2","mainProject":"@visactor/vtable","nextBump":"patch"}]

packages/react-vtable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/react-vtable",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "The react version of VTable",
   "keywords": [
     "react",

packages/vtable-editors/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vtable-editors",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "",
   "sideEffects": false,
   "main": "cjs/index.js",

packages/vtable-export/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vtable-export",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "The export util of VTable",
   "author": {
     "name": "VisActor",

packages/vtable/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@visactor/vtable",
   "entries": [
+    {
+      "version": "0.17.2",
+      "tag": "@visactor/vtable_v0.17.2",
+      "date": "Thu, 21 Dec 2023 11:54:58 GMT",
+      "comments": {
+        "none": [
+          {
+            "comment": "fix: edit bug #771\n\n"
+          },
+          {
+            "comment": "fix: add row height round in resetRowHeight"
+          }
+        ]
+      }
+    },
     {
       "version": "0.17.1",
       "tag": "@visactor/vtable_v0.17.1",

packages/vtable/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Change Log - @visactor/vtable
 
-This log was last generated on Thu, 21 Dec 2023 04:01:16 GMT and should not be manually modified.
+This log was last generated on Thu, 21 Dec 2023 11:54:58 GMT and should not be manually modified.
+
+## 0.17.2
+Thu, 21 Dec 2023 11:54:58 GMT
+
+### Updates
+
+- fix: edit bug #771
+
+
+- fix: add row height round in resetRowHeight
 
 ## 0.17.1
 Thu, 21 Dec 2023 04:01:16 GMT

packages/vtable/examples/list/list.ts

@@ -16,7 +16,7 @@ const generatePersons = count => {
 };
 
 export function createTable() {
-  const records = generatePersons(1000);
+  const records = generatePersons(1000000);
   const columns: VTable.ColumnsDefine = [
     {
       field: '',
@@ -316,7 +316,7 @@ export function createTable() {
     bottomFrozenRowCount: 2,
     rightFrozenColCount: 2,
     overscrollBehavior: 'none',
-    // autoWrapText: true,
+    autoWrapText: true,
     heightMode: 'autoHeight'
     // widthMode: 'adaptive'
   };

packages/vtable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vtable",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "canvas table width high performance",
   "keywords": [
     "grid",

packages/vtable/src/edit/edit-manager.ts

@@ -43,12 +43,6 @@ export class EditManeger {
         this.startEditCell(col, row);
       }
     });
-    document.body.addEventListener('pointerdown', (e: PointerEvent) => {
-      const target = e.target;
-      if (this.editingEditor && !this.editingEditor.targetIsOnEditor(target as HTMLElement)) {
-        this.completeEdit();
-      }
-    });
 
     handler.on(this.table.getElement(), 'wheel', (e: WheelEvent) => {
       this.completeEdit();
@@ -86,8 +80,10 @@ export class EditManeger {
       );
     }
   }
-  completeEdit() {
-    if (this.editingEditor) {
+  /** 如果是事件触发调用该接口 请传入原始事件对象 将判断事件对象是否在编辑器本身上面  来处理是否结束编辑 */
+  completeEdit(e?: any) {
+    const target = e?.target;
+    if (this.editingEditor && (!target || (target && !this.editingEditor.targetIsOnEditor(target as HTMLElement)))) {
       const changedValue = this.editingEditor.getValue();
       (this.table as ListTableAPI).changeCellValue(this.editCell.col, this.editCell.row, changedValue);
       this.editingEditor.exit();

packages/vtable/src/event/listener/scroll-bar.ts

@@ -36,14 +36,7 @@ export function bindScrollBarListener(eventManager: EventManager) {
     if (stateManager.interactionState !== InteractionState.scrolling) {
       stateManager.updateInteractionState(InteractionState.scrolling);
     }
-    const eventArgsSet: SceneEvent = getCellEventArgsSet(e);
-    if (
-      scenegraph.table.stateManager.menu.isShow &&
-      (eventArgsSet.eventArgs?.target as any) !== scenegraph.table.stateManager.residentHoverIcon?.icon
-    ) {
-      scenegraph.table.stateManager.hideMenu();
-    }
-
+    scenegraph.table.stateManager.hideMenu();
     (scenegraph.table as ListTableAPI).editorManager?.completeEdit();
   });
   scenegraph.component.vScrollBar.addEventListener('pointerup', () => {
@@ -64,15 +57,7 @@ export function bindScrollBarListener(eventManager: EventManager) {
     if (stateManager.interactionState !== InteractionState.scrolling) {
       stateManager.updateInteractionState(InteractionState.scrolling);
     }
-
-    const eventArgsSet: SceneEvent = getCellEventArgsSet(e);
-    if (
-      scenegraph.table.stateManager.menu.isShow &&
-      (eventArgsSet.eventArgs?.target as any) !== scenegraph.table.stateManager.residentHoverIcon?.icon
-    ) {
-      scenegraph.table.stateManager.hideMenu();
-    }
-
+    scenegraph.table.stateManager.hideMenu();
     (scenegraph.table as ListTableAPI).editorManager?.completeEdit();
   });
   scenegraph.component.hScrollBar.addEventListener('pointerup', () => {

packages/vtable/src/event/listener/table-group.ts

@@ -27,6 +27,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
   const table = eventManager.table;
   const stateManager = table.stateManager;
 
+  // 有被阻止冒泡的场景 就触发不到这里的事件了
   document.body.addEventListener('pointerdown', e => {
     console.log('body pointerdown');
     table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
@@ -280,7 +281,13 @@ export function bindTableGroupListener(eventManager: EventManager) {
       });
     }
   });
+  /**
+   * 两种场景会触发这里的pointerupoutside
+   * 1. 鼠标down和up的场景树节点不一样
+   * 2. 点击到非stage的（非canvas）  其他dom节点
+   */
   table.scenegraph.tableGroup.addEventListener('pointerupoutside', (e: FederatedPointerEvent) => {
+    console.log('pointerupoutside');
     const eventArgsSet: SceneEvent = getCellEventArgsSet(e);
     if (stateManager.menu.isShow && (eventArgsSet.eventArgs?.target as any) !== stateManager.residentHoverIcon?.icon) {
       setTimeout(() => {
@@ -330,9 +337,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
         }
       }
     }
-    if ((table as ListTableAPI).editorManager) {
-      (table as ListTableAPI).editorManager.completeEdit();
-    }
+    (table as ListTableAPI).editorManager?.completeEdit(e.nativeEvent);
     stateManager.updateInteractionState(InteractionState.default);
     eventManager.dealTableHover();
     //点击到表格外部不需要取消选中状态
@@ -362,10 +367,12 @@ export function bindTableGroupListener(eventManager: EventManager) {
       table.scenegraph.updateChartState(null);
     }
     // 处理menu
-    if (stateManager.menu.isShow && (eventArgsSet.eventArgs?.target as any) !== stateManager.residentHoverIcon?.icon) {
+    if ((eventArgsSet.eventArgs?.target as any) !== stateManager.residentHoverIcon?.icon) {
       // 点击在menu外，且不是下拉菜单的icon，移除menu
       stateManager.hideMenu();
     }
+    (table as ListTableAPI).editorManager?.completeEdit(e.nativeEvent);
+
     const hitIcon = (eventArgsSet?.eventArgs?.target as any)?.role?.startsWith('icon')
       ? eventArgsSet.eventArgs.target
       : undefined;
@@ -601,12 +608,13 @@ export function bindTableGroupListener(eventManager: EventManager) {
       }
     }
   });
-  // click outside
+  // stage 的pointerdown监听 如果点击在表格内部 是会被阻止点的tableGroup的pointerdown 监听有stopPropagation
   table.scenegraph.stage.addEventListener('pointerdown', (e: FederatedPointerEvent) => {
     const eventArgsSet: SceneEvent = getCellEventArgsSet(e);
-    if (stateManager.menu.isShow && (eventArgsSet.eventArgs?.target as any) !== stateManager.residentHoverIcon?.icon) {
+    if ((eventArgsSet.eventArgs?.target as any) !== stateManager.residentHoverIcon?.icon) {
       stateManager.hideMenu();
     }
+    (table as ListTableAPI).editorManager?.completeEdit(e.nativeEvent);
   });
   // click outside
   table.scenegraph.stage.addEventListener('pointertap', (e: FederatedPointerEvent) => {

packages/vtable/src/scenegraph/icon/icon-update.ts

@@ -432,7 +432,7 @@ export function resetResidentHoverIcon(col: number, row: number, scene: Scenegra
     (icon: Icon) => icon.attribute.funcType === IconFuncTypeEnum.dropDown,
     // dealer
     (icon: Icon) => {
-      icon.setAttribute('visibleTime', (icon as any).oldVisibleTime);
+      (icon as any).oldVisibleTime && icon.setAttribute('visibleTime', (icon as any).oldVisibleTime);
       icon.setAttribute('opacity', icon.attribute.visibleTime === 'always' ? 1 : 0);
     },
     scene

packages/vtable/src/scenegraph/layout/update-width.ts

@@ -480,7 +480,7 @@ function updateMergeCellContentWidth(
  */
 function resetRowHeight(scene: Scenegraph, row: number) {
   // 获取高度
-  const maxHeight = computeRowHeight(row, 0, scene.table.colCount - 1, scene.table);
+  const maxHeight = Math.round(computeRowHeight(row, 0, scene.table.colCount - 1, scene.table));
   // 更新table行高存储
   scene.table._setRowHeight(row, maxHeight, true);
 

packages/vtable/src/state/select/update-position.ts

@@ -134,7 +134,7 @@ export function updateSelectPosition(
           start: { col, row: cellRange.start.row },
           end: { col: table.colCount - 1, row: cellRange.end.row }
         });
-      } else {
+      } else if (col >= 0 && row >= 0) {
         state.select.ranges.push({
           start: { col, row },
           end: { col, row }
@@ -143,13 +143,14 @@ export function updateSelectPosition(
       cellPos.col = col;
       cellPos.row = row;
       // scenegraph.setCellNormalStyle(col, row);
-      const currentRange = state.select.ranges[state.select.ranges.length - 1];
-      scenegraph.updateCellSelectBorder(
-        currentRange.start.col,
-        currentRange.start.row,
-        currentRange.end.col,
-        currentRange.end.row
-      );
+      const currentRange = state.select.ranges?.[state.select.ranges.length - 1];
+      currentRange &&
+        scenegraph.updateCellSelectBorder(
+          currentRange.start.col,
+          currentRange.start.row,
+          currentRange.end.col,
+          currentRange.end.row
+        );
     }
   } else if (interactionState === InteractionState.grabing && !table.stateManager.isResizeCol()) {
     // 可能有cellPosStart从-1开始grabing的情况

packages/vtable/src/state/state.ts

@@ -841,23 +841,25 @@ export class StateManager {
   }
 
   hideMenu() {
-    this.table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null);
-    this.table.fireListeners(TABLE_EVENT_TYPE.HIDE_MENU, null);
-    this.menu.isShow = false;
-    this.table.scenegraph.component.menu.detach();
-    if (this.residentHoverIcon) {
-      this.table.scenegraph.setIconNormalStyle(
-        this.residentHoverIcon.icon,
-        this.residentHoverIcon.col,
-        this.residentHoverIcon.row
-      );
-      // this.residentHoverIcon.icon.setAttribute('visibleTime', (this.residentHoverIcon.icon as any).oldVisibleTime);
-      // this.residentHoverIcon.icon.setAttribute(
-      //   'opacity',
-      //   this.residentHoverIcon.icon.attribute.visibleTime === 'always' ? 1 : 0
-      // );
-      this.table.scenegraph.resetResidentHoverIcon(this.residentHoverIcon.col, this.residentHoverIcon.row);
-      this.residentHoverIcon = null;
+    if (this.menu.isShow) {
+      this.table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null);
+      this.table.fireListeners(TABLE_EVENT_TYPE.HIDE_MENU, null);
+      this.menu.isShow = false;
+      this.table.scenegraph.component.menu.detach();
+      if (this.residentHoverIcon) {
+        this.table.scenegraph.setIconNormalStyle(
+          this.residentHoverIcon.icon,
+          this.residentHoverIcon.col,
+          this.residentHoverIcon.row
+        );
+        // this.residentHoverIcon.icon.setAttribute('visibleTime', (this.residentHoverIcon.icon as any).oldVisibleTime);
+        // this.residentHoverIcon.icon.setAttribute(
+        //   'opacity',
+        //   this.residentHoverIcon.icon.attribute.visibleTime === 'always' ? 1 : 0
+        // );
+        this.table.scenegraph.resetResidentHoverIcon(this.residentHoverIcon.col, this.residentHoverIcon.row);
+        this.residentHoverIcon = null;
+      }
     }
   }