diff --git a/docs/assets/guide/en/plugin/rotate-table.md b/docs/assets/guide/en/plugin/rotate-table.md index c6f36b2e03..b8ac6a91c9 100644 --- a/docs/assets/guide/en/plugin/rotate-table.md +++ b/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. diff --git a/docs/assets/guide/zh/plugin/rotate-table.md b/docs/assets/guide/zh/plugin/rotate-table.md index a5049e463e..1ae85d0d78 100644 --- a/docs/assets/guide/zh/plugin/rotate-table.md +++ b/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接口前，将容器的宽高调整好。 diff --git a/packages/vtable-plugins/src/add-row-column.ts b/packages/vtable-plugins/src/add-row-column.ts index 226153f9fe..df7952092e 100644 --- a/packages/vtable-plugins/src/add-row-column.ts +++ b/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; diff --git a/packages/vtable-plugins/src/column-series.ts b/packages/vtable-plugins/src/column-series.ts index 5ada1e23ba..d39819aaab 100644 --- a/packages/vtable-plugins/src/column-series.ts +++ b/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[]) { diff --git a/packages/vtable-plugins/src/excel-edit-cell-keyboard.ts b/packages/vtable-plugins/src/excel-edit-cell-keyboard.ts index c01585d175..0c6349be61 100644 --- a/packages/vtable-plugins/src/excel-edit-cell-keyboard.ts +++ b/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(); diff --git a/packages/vtable-plugins/src/focus-highlight.ts b/packages/vtable-plugins/src/focus-highlight.ts index 6cdf353635..140c29bb83 100644 --- a/packages/vtable-plugins/src/focus-highlight.ts +++ b/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', diff --git a/packages/vtable-plugins/src/highlight-header-when-select-cell.ts b/packages/vtable-plugins/src/highlight-header-when-select-cell.ts index a56b108fd0..ed376e52e0 100644 --- a/packages/vtable-plugins/src/highlight-header-when-select-cell.ts +++ b/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[]) { diff --git a/packages/vtable-plugins/src/rotate-table.ts b/packages/vtable-plugins/src/rotate-table.ts index 92ba77f220..12ea36dddf 100644 --- a/packages/vtable-plugins/src/rotate-table.ts +++ b/packages/vtable-plugins/src/rotate-table.ts @@ -11,10 +11,11 @@ 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都没有进行坐标处理，这样就会导致交互错乱。 @@ -22,20 +23,21 @@ import type { Matrix } from '@visactor/vutils'; * 这里使用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); } diff --git a/packages/vtable-plugins/src/row-series.ts b/packages/vtable-plugins/src/row-series.ts index 3ebf5f6f11..49e2124699 100644 --- a/packages/vtable-plugins/src/row-series.ts +++ b/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[]) { diff --git a/packages/vtable-plugins/src/table-carousel-animation.ts b/packages/vtable-plugins/src/table-carousel-animation.ts index 34b9e53d24..ad15052a60 100644 --- a/packages/vtable-plugins/src/table-carousel-animation.ts +++ b/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;