refactor: add id to plugin options

docs/assets/guide/en/plugin/rotate-table.md

@@ -11,6 +11,8 @@ The plugin adds the rotate90WithTransform and cancelTransform methods to the tab
 - rotate90WithTransform: Rotate 90 degrees
 - cancelTransform: Cancel rotation
 
+**Generally speaking, plugins do not need to bind APIs to table instances. They can have APIs of their own and be called directly by the business layer. For example: rotatePlugin.rotate90WithTransform()**
+
 Please follow the example process below:
 1. Ensure that the selected object is the upper container of the table, and the container of the table is full screen. The selected object can be a div or body that covers the entire screen.
 2. Before calling the rotate90WithTransform interface, adjust the container's width and height.

docs/assets/guide/zh/plugin/rotate-table.md

@@ -11,6 +11,8 @@
 - rotate90WithTransform：旋转90度
 - cancelTransform：取消旋转
 
+**一般情况下插件不需要将api绑定到table实例上，可以插件自身拥有api，然后由业务方直接调用。如：rotatePlugin.rotate90WithTransform( )**
+
 请按照下面示例过程使用：
 1. 确保选择对象是表格的上层容器，且表格的容器是全屏的。选择对象可以是覆盖整屏的div或者body。
 2. 在调用rotate90WithTransform接口前，将容器的宽高调整好。

packages/vtable-plugins/src/add-row-column.ts

