136 refactor last column to resize width is inflexibility

common/changes/@visactor/vtable/136-refactor-last-column-to-resize-width-is-inflexibility_2023-08-02-04-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "refactor: last column to resize width is inflexibility #136\n\n",
+      "type": "patch",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}

packages/vtable/src/components/menu/dom/MenuHandler.ts

@@ -202,9 +202,9 @@ export class MenuHandler {
         // 获取右键菜单信息及位置
         const abstractPos = table._getMouseAbstractPoint(e.event, false);
         let menu = null;
-        if (abstractPos && typeof table.internalProps.menu?.contextMenuItems === 'function') {
+        if (abstractPos.inTable && typeof table.internalProps.menu?.contextMenuItems === 'function') {
           menu = table.internalProps.menu.contextMenuItems(table.getHeaderField(e.col, e.row) as string, e.row);
-        } else if (abstractPos && Array.isArray(table.internalProps.menu?.contextMenuItems)) {
+        } else if (abstractPos.inTable && Array.isArray(table.internalProps.menu?.contextMenuItems)) {
           menu = table.internalProps.menu?.contextMenuItems;
         }
         this._bindToCell(e.col, e.row, 'context-menu', {

packages/vtable/src/components/menu/dom/logic/MenuContainer.ts

@@ -22,6 +22,10 @@ export class MenuContainer {
     this._handler = new EventHandler();
     this._rootElement = createMenuDomElement();
 
+    // 鼠标在菜单上滚动阻止冒泡
+    this._rootElement.addEventListener('wheel', e => {
+      e.stopPropagation();
+    });
     // 绑定交互事件
     this._rootElement?.addEventListener('mousedown', e => {
       e.stopPropagation();

packages/vtable/src/components/menu/dom/logic/MenuElement.ts

@@ -97,6 +97,10 @@ export class MenuElement {
     (this._secondElement as any).sub = true;
     this._showChildrenIndex = -1;
 
+    // 鼠标在菜单上滚动阻止冒泡
+    this._rootElement.addEventListener('wheel', e => {
+      e.stopPropagation();
+    });
     // 绑定交互事件
     this._rootElement?.addEventListener('mousedown', e => {
       e.stopPropagation();
@@ -247,6 +251,10 @@ export class MenuElement {
       }
     });
 
+    // 鼠标在菜单上滚动阻止冒泡
+    this._secondElement?.addEventListener('wheel', e => {
+      e.stopPropagation();
+    });
     this._secondElement?.addEventListener('mousemove', e => {
       if (this._rootElement.classList.contains(HIDDEN_CLASSNAME)) {
         return;

packages/vtable/src/components/tooltip/TooltipHandler.ts

@@ -171,7 +171,7 @@ export class TooltipHandler {
         const abstractPos = table._getMouseAbstractPoint(event, false);
         if (
           !(
-            abstractPos &&
+            abstractPos.inTable &&
             abstractPos.x >= left - 5 &&
             abstractPos.x <= right + 5 &&
             abstractPos.y >= top - 5 &&

packages/vtable/src/core/BaseTable.ts

@@ -1911,11 +1911,11 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   _getMouseAbstractPoint(
     evt: TouchEvent | MouseEvent | undefined,
     isAddScroll = true
-  ): { x: number; y: number } | null {
+  ): { x: number; y: number; inTable: boolean } {
     const table = this;
     let e: MouseEvent | Touch;
     if (!evt) {
-      return null;
+      return { inTable: false, x: undefined, y: undefined };
     }
     if (isTouchEvent(evt)) {
       e = evt.changedTouches[0];
@@ -1925,11 +1925,12 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     const clientX = e.clientX || e.pageX + window.scrollX;
     const clientY = e.clientY || e.pageY + window.scrollY;
     const rect = table.internalProps.canvas.getBoundingClientRect();
+    let inTable = true;
     if (rect.right <= clientX) {
-      return null;
+      inTable = false;
     }
     if (rect.bottom <= clientY) {
-      return null;
+      inTable = false;
     }
 
     const currentWidth = rect.width;
@@ -1942,38 +1943,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
 
     const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0) - table.tableX;
     const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0) - table.tableY;
-    return { x, y };
-  }
-  _getCellEventArgsSet<EVT extends TouchEvent | MouseEvent>(
-    e: EVT
-  ): {
-    abstractPos?: { x: number; y: number };
-    cell?: CellAddress;
-    eventArgs?: CellAddress & { event: EVT; related?: CellAddress };
-  } {
-    //将滚动值考虑进去，转换鼠标坐标值
-    const abstractPos = this._getMouseAbstractPoint(e);
-    if (!abstractPos) {
-      return {};
-    }
-    const cell = this.getCellAt(abstractPos.x, abstractPos.y);
-    if (cell.col < 0 || cell.row < 0) {
-      return {
-        abstractPos,
-        cell
-      };
-    }
-    const eventArgs = {
-      col: cell.col,
-      row: cell.row,
-      event: e,
-      rect: cell.rect
-    };
-    return {
-      abstractPos,
-      cell,
-      eventArgs
-    };
+    return { x, y, inTable };
   }
   getTheme() {
     return this.internalProps.theme;

packages/vtable/src/event/event.ts

@@ -205,8 +205,8 @@ export class EventManeger {
     return false;
   }
 
-  dealColumnResize(eventArgsSet: SceneEvent) {
-    this.table.stateManeger.updateResizeCol(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+  dealColumnResize(xInTable: number, yInTable: number) {
+    this.table.stateManeger.updateResizeCol(xInTable, xInTable);
   }
 
   chechColumnMover(eventArgsSet: SceneEvent): boolean {

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

@@ -10,31 +10,48 @@ import { getIconAndPositionFromTarget } from '../../scenegraph/utils/icon';
 import { cellInRanges } from '../../tools/helper';
 import { Rect } from '../../tools/Rect';
 import type { EventManeger } from '../event';
+import type { BaseTableAPI } from '../../ts-types/base-table';
 
 export function bindTableGroupListener(eventManeger: EventManeger) {
   const table = eventManeger.table;
   const stateManeger = table.stateManeger;
-  table.scenegraph.tableGroup.addEventListener('pointermove', (e: FederatedPointerEvent) => {
-    // console.log('scenegraph pointermove',e.type);
-    // const eventArgsSet: SceneEvent = (table as any).getCellEventArgsSet(e);
+  document.body.addEventListener('pointermove', (e: FederatedPointerEvent) => {
     if (eventManeger.touchSetTimeout) {
       clearTimeout(eventManeger.touchSetTimeout);
       eventManeger.touchSetTimeout = undefined;
     }
-    const eventArgsSet = getCellEventArgsSet(e);
-
+    // const eventArgsSet = getCellEventArgsSet(e);
+    const { x, y } = table._getMouseAbstractPoint(e, false);
     if (stateManeger.interactionState === InteractionState.scrolling) {
       return;
     }
     if (stateManeger.interactionState === InteractionState.grabing) {
       if (stateManeger.isResizeCol()) {
-        eventManeger.dealColumnResize(eventArgsSet);
-        if (eventArgsSet.eventArgs && (table as any).hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN)) {
+        eventManeger.dealColumnResize(x, y);
+        if ((table as any).hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN)) {
           table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN, {
             col: table.stateManeger.columnResize.col,
             colWidth: table.getColWidth(table.stateManeger.columnResize.col)
           });
         }
+      }
+    }
+  });
+  table.scenegraph.tableGroup.addEventListener('pointermove', (e: FederatedPointerEvent) => {
+    // console.log('scenegraph pointermove',e.type);
+    // const eventArgsSet: SceneEvent = (table as any).getCellEventArgsSet(e);
+    if (eventManeger.touchSetTimeout) {
+      clearTimeout(eventManeger.touchSetTimeout);
+      eventManeger.touchSetTimeout = undefined;
+    }
+    const eventArgsSet = getCellEventArgsSet(e);
+
+    if (stateManeger.interactionState === InteractionState.scrolling) {
+      return;
+    }
+    if (stateManeger.interactionState === InteractionState.grabing) {
+      if (stateManeger.isResizeCol()) {
+        /* do nothing */
       } else if (stateManeger.isMoveCol()) {
         eventManeger.dealColumnMover(eventArgsSet);
       } else {
@@ -47,7 +64,7 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
     //   return;
     // }
     // 更新列宽调整pointer
-    if (eventManeger.checkColumnResize(eventArgsSet)) {
+    if (stateManeger.isResizeCol() || eventManeger.checkColumnResize(eventArgsSet)) {
       stateManeger.updateCursor('col-resize');
     } else {
       stateManeger.updateCursor();
@@ -200,9 +217,13 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
   // }
   // });
   table.scenegraph.tableGroup.addEventListener('pointerleave', (e: FederatedPointerEvent) => {
-    stateManeger.updateInteractionState(InteractionState.default);
+    //resize 列宽 当鼠标离开table也需要继续响应
+    if (!stateManeger.isResizeCol()) {
+      stateManeger.updateInteractionState(InteractionState.default);
+      stateManeger.updateCursor();
+    }
     eventManeger.dealTableHover();
-    stateManeger.updateCursor();
+
     const target = e.target;
     if (target && !target.isDescendantsOf(table.scenegraph.tableGroup)) {
       table.fireListeners(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, {
@@ -215,6 +236,10 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
 
   table.scenegraph.tableGroup.addEventListener('pointerupoutside', (e: FederatedPointerEvent) => {
     console.log('pointerupoutside');
+    // pointerup中的逻辑 resize column size 当鼠标在外部松开也应该响应
+    if (stateManeger.isResizeCol()) {
+      endResizeCol(table);
+    }
     stateManeger.updateInteractionState(InteractionState.default);
     eventManeger.dealTableHover();
     eventManeger.dealTableSelect();
@@ -322,19 +347,7 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
       stateManeger.updateInteractionState(InteractionState.default);
       // eventManeger._resizing = false;
       if (stateManeger.isResizeCol()) {
-        table.stateManeger.endResizeCol();
-        if ((table as any).hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END)) {
-          // RESIZE_COLUMN_END事件触发，返回所有列宽
-          const columns = [];
-          // 返回所有列宽信息
-          for (let col = 0; col < table.colCount; col++) {
-            columns.push(table.getColWidth(col));
-          }
-          table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, {
-            col: table.stateManeger.columnResize.col,
-            columns
-          });
-        }
+        endResizeCol(table);
       } else if (stateManeger.isMoveCol()) {
         table.stateManeger.endMoveCol();
         const eventArgsSet: SceneEvent = getCellEventArgsSet(e);
@@ -526,3 +539,19 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
     }
   });
 }
+
+function endResizeCol(table: BaseTableAPI) {
+  table.stateManeger.endResizeCol();
+  if ((table as any).hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END)) {
+    // RESIZE_COLUMN_END事件触发，返回所有列宽
+    const columns = [];
+    // 返回所有列宽信息
+    for (let col = 0; col < table.colCount; col++) {
+      columns.push(table.getColWidth(col));
+    }
+    table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, {
+      col: table.stateManeger.columnResize.col,
+      columns
+    });
+  }
+}

packages/vtable/src/state/state.ts

@@ -77,6 +77,7 @@ export class StateManeger {
   };
   columnResize: {
     col: number;
+    /** x坐标是相对table内坐标 */
     x: number;
     resizing: boolean;
   };
@@ -460,10 +461,10 @@ export class StateManeger {
 
     this.table.scenegraph.updateNextFrame();
   }
-  updateResizeCol(x: number, y: number) {
-    x = Math.ceil(x);
-    y = Math.ceil(y);
-    let detaX = x - this.columnResize.x;
+  updateResizeCol(xInTable: number, yInTable: number) {
+    xInTable = Math.ceil(xInTable);
+    yInTable = Math.ceil(yInTable);
+    let detaX = xInTable - this.columnResize.x;
     // table.getColWidth会使用Math.round，因此这里直接跳过小于1px的修改
     if (Math.abs(detaX) < 1) {
       return;
@@ -497,9 +498,9 @@ export class StateManeger {
     if (this.table.widthMode === 'adaptive' && this.columnResize.col < this.table.colCount - 1) {
       this.table.scenegraph.updateColWidth(this.columnResize.col + 1, -detaX);
     }
-    this.columnResize.x = x;
+    this.columnResize.x = xInTable;
 
-    this.table.scenegraph.component.updateResizeCol(this.columnResize.col, y);
+    this.table.scenegraph.component.updateResizeCol(this.columnResize.col, yInTable);
     if (
       this.columnResize.col < this.table.frozenColCount &&
       !this.table.isPivotTable() &&

packages/vtable/src/ts-types/base-table.ts

@@ -399,7 +399,7 @@ export interface BaseTableAPI {
   _getMouseAbstractPoint: (
     evt: TouchEvent | MouseEvent | undefined,
     isAddScroll?: boolean
-  ) => { x: number; y: number } | null;
+  ) => { x: number; y: number; inTable: boolean };
   getElement: () => HTMLElement;
   getParentElement: () => HTMLElement;