Merge pull request #3792 from VisActor/3788-bug-focusHighlight-plugin

3788 bug focus highlight plugin

Author: fangsmile

common/changes/@visactor/vtable/3788-bug-focusHighlight-plugin_2025-04-23-07-29.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "refactor: plugins update progress #3788\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}

docs/assets/api/en/methods.md

@@ -6,19 +6,12 @@
 
 Update table configuration items, which will be automatically redrawn after being called.
 
-updateConfig parameter description:
-
-- keepData: When the new option does not pass in records or dataSource, whether to retain the original data. The default is false
-
 ```ts
   /**
    *Update options currently only support full updates
    * @param options
    */
-  updateOption(options: BaseTableConstructorOptions,updateConfig?:{
-    //When the new option does not pass in records or dataSource, whether to retain the original data. The default is false
-    keepData?:boolean
-  }) => void
+  updateOption(options: BaseTableConstructorOptions) => void
 ```
 
 If you need to update a single configuration item, please refer to the other `update**` interfaces below

docs/assets/api/zh/methods.md

@@ -6,19 +6,12 @@
 
 更新表格配置项，调用后会自动重绘。
 
-updateConfig 参数说明：
-
-- keepData: 当新的option没有传入records或者dataSource时，是否保留原本的数据。默认为false
-
 ```ts
   /**
    * 更新options 目前只支持全量更新
    * @param options
    */
-  updateOption(options: BaseTableConstructorOptions,updateConfig?:{
-    //当新的option没有传入records或者dataSource时，是否保留原本的数据
-    keepData?:boolean
-  }) => void
+  updateOption(options: BaseTableConstructorOptions) => void
 ```
 
 如果需要更新单个配置项，请参考下面其他`update**`接口

docs/assets/demo/zh/plugin/excel-online-editing.md

@@ -61,10 +61,12 @@ VTable.register.editor('input', input_editor);
   });
 
   const columnSeries = new VTablePlugins.ColumnSeriesPlugin({
-    columnCount: 26
+    columnCount: 26,
+    autoExtendColumnTriggerKeys: ['ArrowRight', 'Tab']
   });
   const rowSeries = new VTablePlugins.RowSeriesPlugin({
     rowCount: 100,
+    autoExtendRowTriggerKeys: ['ArrowDown', 'Enter'],
     //records数据以外 填充空行数据
     fillRowRecord: (index) => {
       return [];
@@ -105,7 +107,11 @@ VTable.register.editor('input', input_editor);
         textAlign: 'center'
       }
     }),
+    frozenColCount: 1,
     defaultRowHeight: 30,
+    keyboardOptions: {
+      moveFocusCellOnEnter: true
+    },
     plugins: [addRowColumn, columnSeries, rowSeries, highlightPlugin, excelEditCellKeyboardPlugin]
   };
   const tableInstance = new VTable.ListTable( document.getElementById(CONTAINER_ID),option);

docs/assets/guide/en/plugin/contribute.md

@@ -19,12 +19,14 @@ Plugins need to implement the `VTable.plugins.IVTablePlugin` interface.
 export interface IVTablePlugin {
   // Plugin unique identifier
   id: string;
+  // Plugin name
+  name: string;
   // Plugin runtime trigger
   runTime: TableEvents[keyof TableEvents] | TableEvents[keyof TableEvents][];
   // Initialization method, called after VTable instance creation and before first render
   run: (...args: any[]) => void;
   // Update method, called when table data or configuration updates
-  update?: (table: BaseTableAPI, options?: any) => void;
+  update?: () => void;
   // Destruction method, called before VTable instance is destroyed
   release?: (table: BaseTableAPI) => void;
 }
@@ -46,7 +48,7 @@ sequenceDiagram
     participant ListTable
     participant EventManager
     participant PluginManager
-    participant Plugin as IVTablePlugin
+    participant Plugin as VTablePlugin
     participant RenderManager
     
     %% Initialization
@@ -65,13 +67,17 @@ sequenceDiagram
         Plugin->>Plugin: process event logic
     end
     
-    Plugin->>RenderManager: requestRender()
-    RenderManager->>ListTable: render updates
+    Plugin->>ListTable: render request to update table
     ListTable->>DOM: update display
 