@@ -3,6 +3,7 @@ import * as VTable from '@visactor/vtable';
  * 添加行和列的插件的配置选项
  */
 export interface AddRowColumnOptions {
+  id?: string;
   /**
    * 是否启用添加列
    */
@@ -54,6 +55,7 @@ export class AddRowColumnPlugin implements VTable.plugins.IVTablePlugin {
       addRowEnable: true
     }
   ) {
+    this.id = pluginOptions.id ?? this.id;
     this.pluginOptions = pluginOptions;
     this.pluginOptions.addColumnEnable = this.pluginOptions.addColumnEnable ?? true;
     this.pluginOptions.addRowEnable = this.pluginOptions.addRowEnable ?? true;

packages/vtable-plugins/src/column-series.ts

@@ -3,6 +3,7 @@ import * as VTable from '@visactor/vtable';
  * 添加行和列的插件的配置选项
  */
 export interface ColumnSeriesOptions {
+  id?: string;
   columnCount: number;
   generateColumnTitle?: (index: number) => string;
   generateColumnField?: (index: number) => string;
@@ -23,6 +24,7 @@ export class ColumnSeriesPlugin implements VTable.plugins.IVTablePlugin {
   table: VTable.ListTable;
   columns: { field?: string; title: string }[] = [];
   constructor(pluginOptions: ColumnSeriesOptions) {
+    this.id = pluginOptions.id ?? this.id;
     this.pluginOptions = Object.assign({ columnCount: 100 }, pluginOptions);
   }
   run(...args: any[]) {

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

@@ -3,6 +3,7 @@ import type { TableEvents } from '@visactor/vtable/src/core/TABLE_EVENT_TYPE';
 import type { EventArg } from './types';
 //备用 插件配置项 目前感觉都走默认逻辑就行
 export type IExcelEditCellKeyboardPluginOptions = {
+  id?: string;
   // 是否响应删除
   // enableDeleteKey?: boolean;
 };
@@ -14,6 +15,7 @@ export class ExcelEditCellKeyboardPlugin implements VTable.plugins.IVTablePlugin
   table: VTable.ListTable;
   pluginOptions: IExcelEditCellKeyboardPluginOptions;
   constructor(pluginOptions?: IExcelEditCellKeyboardPluginOptions) {
+    this.id = pluginOptions?.id ?? this.id;
     this.pluginOptions = pluginOptions;
 
     this.bindEvent();

packages/vtable-plugins/src/focus-highlight.ts

@@ -8,6 +8,7 @@ import { cellInRange } from '@visactor/vtable/es/tools/helper';
 import { TABLE_EVENT_TYPE } from '@visactor/vtable';
 import type * as VTable from '@visactor/vtable';
 export interface FocusHighlightPluginOptions {
+  id?: string;
   fill?: string;
   opacity?: number;
   highlightRange?: CellAddress | CellRange; //初始化聚焦高亮范围
@@ -28,6 +29,7 @@ export class FocusHighlightPlugin implements VTable.plugins.IVTablePlugin {
       highlightRange: undefined
     }
   ) {
+    this.id = options.id ?? this.id;
     this.pluginOptions = Object.assign(
       {
         fill: '#000',

packages/vtable-plugins/src/highlight-header-when-select-cell.ts

@@ -2,6 +2,7 @@ import type { CellRange } from '@visactor/vtable/es/ts-types';
 import { TABLE_EVENT_TYPE } from '@visactor/vtable';
 import type { BaseTableAPI, plugins } from '@visactor/vtable';
 interface IHighlightHeaderWhenSelectCellPluginOptions {
+  id?: string;
   rowHighlight?: boolean;
   colHighlight?: boolean;
   colHighlightBGColor?: string;
@@ -24,6 +25,7 @@ export class HighlightHeaderWhenSelectCellPlugin implements plugins.IVTablePlugi
   colHeaderRanges: CellRange[] = [];
   rowHeaderRanges: CellRange[] = [];
   constructor(pluginOptions: IHighlightHeaderWhenSelectCellPluginOptions) {
+    this.id = pluginOptions.id ?? this.id;
     this.pluginOptions = pluginOptions;
   }
   run(...args: any[]) {

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

@@ -11,31 +11,33 @@ import * as VTable from '@visactor/vtable';
 import type { TableEvents } from '@visactor/vtable/src/core/TABLE_EVENT_TYPE';
 import type { EventArg } from './types';
 import type { Matrix } from '@visactor/vutils';
-// export type IRotateTablePluginOptions = {
-//   // 旋转角度
-//   rotate?: number;
-// };
+export type IRotateTablePluginOptions = {
+  id?: string;
+  // // 旋转角度
+  // rotate?: number;
+};
 /**
  * 旋转表格插件。
  * 业务层旋转功能没有使用收系统接口的话，用的transform:'rotate(90deg)'的设置来达到旋转的目的。vtable及vrender都没有进行坐标处理，这样就会导致交互错乱。
  * 所以需要进行坐标转换，将旋转后的坐标转换后作为VRender及VTable逻辑中用到的坐标。
  * 这里使用transform:'rotate(90deg)'的设置来达到旋转的目的。 其他角度应该也是可以实现的，请自行扩展这个插件并兼容
  */
 export class RotateTablePlugin implements VTable.plugins.IVTablePlugin {
-  id = 'rotate-table';
+  id = `rotate-table-${Date.now()}`;
   name = 'Rotate Table';
   runTime = [VTable.TABLE_EVENT_TYPE.INITIALIZED];
   table: VTable.ListTable;
   matrix: Matrix;
   vglobal_mapToCanvasPoint: any; // 保存vrender中vglobal的mapToCanvasPoint原方法
   // pluginOptions: IRotateTablePluginOptions;
-  constructor() {
+  constructor(pluginOptions?: IRotateTablePluginOptions) {
+    this.id = pluginOptions?.id ?? this.id;
     // 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实例上
+    //将函数rotate90WithTransform绑定到table实例上，一般情况下插件不需要将api绑定到table实例上，可以直接自身实现某个api功能
     this.table.rotate90WithTransform = rotate90WithTransform.bind(this.table);
     this.table.cancelTransform = cancelTransform.bind(this.table);
   }

packages/vtable-plugins/src/row-series.ts

@@ -4,6 +4,7 @@ import type { TYPES, BaseTableAPI, ListTable, ListTableConstructorOptions, plugi
  * 添加行和列的插件的配置选项
  */
 export interface RowSeriesOptions {
+  id?: string;
   rowCount: number;
   fillRowRecord?: (index: number) => any;
   rowSeriesNumber?: TYPES.IRowSeriesNumber;
@@ -24,6 +25,7 @@ export class RowSeriesPlugin implements plugins.IVTablePlugin {
   table: ListTable;
 
   constructor(pluginOptions: RowSeriesOptions) {
+    this.id = pluginOptions.id ?? this.id;
     this.pluginOptions = Object.assign({ rowCount: 100 }, pluginOptions);
   }
   run(...args: any[]) {

packages/vtable-plugins/src/table-carousel-animation.ts

@@ -7,6 +7,7 @@ function isInteger(value: number) {
 }
 
 export interface ITableCarouselAnimationPluginOptions {
+  id?: string;
   rowCount?: number;
   colCount?: number;
   animationDuration?: number;
@@ -42,6 +43,7 @@ export class TableCarouselAnimationPlugin implements VTable.plugins.IVTablePlugi
   customDistRowFunction?: (row: number, table: BaseTableAPI) => { distRow: number; animation?: boolean } | undefined;
   customDistColFunction?: (col: number, table: BaseTableAPI) => { distCol: number; animation?: boolean } | undefined;
   constructor(options: ITableCarouselAnimationPluginOptions = {}) {
+    this.id = options.id ?? this.id;
     this.rowCount = options?.rowCount ?? undefined;
     this.colCount = options?.colCount ?? undefined;
     this.animationDuration = options?.animationDuration ?? 500;