3734 refactor unify event listen use vrender

common/changes/@visactor/vtable/3734-refactor-unify-event-listen-use-vrender_2025-04-15-09-07.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "refactor: change event listener with vglobal #3734\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}

packages/vtable-editors/src/list-editor.ts

@@ -37,8 +37,6 @@ export class ListEditor implements IEditor {
       // input.style.boxShadow = 'none';
     });
 
-
-
     this.element = select;
 
     // create option tags
@@ -86,16 +84,15 @@ export class ListEditor implements IEditor {
   }
 
   adjustPosition(rect: RectProps) {
-
     //使border均分input位置rect的上下左右
     const borderWidth = 2;
     const top = rect.top - borderWidth / 2;
     const left = rect.left - borderWidth / 2;
     const width = rect.width + borderWidth;
     const height = rect.height + borderWidth;
 
-    this.element.style.top =top + 'px';
-    this.element.style.left =left + 'px';
+    this.element.style.top = top + 'px';
+    this.element.style.left = left + 'px';
     this.element.style.width = width + 'px';
     this.element.style.height = height + 'px';
   }

packages/vtable-editors/src/textArea-editor.ts

@@ -83,8 +83,6 @@ export class TextAreaEditor implements IEditor {
   }
 
   adjustPosition(rect: RectProps) {
-
-
     //使border均分input位置rect的上下左右
     const borderWidth = 2;
     const top = rect.top - borderWidth / 2;

packages/vtable-plugins/demo/menu.ts

@@ -35,6 +35,10 @@ export const menus = [
     path: 'combine-plugins',
     name: 'combine-plugins'
   },
+  {
+    path: 'rotate-table',
+    name: 'rotate-table'
+  },
   {
     menu: 'pivot-plugin',
     children: [

packages/vtable-plugins/demo/rotate-table/rotate-table.ts

@@ -0,0 +1,162 @@
+import * as VTable from '@visactor/vtable';
+import { bindDebugTool } from '@visactor/vtable/es/scenegraph/debug-tool';
+import * as VTable_editors from '@visactor/vtable-editors';
+
+import { RotateTablePlugin } from '../../src';
+const CONTAINER_ID = 'vTable';
+const generatePersons = count => {
+  return Array.from(new Array(count)).map((_, i) => ({
+    id: i + 1,
+    email1: `${i + 1}@xxx.com`,
+    name: `小明${i + 1}`,
+    lastName: '王',
+    date1: '2022年9月1日',
+    tel: '000-0000-0000',
+    sex: i % 2 === 0 ? 'boy' : 'girl',
+    work: i % 2 === 0 ? 'back-end engineer' + (i + 1) : 'front-end engineer' + (i + 1),
+    city: 'beijing',
+    image:
+      '<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 10V4H8V38L14 35" stroke="#f5a623" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 44V10H40V44L27 37.7273L14 44Z" fill="#f5a623" stroke="#f5a623" stroke-width="1" stroke-linejoin="round"/></svg>'
+  }));
+};
+
+export function createTable() {
+  const input_editor = new VTable_editors.InputEditor();
+  VTable.register.editor('input-editor', input_editor);
+
+  const records = generatePersons(40);
+  const columns: VTable.ColumnsDefine = [
+    {
+      field: 'id',
+      title: 'ID',
+      width: 'auto',
+      minWidth: 50,
+      sort: true,
+      headerEditor: 'input-editor',
+      editor: 'input-editor'
+    },
+    {
+      field: 'email1',
+      title: 'email',
+      width: 200,
+      sort: true,
+      style: {
+        underline: true,
+        underlineDash: [2, 0],
+        underlineOffset: 3
+      }
+    },
+    {
+      field: 'date1',
+      title: 'birthday',
+      width: 200
+    },
+    {
+      field: 'sex',
+      title: 'sex',
+      width: 100
+    },
+    {
+      field: 'id',
+      title: 'ID',
+      width: 'auto',
+      minWidth: 50,
+      sort: true,
+      headerEditor: 'input-editor',
+      editor: 'input-editor'
+    },
+    {
+      field: 'email1',
+      title: 'email',
+      width: 200,
+      sort: true,
+      style: {
+        underline: true,
+        underlineDash: [2, 0],
+        underlineOffset: 3
+      }
+    },
+    {
+      field: 'date1',
+      title: 'birthday',
+      width: 200
+    },
+    {
+      field: 'sex',
+      title: 'sex',
+      width: 100
+    },
+    {
+      field: 'id',
+      title: 'ID',
+      width: 'auto',
+      minWidth: 50,
+      sort: true,
+      headerEditor: 'input-editor',
+      editor: 'input-editor'
+    },
+    {
+      field: 'email1',
+      title: 'email',
+      width: 200,
+      sort: true,
+      style: {
+        underline: true,
+        underlineDash: [2, 0],
+        underlineOffset: 3
+      }
+    },
+    {
+      field: 'date1',
+      title: 'birthday',
+      width: 200
+    },
+    {
+      field: 'sex',
+      title: 'sex',
+      width: 100
+    }
+  ];
+
+  const rotatePlugin = new RotateTablePlugin();
+  const option: VTable.ListTableConstructorOptions = {
+    records,
+    columns,
+    rowSeriesNumber: {},
+    select: {
+      outsideClickDeselect: true,
+      headerSelectMode: 'body'
+    },
+    autoWrapText: true,
+    editor: 'input-editor',
+    overscrollBehavior: 'none',
+    menu: {
+      contextMenuItems: ['copy', 'paste', 'delete', '...']
+    },
+    plugins: [rotatePlugin]
+  };
+  const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID)!, option);
+  window.tableInstance = tableInstance;
+  window.transform = function () {
+    const bigContainer: HTMLElement = document.getElementsByClassName('container')[0] as HTMLElement;
+    const bigContainerWidth = bigContainer.clientWidth;
+    const bigContainerHeight = bigContainer.clientHeight;
+    bigContainer.style.width = `${bigContainerHeight}px`;
+    bigContainer.style.height = `${bigContainerWidth}px`;
+    tableInstance.rotate90WithTransform(bigContainer);
+  };
+  window.cancelTransform = function () {
+    const bigContainer: HTMLElement = document.getElementsByClassName('container')[0] as HTMLElement;
+
+    const bigContainerWidth = bigContainer.clientWidth;
+    const bigContainerHeight = bigContainer.clientHeight;
+    bigContainer.style.width = `${bigContainerHeight}px`;
+    bigContainer.style.height = `${bigContainerWidth}px`;
+    tableInstance.cancelTransform(bigContainer);
+  };
+  bindDebugTool(tableInstance.scenegraph.stage, {
+    customGrapicKeys: ['col', 'row']
+  });
+
+  // tableInstance.scenegraph.temporarilyUpdateSelectRectStyle({stroke: false})
+}

packages/vtable-plugins/src/excel-edit-cell-keyboard.ts

@@ -1,5 +1,3 @@
-import type { CellRange } from '@visactor/vtable/es/ts-types';
-import type { BaseTableAPI } from '@visactor/vtable/es/ts-types/base-table';
 import * as VTable from '@visactor/vtable';
 import type { TableEvents } from '@visactor/vtable/src/core/TABLE_EVENT_TYPE';
 import type { EventArg } from './types';

packages/vtable-plugins/src/index.ts

@@ -9,3 +9,4 @@ export * from './excel-edit-cell-keyboard';
 export * from './types';
 export * from './focus-highlight';
 export * from './table-carousel-animation';
+export * from './rotate-table';

packages/vtable-plugins/src/rotate-table.ts

@@ -0,0 +1,121 @@
+import {
+  matrixAllocate,
+  transformPointForCanvas,
+  mapToCanvasPointForCanvas,
+  registerGlobalEventTransformer,
+  registerWindowEventTransformer,
+  vglobal
+} from '@visactor/vtable/es/vrender';
+import type { BaseTable } from '@visactor/vtable/src/core/BaseTable';
+import * as VTable from '@visactor/vtable';
+import type { TableEvents } from '@visactor/vtable/src/core/TABLE_EVENT_TYPE';
+import type { EventArg } from './types';
+// export type IRotateTablePluginOptions = {
+//   // 旋转角度
+//   rotate?: number;
+// };
+/**
+ * 旋转表格插件。
+ * 业务层旋转功能没有使用收系统接口的话，用的transform:'rotate(90deg)'的设置来达到旋转的目的。vtable及vrender都没有进行坐标处理，这样就会导致交互错乱。
+ * 所以需要进行坐标转换，将旋转后的坐标转换后作为VRender及VTable逻辑中用到的坐标。
+ * 这里使用transform:'rotate(90deg)'的设置来达到旋转的目的。 其他角度应该也是可以实现的，请自行扩展这个插件并兼容
+ */
+export class RotateTablePlugin implements VTable.plugins.IVTablePlugin {
+  id = 'rotate-table';
+  runTime = [VTable.TABLE_EVENT_TYPE.INITIALIZED];
+  table: VTable.ListTable;
+  // pluginOptions: IRotateTablePluginOptions;
+  constructor() {
+    // this.pluginOptions = pluginOptions;
+  }
+  run(...args: [EventArg, TableEvents[keyof TableEvents] | TableEvents[keyof TableEvents][], VTable.BaseTableAPI]) {
+    const table: VTable.BaseTableAPI = args[2];
+    this.table = table as VTable.ListTable;
+    //将函数rotate90WithTransform绑定到table实例上
+    this.table.rotate90WithTransform = rotate90WithTransform.bind(this.table);
+    this.table.cancelTransform = cancelTransform.bind(this.table);
+  }
+
+  release() {
+    // 移除绑定的事件
+  }
+}
+
+/**
+ * 业务层旋转功能没有使用收系统接口的话，用的transform:'rotate(90deg)'的设置来达到旋转的目的。vtable及vrender都没有进行坐标处理，这样就会导致交互错乱。
+ * 所以需要进行坐标转换，将旋转后的坐标转换后作为VRender及VTable逻辑中用到的坐标。
+ */
+export function rotate90WithTransform(this: BaseTable, rotateDom: HTMLElement) {
+  const rotateCenter = Math.min(rotateDom.clientWidth, rotateDom.clientHeight) / 2;
+  const domRect = this.getElement().getBoundingClientRect();
+  const x1 = domRect.left;
+  const y1 = domRect.top;
+  const x2 = domRect.right;
+  const y2 = domRect.bottom;
+  rotateDom.style.transform = 'rotate(90deg)';
+  rotateDom.style.transformOrigin = `${rotateCenter}px ${rotateCenter}px`;
+
+  const getRect = () => {
+    return {
+      x1,
+      y1,
+      x2,
+      y2
+    };
+  };
+  const getMatrix = () => {
+    const matrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
+    matrix.translate(x1, y1);
+    const centerX = rotateCenter - x1;
+    const centerY = rotateCenter - y1;
+    matrix.translate(centerX, centerY);
+    matrix.rotate(Math.PI / 2);
+    matrix.translate(-centerX, -centerY);
+    return matrix;
+  };
+  registerGlobalEventTransformer(vglobal, this.getElement(), getMatrix, getRect, transformPointForCanvas);
+  registerWindowEventTransformer(
+    this.scenegraph.stage.window,
+    this.getElement(),
+    getMatrix,
+    getRect,
+    transformPointForCanvas
+  );
+  vglobal.mapToCanvasPoint = mapToCanvasPointForCanvas;
+  //transformPointForCanvas和mapToCanvasPointForCanvas时相对应的
+  //具体逻辑在 VRender/packages/vrender-core/src/common/event-transformer.ts中
+  // 可以自定义这两个函数 来修改事件属性，transformPointForCanvas中将坐标转换后存放了_canvasX _canvasY，mapToCanvasPointForCanvas中加以利用
+  // 在VTable的touch文件中，利用到了_canvasX _canvasY 所以如果自定义上面两个函数也需提供_canvasX _canvasY
+}
+export function cancelTransform(this: BaseTable, rotateDom: HTMLElement) {
+  rotateDom.style.transform = 'none';
+  rotateDom.style.transformOrigin = 'none';
+  const domRect = this.getElement().getBoundingClientRect();
+  const x1 = domRect.left;
+  const y1 = domRect.top;
+  const x2 = domRect.right;
+  const y2 = domRect.bottom;
+
+  const getRect = () => {
+    return {
+      x1,
+      y1,
+      x2,
+      y2
+    };
+  };
+  const getMatrix = () => {
+    const matrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
+    matrix.translate(x1, y1);
+    return matrix;
+  };
+  registerGlobalEventTransformer(vglobal, this.getElement(), getMatrix, getRect, transformPointForCanvas);
+  registerWindowEventTransformer(
+    this.scenegraph.stage.window,
+    this.getElement(),
+    getMatrix,
+    getRect,
+    transformPointForCanvas
+  );
+  vglobal.mapToCanvasPoint = mapToCanvasPointForCanvas;
+}

packages/vtable/package.json

@@ -129,4 +129,4 @@
     "url": "https://github.com/VisActor/VTable.git",
     "directory": "packages/vtable"
   }