-    %% Release
+
+    %% table.updateOption
+    ListTable->>PluginManager: updateOption
+    PluginManager->>Plugin: updatePlugins()
+    %% table.release
     ListTable->>PluginManager: release
     PluginManager->>Plugin: release()
+
 ```
 
 From the above diagram, you can understand the runtime timing of plugins:

docs/assets/guide/en/plugin/row-column-series.md

@@ -19,7 +19,7 @@ export interface ColumnSeriesOptions {
    * Whether to automatically extend columns
    * @default true
    */
-  autoExtendColumn?: boolean;
+  autoExtendColumnTriggerKeys?: ('ArrowRight' | 'Tab')[];
 }
 
 export interface RowSeriesOptions {
@@ -30,7 +30,7 @@ export interface RowSeriesOptions {
    * Whether to automatically extend rows
    * @default true
    */
-  autoExtendRow?: boolean;
+  autoExtendRowTriggerKeys?: ('ArrowDown' | 'Enter')[];
 }
 ```
 

docs/assets/guide/zh/plugin/contribute.md

@@ -19,12 +19,14 @@
 export interface IVTablePlugin {
   // 插件唯一标识
   id: string;
+  // 插件名称
+  name: string;
   // 插件运行时机
   runTime: TableEvents[keyof TableEvents] | TableEvents[keyof TableEvents][];
   // 初始化方法，在VTable实例创建后、首次渲染前调用
   run: (...args: any[]) => void;
   // 更新方法，当表格数据或配置更新时调用
-  update?: (table: BaseTableAPI, options?: any) => void;
+  update?: () => void;
   // 销毁方法，在VTable实例销毁前调用
   release?: (table: BaseTableAPI) => void;
 }
@@ -46,7 +48,7 @@ sequenceDiagram
     participant ListTable
     participant EventManager
     participant PluginManager
-    participant Plugin as IVTablePlugin
+    participant Plugin as VTablePlugin
     participant RenderManager
     
     %% Initialization
@@ -65,13 +67,17 @@ sequenceDiagram
         Plugin->>Plugin: process event logic
     end
     
-    Plugin->>RenderManager: requestRender()
-    RenderManager->>ListTable: render updates
+    Plugin->>ListTable: render request to update table
     ListTable->>DOM: update display
 
-    %% Release
+
+    %% table.updateOption
+    ListTable->>PluginManager: updateOption
+    PluginManager->>Plugin: updatePlugins()
+    %% table.release
     ListTable->>PluginManager: release
     PluginManager->>Plugin: release()
+
 ```
 
 通过上图可以了解到插件的运行时机：

docs/assets/guide/zh/plugin/row-column-series.md

@@ -19,7 +19,7 @@ export interface ColumnSeriesOptions {
    * 是否自动扩展列
    * @default true
    */
-  autoExtendColumn?: boolean;
+  autoExtendColumnTriggerKeys?: ('ArrowRight' | 'Tab')[];
 }
 
 export interface RowSeriesOptions {
@@ -30,7 +30,7 @@ export interface RowSeriesOptions {
    * 是否自动扩展行
    * @default true
    */
-  autoExtendRow?: boolean;
+  autoExtendRowTriggerKeys?: ('ArrowDown' | 'Enter')[];
 }
 ```
 

packages/vtable-plugins/demo/combine-plugins/combine-plugins.ts

@@ -31,10 +31,12 @@ export function createTable() {
   });
 
   const columnSeries = new ColumnSeriesPlugin({
-    columnCount: 3
+    columnCount: 26,
+    autoExtendColumnTriggerKeys: ['ArrowRight', 'Tab']
   });
   const rowSeries = new RowSeriesPlugin({
-    rowCount: 6,
+    rowCount: 100,
+    autoExtendRowTriggerKeys: ['ArrowDown', 'Enter'],
     fillRowRecord: (index: number) => {
       return [];
     },
@@ -74,11 +76,12 @@ export function createTable() {
         textAlign: 'center'
       }
     }),
+    frozenColCount: 1,
+    defaultRowHeight: 30,
     keyboardOptions: {
       moveFocusCellOnEnter: true
       // editCellOnEnter: false
     },
-    defaultRowHeight: 30,
     plugins: [addRowColumn, columnSeries, rowSeries, highlightPlugin, excelEditCellKeyboardPlugin]
   };
   const tableInstance = new VTable.ListTable(option);

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

