Merge pull request #778 from VisActor/771-bug-edit-cell-bug

771 bug edit cell bug

common/changes/@visactor/vtable/771-bug-edit-cell-bug_2023-12-21-10-51.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: edit bug #771\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

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/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/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;
+      }
     }
   }