-}
+}

packages/vtable/src/event/event.ts

@@ -1,6 +1,6 @@
 // import { FederatedPointerEvent } from '@src/vrender';
 import type { FederatedPointerEvent, Gesture, IEventTarget } from '@src/vrender';
-import { RichText } from '@src/vrender';
+import { RichText, vglobal } from '@src/vrender';
 import type { ColumnDefine, ListTableConstructorOptions, MousePointerCellEvent } from '../ts-types';
 import { IconFuncTypeEnum } from '../ts-types';
 import type { StateManager } from '../state/state';
@@ -60,7 +60,11 @@ export class EventManager {
   scrollXSpeed: number;
   downIcon: IEventTarget; // 记录鼠标按下的sicon
   //报错已绑定过的事件 后续清除绑定
-  globalEventListeners: { name: string; env: 'document' | 'body' | 'window'; callback: (e?: any) => void }[] = [];
+  globalEventListeners: {
+    name: string;
+    env: 'document' | 'body' | 'window' | 'vglobal';
+    callback: (e?: any) => void;
+  }[] = [];
   inertiaScroll: InertiaScroll;
 
   bindSparklineHoverEvent: boolean;
@@ -705,6 +709,8 @@ export class EventManager {
         document.body.removeEventListener(item.name, item.callback);
       } else if (item.env === 'window') {
         window.removeEventListener(item.name, item.callback);
+      } else if (item.env === 'vglobal') {
+        vglobal.removeEventListener(item.name, item.callback);
       }
     });
     this.globalEventListeners = [];