From 270f6184a98466a390d67879d1dd20d4121bce74 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 21 Dec 2023 18:50:34 +0800 Subject: [PATCH 1/3] fix: edit bug #771 --- packages/vtable/examples/list/list.ts | 4 +-- packages/vtable/src/edit/edit-manager.ts | 12 +++---- .../vtable/src/event/listener/scroll-bar.ts | 19 ++-------- .../vtable/src/event/listener/table-group.ts | 20 +++++++---- .../src/state/select/update-position.ts | 17 ++++----- packages/vtable/src/state/state.ts | 36 ++++++++++--------- 6 files changed, 50 insertions(+), 58 deletions(-) diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts index 5af241953..17fc7b371 100644 --- a/packages/vtable/examples/list/list.ts +++ b/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' }; diff --git a/packages/vtable/src/edit/edit-manager.ts b/packages/vtable/src/edit/edit-manager.ts index bffa26be0..b58f875f8 100644 --- a/packages/vtable/src/edit/edit-manager.ts +++ b/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(); diff --git a/packages/vtable/src/event/listener/scroll-bar.ts b/packages/vtable/src/event/listener/scroll-bar.ts index 4d2c5a603..a88d602d6 100644 --- a/packages/vtable/src/event/listener/scroll-bar.ts +++ b/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', () => { diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts index 433dd5f23..1b3e74531 100644 --- a/packages/vtable/src/event/listener/table-group.ts +++ b/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) => { diff --git a/packages/vtable/src/state/select/update-position.ts b/packages/vtable/src/state/select/update-position.ts index 86b8c8916..e36a26e4f 100644 --- a/packages/vtable/src/state/select/update-position.ts +++ b/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的情况 diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 70dce97c3..84897322b 100644 --- a/packages/vtable/src/state/state.ts +++ b/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; + } } } From a5ac50ef0712ec4de2487e839e947ac66a2a613e Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 21 Dec 2023 18:51:16 +0800 Subject: [PATCH 2/3] docs: update changlog of rush --- .../771-bug-edit-cell-bug_2023-12-21-10-51.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/771-bug-edit-cell-bug_2023-12-21-10-51.json diff --git a/common/changes/@visactor/vtable/771-bug-edit-cell-bug_2023-12-21-10-51.json b/common/changes/@visactor/vtable/771-bug-edit-cell-bug_2023-12-21-10-51.json new file mode 100644 index 000000000..9d94069e3 --- /dev/null +++ b/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": "892739385@qq.com" +} \ No newline at end of file From b4693bbcfd419277575725ef1ffe5450881ece5b Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 21 Dec 2023 19:50:38 +0800 Subject: [PATCH 3/3] fix: icon not show bug --- packages/vtable/src/scenegraph/icon/icon-update.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vtable/src/scenegraph/icon/icon-update.ts b/packages/vtable/src/scenegraph/icon/icon-update.ts index 9f99d4511..92bd932c2 100644 --- a/packages/vtable/src/scenegraph/icon/icon-update.ts +++ b/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