@@ -100,7 +100,70 @@ export function createTable() {
   };
   const tableInstance = new VTable.ListTable(option);
   window.tableInstance = tableInstance;
-
+  const columns1: VTable.ColumnsDefine = [
+    {
+      field: 'image',
+      title: '行号',
+      width: 80,
+      cellType: 'image',
+      keepAspectRatio: true
+    },
+    {
+      field: 'id',
+      title: 'ID',
+      width: 'auto',
+      minWidth: 50,
+      sort: true
+    },
+    {
+      field: 'email1',
+      title: 'email',
+      width: 200,
+      sort: true,
+      style: {
+        underline: true,
+        underlineDash: [2, 0],
+        underlineOffset: 3
+      }
+    },
+    {
+      title: 'full name',
+      columns: [
+        {
+          field: 'name',
+          title: 'First Name',
+          width: 200
+        },
+        {
+          field: 'name',
+          title: 'Last Name',
+          width: 200
+        }
+      ]
+    },
+    {
+      field: 'date1',
+      title: 'birthday',
+      width: 200
+    }
+  ];
+  setTimeout(() => {
+    const option1: VTable.ListTableConstructorOptions = {
+      container: document.getElementById(CONTAINER_ID),
+      records,
+      columns: columns1,
+      theme: VTable.themes.DARK,
+      select: {
+        headerSelectMode: 'cell'
+      },
+      // heightMode: 'adaptive',
+      // select: {
+      //   disableSelect: true
+      // },
+      plugins: [highlightPlugin]
+    };
+    tableInstance.updateOption(option1);
+  }, 2000);
   bindDebugTool(tableInstance.scenegraph.stage, {
     customGrapicKeys: ['col', 'row']
   });

packages/vtable-plugins/demo/highlight-header/highlight-header.ts

@@ -94,7 +94,50 @@ export function createTable() {
   };
   const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID)!, option);
   window.tableInstance = tableInstance;
+  const columns1: VTable.ColumnsDefine = [
+    {
+      field: 'id',
+      title: 'ID ( input-editor )',
+      width: 'auto',
+      minWidth: 50,
+      sort: true,
+      headerEditor: 'input-editor',
+      editor: 'input-editor'
+    },
+    {
+      field: 'date1',
+      title: 'birthday ( date_input_editor )',
+      width: 300,
+      editor: 'date_input_editor'
+    },
+    {
+      field: 'sex',
+      title: 'sex ( list_editor )',
+      width: 300,
+      editor: 'list_editor'
+    }
+  ];
+  setTimeout(() => {
+    const option1: VTable.ListTableConstructorOptions = {
+      container: document.getElementById(CONTAINER_ID),
+      records,
+      columns: columns1,
+      select: {
+        outsideClickDeselect: true,
+        headerSelectMode: 'body'
+      },
 
+      editCellTrigger: 'click',
+      autoWrapText: true,
+      editor: 'input-editor',
+      menu: {
+        contextMenuItems: ['copy', 'paste', 'delete', '...']
+      },
+      rowSeriesNumber: {},
+      plugins: [highlightPlugin]
+    };
+    tableInstance.updateOption(option1);
+  }, 2000);
   bindDebugTool(tableInstance.scenegraph.stage, {
     customGrapicKeys: ['col', 'row']
   });

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

@@ -27,7 +27,8 @@ export interface AddRowColumnOptions {
  * 当鼠标离开table的cell时，会隐藏添加行和列的dot和加号
  */
 export class AddRowColumnPlugin implements VTable.plugins.IVTablePlugin {
-  id = 'add-row-column';
+  id = `add-row-column-${Date.now()}`;
+  name = 'Add Row Column';
   runTime = [
     VTable.TABLE_EVENT_TYPE.MOUSEENTER_CELL,
     VTable.TABLE_EVENT_TYPE.MOUSELEAVE_CELL,

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

@@ -17,6 +17,7 @@ export interface ICarouselAnimationPluginOptions {
   customDistColFunction?: (col: number, table: BaseTableAPI) => { distCol: number; animation?: boolean } | undefined;
 }
 
+/** @deprecated 请使用 TableCarouselAnimationPlugin 代替 */
 export class CarouselAnimationPlugin {
   table: BaseTableAPI;