@visactor/vtable 1.10.5 → 1.10.6-alpha.0

package/es/plugins/custom-cell-style.js

@@ -11,9 +11,11 @@ export class CustomCellStylePlugin {
     }
     getCustomCellStyleId(col, row) {
         let customStyleId;
-        return this.customCellStyleArrangement.forEach((style => {
-            style.cellPosition.range ? style.cellPosition.range.start.col <= col && style.cellPosition.range.end.col >= col && style.cellPosition.range.start.row <= row && style.cellPosition.range.end.row >= row && (customStyleId = style.customStyleId) : style.cellPosition.col === col && style.cellPosition.row === row && (customStyleId = style.customStyleId);
-        })), customStyleId;
+        const range = this.table.getCellRange(col, row);
+        for (let c = range.start.col; c <= range.end.col; c++) for (let r = range.start.row; r <= range.end.row; r++) this.customCellStyleArrangement.forEach((style => {
+            style.cellPosition.range ? style.cellPosition.range.start.col <= c && style.cellPosition.range.end.col >= c && style.cellPosition.range.start.row <= r && style.cellPosition.range.end.row >= r && (customStyleId = style.customStyleId) : style.cellPosition.col === c && style.cellPosition.row === r && (customStyleId = style.customStyleId);
+        }));
+        return customStyleId;
     }
     getCustomCellStyleOption(customStyleId) {
         return this.customCellStyle.find((style => style.id === customStyleId));
@@ -33,19 +35,24 @@ export class CustomCellStylePlugin {
     }
     arrangeCustomCellStyle(cellPos, customStyleId) {
         const index = this.customCellStyleArrangement.findIndex((style => style.cellPosition.range && cellPos.range ? style.cellPosition.range.start.col === cellPos.range.start.col && style.cellPosition.range.start.row === cellPos.range.start.row && style.cellPosition.range.end.col === cellPos.range.end.col && style.cellPosition.range.end.row === cellPos.range.end.row : style.cellPosition.col === cellPos.col && style.cellPosition.row === cellPos.row));
-        if (-1 === index) this.customCellStyleArrangement.push({
-            cellPosition: {
-                col: cellPos.col,
-                row: cellPos.row,
-                range: cellPos.range
-            },
-            customStyleId: customStyleId
-        }); else {
-            if (this.customCellStyleArrangement[index].customStyleId === customStyleId) return;
-            this.customCellStyleArrangement[index].customStyleId = customStyleId;
+        if (-1 !== index || customStyleId) {
+            if (-1 === index && customStyleId) this.customCellStyleArrangement.push({
+                cellPosition: {
+                    col: cellPos.col,
+                    row: cellPos.row,
+                    range: cellPos.range
+                },
+                customStyleId: customStyleId
+            }); else {
+                if (this.customCellStyleArrangement[index].customStyleId === customStyleId) return;
+                customStyleId ? this.customCellStyleArrangement[index].customStyleId = customStyleId : this.customCellStyleArrangement.splice(index, 1);
+            }
+            if (cellPos.range) for (let col = cellPos.range.start.col; col <= cellPos.range.end.col; col++) for (let row = cellPos.range.start.row; row <= cellPos.range.end.row; row++) {
+                const range = this.table.getCellRange(col, row);
+                for (let c = range.start.col; c <= range.end.col; c++) for (let r = range.start.row; r <= range.end.row; r++) this.table.scenegraph.updateCellContent(c, r);
+            } else this.table.scenegraph.updateCellContent(cellPos.col, cellPos.row);
+            this.table.scenegraph.updateNextFrame();
         }
-        if (cellPos.range) for (let col = cellPos.range.start.col; col <= cellPos.range.end.col; col++) for (let row = cellPos.range.start.row; row <= cellPos.range.end.row; row++) this.table.scenegraph.updateCellContent(col, row); else this.table.scenegraph.updateCellContent(cellPos.col, cellPos.row);
-        this.table.scenegraph.updateNextFrame();
     }
     updateCustomCell(customCellStyle, customCellStyleArrangement) {
         this.customCellStyle.length = 0, this.customCellStyleArrangement.length = 0, customCellStyle.forEach((cellStyle => {

package/es/plugins/custom-cell-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugins/custom-cell-style.ts"],"names":[],"mappings":"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","file":"custom-cell-style.js","sourcesContent":["import type { Style } from '../body-helper/style';\nimport type {\n  CellRange,\n  ColumnStyleOption,\n  CustomCellStyle,\n  CustomCellStyleArrangement,\n  FullExtendStyle\n} from '../ts-types';\nimport type { BaseTableAPI } from '../ts-types/base-table';\n\nexport class CustomCellStylePlugin {\n  table: BaseTableAPI;\n  customCellStyle: CustomCellStyle[];\n  customCellStyleArrangement: CustomCellStyleArrangement[];\n\n  constructor(\n    table: BaseTableAPI,\n    customCellStyle: CustomCellStyle[],\n    customCellStyleArrangement: CustomCellStyleArrangement[]\n  ) {\n    this.table = table;\n    this.customCellStyle = customCellStyle;\n    this.customCellStyleArrangement = customCellStyleArrangement;\n  }\n\n  getCustomCellStyle(col: number, row: number) {\n    const customStyleId = this.getCustomCellStyleId(col, row);\n    if (customStyleId) {\n      const styleOption = this.getCustomCellStyleOption(customStyleId);\n      return styleOption?.style;\n    }\n    return undefined;\n  }\n\n  getCustomCellStyleId(col: number, row: number) {\n    let customStyleId;\n    this.customCellStyleArrangement.forEach(style => {\n      if (style.cellPosition.range) {\n        if (\n          style.cellPosition.range.start.col <= col &&\n          style.cellPosition.range.end.col >= col &&\n          style.cellPosition.range.start.row <= row &&\n          style.cellPosition.range.end.row >= row\n        ) {\n          customStyleId = style.customStyleId;\n        }\n      } else if (style.cellPosition.col === col && style.cellPosition.row === row) {\n        customStyleId = style.customStyleId;\n      }\n    });\n    return customStyleId;\n  }\n\n  getCustomCellStyleOption(customStyleId: string) {\n    return this.customCellStyle.find(style => style.id === customStyleId);\n  }\n\n  registerCustomCellStyle(customStyleId: string, customStyle: ColumnStyleOption | undefined | null) {\n    const index = this.customCellStyle.findIndex(style => style.id === customStyleId);\n    if (index === -1) {\n      this.customCellStyle.push({\n        id: customStyleId,\n        style: customStyle\n      });\n    } else {\n      this.customCellStyle[index] = {\n        id: customStyleId,\n        style: customStyle\n      };\n    }\n\n    this.customCellStyleArrangement.forEach(cellStyle => {\n      const cellPos = cellStyle.cellPosition;\n      if (cellStyle.customStyleId === customStyleId) {\n        if (cellPos.range) {\n          for (let col = cellPos.range.start.col; col <= cellPos.range.end.col; col++) {\n            for (let row = cellPos.range.start.row; row <= cellPos.range.end.row; row++) {\n              this.table.scenegraph.updateCellContent(col, row);\n            }\n          }\n        } else {\n          this.table.scenegraph.updateCellContent(cellPos.col, cellPos.row);\n        }\n      }\n    });\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  arrangeCustomCellStyle(\n    cellPos: {\n      col?: number;\n      row?: number;\n      range?: CellRange;\n    },\n    customStyleId: string | undefined | null\n  ) {\n    const index = this.customCellStyleArrangement.findIndex(style => {\n      if (style.cellPosition.range && cellPos.range) {\n        return (\n          style.cellPosition.range.start.col === cellPos.range.start.col &&\n          style.cellPosition.range.start.row === cellPos.range.start.row &&\n          style.cellPosition.range.end.col === cellPos.range.end.col &&\n          style.cellPosition.range.end.row === cellPos.range.end.row\n        );\n      }\n      return style.cellPosition.col === cellPos.col && style.cellPosition.row === cellPos.row;\n    });\n\n    if (index === -1) {\n      this.customCellStyleArrangement.push({\n        cellPosition: {\n          col: cellPos.col,\n          row: cellPos.row,\n          range: cellPos.range\n        },\n        customStyleId: customStyleId\n      });\n    } else if (this.customCellStyleArrangement[index].customStyleId === customStyleId) {\n      return;\n    } else {\n      this.customCellStyleArrangement[index].customStyleId = customStyleId;\n    }\n\n    // update cell group\n    if (cellPos.range) {\n      for (let col = cellPos.range.start.col; col <= cellPos.range.end.col; col++) {\n        for (let row = cellPos.range.start.row; row <= cellPos.range.end.row; row++) {\n          this.table.scenegraph.updateCellContent(col, row);\n        }\n      }\n    } else {\n      this.table.scenegraph.updateCellContent(cellPos.col, cellPos.row);\n    }\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  updateCustomCell(customCellStyle: CustomCellStyle[], customCellStyleArrangement: CustomCellStyleArrangement[]) {\n    this.customCellStyle.length = 0;\n    this.customCellStyleArrangement.length = 0;\n    customCellStyle.forEach((cellStyle: CustomCellStyle) => {\n      this.registerCustomCellStyle(cellStyle.id, cellStyle.style);\n    });\n    customCellStyleArrangement.forEach((cellStyle: CustomCellStyleArrangement) => {\n      this.arrangeCustomCellStyle(cellStyle.cellPosition, cellStyle.customStyleId);\n    });\n  }\n\n  hasCustomCellStyle(customStyleId: string) {\n    return this.customCellStyle.some(style => style.id === customStyleId);\n  }\n}\n\nexport function mergeStyle(cacheStyle: Style, customCellStyle: ColumnStyleOption): Style {\n  cacheStyle = cacheStyle.clone();\n\n  for (const key in customCellStyle) {\n    const value = customCellStyle[key];\n    if (value) {\n      cacheStyle[`_${key}`] = value;\n    }\n  }\n\n  return cacheStyle;\n}\n"]}
+{"version":3,"sources":["../src/plugins/custom-cell-style.ts"],"names":[],"mappings":"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","file":"custom-cell-style.js","sourcesContent":["import type { Style } from '../body-helper/style';\nimport type {\n  CellRange,\n  ColumnStyleOption,\n  CustomCellStyle,\n  CustomCellStyleArrangement,\n  FullExtendStyle\n} from '../ts-types';\nimport type { BaseTableAPI } from '../ts-types/base-table';\n\nexport class CustomCellStylePlugin {\n  table: BaseTableAPI;\n  customCellStyle: CustomCellStyle[];\n  customCellStyleArrangement: CustomCellStyleArrangement[];\n\n  constructor(\n    table: BaseTableAPI,\n    customCellStyle: CustomCellStyle[],\n    customCellStyleArrangement: CustomCellStyleArrangement[]\n  ) {\n    this.table = table;\n    this.customCellStyle = customCellStyle;\n    this.customCellStyleArrangement = customCellStyleArrangement;\n  }\n\n  getCustomCellStyle(col: number, row: number) {\n    const customStyleId = this.getCustomCellStyleId(col, row);\n    if (customStyleId) {\n      const styleOption = this.getCustomCellStyleOption(customStyleId);\n      return styleOption?.style;\n    }\n    return undefined;\n  }\n\n  getCustomCellStyleId(col: number, row: number) {\n    let customStyleId;\n\n    const range = this.table.getCellRange(col, row);\n    for (let c = range.start.col; c <= range.end.col; c++) {\n      for (let r = range.start.row; r <= range.end.row; r++) {\n        // eslint-disable-next-line no-loop-func\n        this.customCellStyleArrangement.forEach(style => {\n          if (style.cellPosition.range) {\n            if (\n              style.cellPosition.range.start.col <= c &&\n              style.cellPosition.range.end.col >= c &&\n              style.cellPosition.range.start.row <= r &&\n              style.cellPosition.range.end.row >= r\n            ) {\n              customStyleId = style.customStyleId;\n            }\n          } else if (style.cellPosition.col === c && style.cellPosition.row === r) {\n            customStyleId = style.customStyleId;\n          }\n        });\n      }\n    }\n\n    return customStyleId;\n  }\n\n  getCustomCellStyleOption(customStyleId: string) {\n    return this.customCellStyle.find(style => style.id === customStyleId);\n  }\n\n  registerCustomCellStyle(customStyleId: string, customStyle: ColumnStyleOption | undefined | null) {\n    const index = this.customCellStyle.findIndex(style => style.id === customStyleId);\n    if (index === -1) {\n      this.customCellStyle.push({\n        id: customStyleId,\n        style: customStyle\n      });\n    } else {\n      this.customCellStyle[index] = {\n        id: customStyleId,\n        style: customStyle\n      };\n    }\n\n    this.customCellStyleArrangement.forEach(cellStyle => {\n      const cellPos = cellStyle.cellPosition;\n      if (cellStyle.customStyleId === customStyleId) {\n        if (cellPos.range) {\n          for (let col = cellPos.range.start.col; col <= cellPos.range.end.col; col++) {\n            for (let row = cellPos.range.start.row; row <= cellPos.range.end.row; row++) {\n              this.table.scenegraph.updateCellContent(col, row);\n            }\n          }\n        } else {\n          this.table.scenegraph.updateCellContent(cellPos.col, cellPos.row);\n        }\n      }\n    });\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  arrangeCustomCellStyle(\n    cellPos: {\n      col?: number;\n      row?: number;\n      range?: CellRange;\n    },\n    customStyleId: string | undefined | null\n  ) {\n    const index = this.customCellStyleArrangement.findIndex(style => {\n      if (style.cellPosition.range && cellPos.range) {\n        return (\n          style.cellPosition.range.start.col === cellPos.range.start.col &&\n          style.cellPosition.range.start.row === cellPos.range.start.row &&\n          style.cellPosition.range.end.col === cellPos.range.end.col &&\n          style.cellPosition.range.end.row === cellPos.range.end.row\n        );\n      }\n      return style.cellPosition.col === cellPos.col && style.cellPosition.row === cellPos.row;\n    });\n\n    if (index === -1 && !customStyleId) {\n      // do nothing\n      return;\n    } else if (index === -1 && customStyleId) {\n      // add new style\n      this.customCellStyleArrangement.push({\n        cellPosition: {\n          col: cellPos.col,\n          row: cellPos.row,\n          range: cellPos.range\n        },\n        customStyleId: customStyleId\n      });\n    } else if (this.customCellStyleArrangement[index].customStyleId === customStyleId) {\n      // same style\n      return;\n    } else if (customStyleId) {\n      // update style\n      this.customCellStyleArrangement[index].customStyleId = customStyleId;\n    } else {\n      // delete useless style\n      this.customCellStyleArrangement.splice(index, 1);\n    }\n\n    // update cell group\n    if (cellPos.range) {\n      for (let col = cellPos.range.start.col; col <= cellPos.range.end.col; col++) {\n        for (let row = cellPos.range.start.row; row <= cellPos.range.end.row; row++) {\n          const range = this.table.getCellRange(col, row);\n          for (let c = range.start.col; c <= range.end.col; c++) {\n            for (let r = range.start.row; r <= range.end.row; r++) {\n              this.table.scenegraph.updateCellContent(c, r);\n            }\n          }\n          // this.table.scenegraph.updateCellContent(col, row);\n        }\n      }\n    } else {\n      this.table.scenegraph.updateCellContent(cellPos.col, cellPos.row);\n    }\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  updateCustomCell(customCellStyle: CustomCellStyle[], customCellStyleArrangement: CustomCellStyleArrangement[]) {\n    this.customCellStyle.length = 0;\n    this.customCellStyleArrangement.length = 0;\n    customCellStyle.forEach((cellStyle: CustomCellStyle) => {\n      this.registerCustomCellStyle(cellStyle.id, cellStyle.style);\n    });\n    customCellStyleArrangement.forEach((cellStyle: CustomCellStyleArrangement) => {\n      this.arrangeCustomCellStyle(cellStyle.cellPosition, cellStyle.customStyleId);\n    });\n  }\n\n  hasCustomCellStyle(customStyleId: string) {\n    return this.customCellStyle.some(style => style.id === customStyleId);\n  }\n}\n\nexport function mergeStyle(cacheStyle: Style, customCellStyle: ColumnStyleOption): Style {\n  cacheStyle = cacheStyle.clone();\n\n  for (const key in customCellStyle) {\n    const value = (customCellStyle as any)[key];\n    if (value) {\n      (cacheStyle as any)[`_${key}`] = value;\n    }\n  }\n\n  return cacheStyle;\n}\n"]}

package/es/plugins/header-highlight.d.ts

@@ -0,0 +1,21 @@
+import type { CellRange } from '../ts-types';
+import type { BaseTableAPI } from '../ts-types/base-table';
+export interface IHeaderHighlightPluginOptions {
+    rowHighlight?: boolean;
+    colHighlight?: boolean;
+    colHighlightBGColor?: string;
+    colHighlightColor?: string;
+    rowHighlightBGColor?: string;
+    rowHighlightColor?: string;
+}
+export declare class HeaderHighlightPlugin {
+    table: BaseTableAPI;
+    options: IHeaderHighlightPluginOptions;
+    colHeaderRange?: CellRange;
+    rowHeaderRange?: CellRange;
+    constructor(table: BaseTableAPI, options?: IHeaderHighlightPluginOptions);
+    registerStyle(): void;
+    bindEvent(): void;
+    clearHighlight(): void;
+    updateHighlight(): void;
+}

package/es/plugins/header-highlight.js

@@ -0,0 +1,98 @@
+export class HeaderHighlightPlugin {
+    constructor(table, options) {
+        this.table = table, this.options = options, this.registerStyle(), this.bindEvent();
+    }
+    registerStyle() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        this.table.registerCustomCellStyle("col-highlight", {
+            bgColor: null !== (_b = null === (_a = this.options) || void 0 === _a ? void 0 : _a.colHighlightBGColor) && void 0 !== _b ? _b : "#82b2f5",
+            color: null !== (_d = null === (_c = this.options) || void 0 === _c ? void 0 : _c.colHighlightColor) && void 0 !== _d ? _d : "#FFF"
+        }), this.table.registerCustomCellStyle("row-highlight", {
+            bgColor: null !== (_f = null === (_e = this.options) || void 0 === _e ? void 0 : _e.rowHighlightBGColor) && void 0 !== _f ? _f : "#82b2f5",
+            color: null !== (_h = null === (_g = this.options) || void 0 === _g ? void 0 : _g.rowHighlightColor) && void 0 !== _h ? _h : "#FFF"
+        });
+    }
+    bindEvent() {
+        this.table.on("selected_cell", (e => {
+            this.updateHighlight();
+        })), this.table.on("selected_clear", (() => {
+            this.clearHighlight();
+        }));
+    }
+    clearHighlight() {
+        this.colHeaderRange && this.table.arrangeCustomCellStyle({
+            range: this.colHeaderRange
+        }, void 0), this.rowHeaderRange && this.table.arrangeCustomCellStyle({
+            range: this.rowHeaderRange
+        }, void 0), this.colHeaderRange = void 0, this.rowHeaderRange = void 0;
+    }
+    updateHighlight() {
+        var _a, _b, _c, _d;
+        if (!1 === (null === (_a = this.options) || void 0 === _a ? void 0 : _a.colHighlight) && !1 === (null === (_b = this.options) || void 0 === _b ? void 0 : _b.rowHighlight)) return;
+        const selectRanges = this.table.getSelectedCellRanges();
+        if (0 === selectRanges.length) return void this.clearHighlight();
+        const selectRange = selectRanges[0], rowSelectRange = [ selectRange.start.row, selectRange.end.row ];
+        rowSelectRange.sort(((a, b) => a - b));
+        const colSelectRange = [ selectRange.start.col, selectRange.end.col ];
+        let colHeaderRange, rowHeaderRange;
+        colSelectRange.sort(((a, b) => a - b)), this.table.isPivotTable() ? (colHeaderRange = {
+            start: {
+                col: colSelectRange[0],
+                row: 0
+            },
+            end: {
+                col: colSelectRange[1],
+                row: this.table.columnHeaderLevelCount - 1
+            }
+        }, rowHeaderRange = {
+            start: {
+                col: 0,
+                row: rowSelectRange[0]
+            },
+            end: {
+                col: this.table.rowHeaderLevelCount - 1,
+                row: rowSelectRange[1]
+            }
+        }) : this.table.internalProps.transpose ? rowHeaderRange = {
+            start: {
+                col: 0,
+                row: rowSelectRange[0]
+            },
+            end: {
+                col: this.table.rowHeaderLevelCount - 1,
+                row: rowSelectRange[1]
+            }
+        } : (colHeaderRange = {
+            start: {
+                col: colSelectRange[0],
+                row: 0
+            },
+            end: {
+                col: colSelectRange[1],
+                row: this.table.columnHeaderLevelCount - 1
+            }
+        }, this.table.internalProps.rowSeriesNumber && (rowHeaderRange = {
+            start: {
+                col: 0,
+                row: rowSelectRange[0]
+            },
+            end: {
+                col: 0,
+                row: rowSelectRange[1]
+            }
+        })), !1 === (null === (_c = this.options) || void 0 === _c ? void 0 : _c.colHighlight) || isSameRange(this.colHeaderRange, colHeaderRange) || (this.colHeaderRange && this.table.arrangeCustomCellStyle({
+            range: this.colHeaderRange
+        }, void 0), colHeaderRange && this.table.arrangeCustomCellStyle({
+            range: colHeaderRange
+        }, "col-highlight"), this.colHeaderRange = colHeaderRange), !1 === (null === (_d = this.options) || void 0 === _d ? void 0 : _d.rowHighlight) || isSameRange(this.rowHeaderRange, rowHeaderRange) || (this.rowHeaderRange && this.table.arrangeCustomCellStyle({
+            range: this.rowHeaderRange
+        }, void 0), rowHeaderRange && this.table.arrangeCustomCellStyle({
+            range: rowHeaderRange
+        }, "row-highlight"), this.rowHeaderRange = rowHeaderRange);
+    }
+}
+
+function isSameRange(a, b) {
+    return void 0 === a && void 0 === b || void 0 !== a && void 0 !== b && (a.start.col === b.start.col && a.start.row === b.start.row && a.end.col === b.end.col && a.end.row === b.end.row);
+}
+//# sourceMappingURL=header-highlight.js.map

package/es/plugins/header-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugins/header-highlight.ts"],"names":[],"mappings":"AAYA,MAAM,OAAO,qBAAqB;IAKhC,YAAY,KAAmB,EAAE,OAAuC;QACtE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QAEvB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,aAAa;;QACX,IAAI,CAAC,KAAK,CAAC,uBAAuB,CAAC,eAAe,EAAE;YAClD,OAAO,EAAE,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,mBAAmB,mCAAI,SAAS;YACvD,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,mCAAI,MAAM;SACjD,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,CAAC,uBAAuB,CAAC,eAAe,EAAE;YAClD,OAAO,EAAE,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,mBAAmB,mCAAI,SAAS;YACvD,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,mCAAI,MAAM;SACjD,CAAC,CAAC;IACL,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE;YACjC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE;YACnC,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,SAAS,CAAC,CAAC;QACpG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,SAAS,CAAC,CAAC;QAGpG,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;IAClC,CAAC;IAED,eAAe;;QACb,IAAI,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,MAAK,KAAK,IAAI,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,MAAK,KAAK,EAAE;YAChF,OAAO;SACR;QACD,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;QACxD,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,OAAO;SACR;QAED,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;QACpC,MAAM,cAAc,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACpE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACrC,MAAM,cAAc,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACpE,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAErC,IAAI,cAAyB,CAAC;QAC9B,IAAI,cAAyB,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE;YAC7B,cAAc,GAAG;gBACf,KAAK,EAAE;oBACL,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;oBACtB,GAAG,EAAE,CAAC;iBACP;gBACD,GAAG,EAAE;oBACH,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;oBACtB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,sBAAsB,GAAG,CAAC;iBAC3C;aACF,CAAC;YACF,cAAc,GAAG;gBACf,KAAK,EAAE;oBACL,GAAG,EAAE,CAAC;oBACN,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;iBACvB;gBACD,GAAG,EAAE;oBACH,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,CAAC;oBACvC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;iBACvB;aACF,CAAC;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;YAC7C,cAAc,GAAG;gBACf,KAAK,EAAE;oBACL,GAAG,EAAE,CAAC;oBACN,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;iBACvB;gBACD,GAAG,EAAE;oBACH,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,CAAC;oBACvC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;iBACvB;aACF,CAAC;SACH;aAAM;YACL,cAAc,GAAG;gBACf,KAAK,EAAE;oBACL,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;oBACtB,GAAG,EAAE,CAAC;iBACP;gBACD,GAAG,EAAE;oBACH,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;oBACtB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,sBAAsB,GAAG,CAAC;iBAC3C;aACF,CAAC;YACF,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,eAAe,EAAE;gBAC5C,cAAc,GAAG;oBACf,KAAK,EAAE;wBACL,GAAG,EAAE,CAAC;wBACN,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;qBACvB;oBACD,GAAG,EAAE;wBACH,GAAG,EAAE,CAAC;wBACN,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;qBACvB;iBACF,CAAC;aACH;SACF;QAED,IAAI,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,MAAK,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE;YAC7F,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,SAAS,CAAC,CAAC;YACpG,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,eAAe,CAAC,CAAC;YAChG,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;SACtC;QAED,IAAI,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,MAAK,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE;YAC7F,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,SAAS,CAAC,CAAC;YACpG,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,eAAe,CAAC,CAAC;YAChG,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;SACtC;IACH,CAAC;CACF;AAED,SAAS,WAAW,CAAC,CAAwB,EAAE,CAAwB;IACrE,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,SAAS,EAAE;QACtC,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,SAAS,EAAE;QACtC,OAAO,KAAK,CAAC;KACd;IAED,OAAO,CACL,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CACjH,CAAC;AACJ,CAAC","file":"header-highlight.js","sourcesContent":["import type { CellRange } from '../ts-types';\nimport type { BaseTableAPI } from '../ts-types/base-table';\n\nexport interface IHeaderHighlightPluginOptions {\n  rowHighlight?: boolean;\n  colHighlight?: boolean;\n  colHighlightBGColor?: string;\n  colHighlightColor?: string;\n  rowHighlightBGColor?: string;\n  rowHighlightColor?: string;\n}\n\nexport class HeaderHighlightPlugin {\n  table: BaseTableAPI;\n  options: IHeaderHighlightPluginOptions;\n  colHeaderRange?: CellRange;\n  rowHeaderRange?: CellRange;\n  constructor(table: BaseTableAPI, options?: IHeaderHighlightPluginOptions) {\n    this.table = table;\n    this.options = options;\n\n    this.registerStyle();\n    this.bindEvent();\n  }\n\n  registerStyle() {\n    this.table.registerCustomCellStyle('col-highlight', {\n      bgColor: this.options?.colHighlightBGColor ?? '#82b2f5',\n      color: this.options?.colHighlightColor ?? '#FFF'\n    });\n\n    this.table.registerCustomCellStyle('row-highlight', {\n      bgColor: this.options?.rowHighlightBGColor ?? '#82b2f5',\n      color: this.options?.rowHighlightColor ?? '#FFF'\n    });\n  }\n\n  bindEvent() {\n    this.table.on('selected_cell', e => {\n      this.updateHighlight();\n    });\n\n    this.table.on('selected_clear', () => {\n      this.clearHighlight();\n    });\n  }\n\n  clearHighlight() {\n    this.colHeaderRange && this.table.arrangeCustomCellStyle({ range: this.colHeaderRange }, undefined);\n    this.rowHeaderRange && this.table.arrangeCustomCellStyle({ range: this.rowHeaderRange }, undefined);\n\n    // clear range\n    this.colHeaderRange = undefined;\n    this.rowHeaderRange = undefined;\n  }\n\n  updateHighlight() {\n    if (this.options?.colHighlight === false && this.options?.rowHighlight === false) {\n      return;\n    }\n    const selectRanges = this.table.getSelectedCellRanges();\n    if (selectRanges.length === 0) {\n      this.clearHighlight();\n      return;\n    }\n\n    const selectRange = selectRanges[0];\n    const rowSelectRange = [selectRange.start.row, selectRange.end.row];\n    rowSelectRange.sort((a, b) => a - b); // sort\n    const colSelectRange = [selectRange.start.col, selectRange.end.col];\n    colSelectRange.sort((a, b) => a - b); // sort\n\n    let colHeaderRange: CellRange;\n    let rowHeaderRange: CellRange;\n    if (this.table.isPivotTable()) {\n      colHeaderRange = {\n        start: {\n          col: colSelectRange[0],\n          row: 0\n        },\n        end: {\n          col: colSelectRange[1],\n          row: this.table.columnHeaderLevelCount - 1\n        }\n      };\n      rowHeaderRange = {\n        start: {\n          col: 0,\n          row: rowSelectRange[0]\n        },\n        end: {\n          col: this.table.rowHeaderLevelCount - 1,\n          row: rowSelectRange[1]\n        }\n      };\n    } else if (this.table.internalProps.transpose) {\n      rowHeaderRange = {\n        start: {\n          col: 0,\n          row: rowSelectRange[0]\n        },\n        end: {\n          col: this.table.rowHeaderLevelCount - 1,\n          row: rowSelectRange[1]\n        }\n      };\n    } else {\n      colHeaderRange = {\n        start: {\n          col: colSelectRange[0],\n          row: 0\n        },\n        end: {\n          col: colSelectRange[1],\n          row: this.table.columnHeaderLevelCount - 1\n        }\n      };\n      if (this.table.internalProps.rowSeriesNumber) {\n        rowHeaderRange = {\n          start: {\n            col: 0,\n            row: rowSelectRange[0]\n          },\n          end: {\n            col: 0,\n            row: rowSelectRange[1]\n          }\n        };\n      }\n    }\n\n    if (this.options?.colHighlight !== false && !isSameRange(this.colHeaderRange, colHeaderRange)) {\n      this.colHeaderRange && this.table.arrangeCustomCellStyle({ range: this.colHeaderRange }, undefined);\n      colHeaderRange && this.table.arrangeCustomCellStyle({ range: colHeaderRange }, 'col-highlight');\n      this.colHeaderRange = colHeaderRange;\n    }\n\n    if (this.options?.rowHighlight !== false && !isSameRange(this.rowHeaderRange, rowHeaderRange)) {\n      this.rowHeaderRange && this.table.arrangeCustomCellStyle({ range: this.rowHeaderRange }, undefined);\n      rowHeaderRange && this.table.arrangeCustomCellStyle({ range: rowHeaderRange }, 'row-highlight');\n      this.rowHeaderRange = rowHeaderRange;\n    }\n  }\n}\n\nfunction isSameRange(a: CellRange | undefined, b: CellRange | undefined) {\n  if (a === undefined && b === undefined) {\n    return true;\n  }\n\n  if (a === undefined || b === undefined) {\n    return false;\n  }\n\n  return (\n    a.start.col === b.start.col && a.start.row === b.start.row && a.end.col === b.end.col && a.end.row === b.end.row\n  );\n}\n"]}

package/es/plugins/invert-highlight.d.ts

@@ -0,0 +1,19 @@
+import type { Group } from '../scenegraph/graphic/group';
+import type { CellRange } from '../ts-types';
+import type { BaseTableAPI } from '../ts-types/base-table';
+export interface InvertHighlightPluginOptions {
+    fill?: string;
+    opacity?: number;
+}
+export declare class InvertHighlightPlugin {
+    table: BaseTableAPI;
+    range?: CellRange;
+    _fill: string;
+    _opacity: number;
+    constructor(table: BaseTableAPI, options?: InvertHighlightPluginOptions);
+    setInvertHighlightRange(range?: CellRange): void;
+    deleteAllCellGroupShadow(): void;
+    updateCellGroupShadow(): void;
+    updateCellGroupShadowInContainer(container: Group, range?: CellRange): void;
+}
+export declare function onBeforeAttributeUpdateForInvertHighlight(val: Record<string, any>, attribute: any): void;

package/es/plugins/invert-highlight.js

@@ -0,0 +1,69 @@
+import { createRect } from "./../vrender";
+
+import { isSameRange } from "../tools/cell-range";
+
+import { cellInRange } from "../tools/helper";
+
+import { isValid } from "@visactor/vutils";
+
+export class InvertHighlightPlugin {
+    constructor(table, options) {
+        var _a, _b;
+        this.table = table, this._fill = null !== (_a = null == options ? void 0 : options.fill) && void 0 !== _a ? _a : "#000", 
+        this._opacity = null !== (_b = null == options ? void 0 : options.opacity) && void 0 !== _b ? _b : .5;
+    }
+    setInvertHighlightRange(range) {
+        isSameRange(this.range, range) || (this.range = range, range ? this.updateCellGroupShadow() : this.deleteAllCellGroupShadow(), 
+        this.table.scenegraph.updateNextFrame());
+    }
+    deleteAllCellGroupShadow() {
+        this.table.isPivotTable() || (this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup), 
+        this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup)), 
+        this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup), this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup), 
+        this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup), 
+        this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup);
+    }
+    updateCellGroupShadow() {
+        this.table.isPivotTable() || (this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup, this.range), 
+        this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup, this.range)), 
+        this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup, this.range), 
+        this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup, this.range), 
+        this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup), 
+        this.range, this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup, this.range);
+    }
+    updateCellGroupShadowInContainer(container, range) {
+        container.forEachChildrenSkipChild((column => {
+            "column" === column.role && column.forEachChildrenSkipChild((cell => {
+                if ("cell" !== cell.role) return;
+                cell.attachShadow(cell.shadowRoot);
+                const shadowGroup = cell.shadowRoot;
+                if (range) {
+                    if (cellInRange(range, cell.col, cell.row)) shadowGroup.removeAllChild(); else if (!shadowGroup.firstChild) {
+                        const shadowRect = createRect({
+                            x: 0,
+                            y: 0,
+                            width: cell.attribute.width,
+                            height: cell.attribute.height,
+                            fill: this._fill,
+                            opacity: this._opacity
+                        });
+                        shadowRect.name = "shadow-rect", shadowGroup.appendChild(shadowRect);
+                    }
+                } else shadowGroup.removeAllChild();
+            }));
+        }));
+    }
+}
+
+export function onBeforeAttributeUpdateForInvertHighlight(val, attribute) {
+    var _a, _b;
+    const graphic = this;
+    if (graphic.shadowRoot && graphic.shadowRoot.childrenCount && (isValid(val.width) || isValid(val.height))) {
+        const shadowRect = graphic.shadowRoot.findChildrenByName("shadow-rect")[0];
+        shadowRect && shadowRect.setAttributes({
+            width: null !== (_a = val.width) && void 0 !== _a ? _a : shadowRect.attribute.width,
+            height: null !== (_b = val.height) && void 0 !== _b ? _b : shadowRect.attribute.height
+        });
+    }
+}
+//# sourceMappingURL=invert-highlight.js.map

package/es/plugins/invert-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugins/invert-highlight.ts"],"names":[],"mappings":"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","file":"invert-highlight.js","sourcesContent":["import type { Rect } from './../vrender';\nimport { createRect } from './../vrender';\nimport type { Group } from '../scenegraph/graphic/group';\nimport { isSameRange } from '../tools/cell-range';\nimport type { CellRange } from '../ts-types';\nimport type { BaseTableAPI } from '../ts-types/base-table';\nimport { cellInRange } from '../tools/helper';\nimport { isValid } from '@visactor/vutils';\n\nexport interface InvertHighlightPluginOptions {\n  fill?: string;\n  opacity?: number;\n}\n\nexport class InvertHighlightPlugin {\n  table: BaseTableAPI;\n  range?: CellRange;\n  _fill: string;\n  _opacity: number;\n\n  constructor(table: BaseTableAPI, options?: InvertHighlightPluginOptions) {\n    this.table = table;\n\n    this._fill = options?.fill ?? '#000';\n    this._opacity = options?.opacity ?? 0.5;\n  }\n\n  setInvertHighlightRange(range?: CellRange) {\n    if (isSameRange(this.range, range)) {\n      return;\n    }\n\n    this.range = range;\n    if (!range) {\n      // reset highlight\n      this.deleteAllCellGroupShadow();\n    } else {\n      // update highlight\n      this.updateCellGroupShadow();\n    }\n\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  deleteAllCellGroupShadow() {\n    if (!this.table.isPivotTable()) {\n      this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup);\n      this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup);\n    }\n    this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup);\n    this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup);\n    this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup);\n    this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup);\n  }\n\n  updateCellGroupShadow() {\n    if (!this.table.isPivotTable()) {\n      this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup, this.range);\n      this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup, this.range);\n    }\n    this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup, this.range);\n    this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup, this.range);\n    this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup), this.range;\n    this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup, this.range);\n  }\n  updateCellGroupShadowInContainer(container: Group, range?: CellRange) {\n    container.forEachChildrenSkipChild((column: Group) => {\n      if (column.role === 'column') {\n        column.forEachChildrenSkipChild((cell: Group) => {\n          if (cell.role !== 'cell') {\n            return;\n          }\n          cell.attachShadow(cell.shadowRoot);\n          const shadowGroup = cell.shadowRoot;\n          if (!range) {\n            // no highlight\n            shadowGroup.removeAllChild();\n          } else if (cellInRange(range, cell.col, cell.row)) {\n            // inside highlight\n            shadowGroup.removeAllChild();\n          } else if (!shadowGroup.firstChild) {\n            // outside highlight\n            const shadowRect = createRect({\n              x: 0,\n              y: 0,\n              width: cell.attribute.width,\n              height: cell.attribute.height,\n              fill: this._fill,\n              opacity: this._opacity\n            });\n            shadowRect.name = 'shadow-rect';\n            shadowGroup.appendChild(shadowRect);\n          }\n        });\n      }\n    });\n  }\n}\n\nexport function onBeforeAttributeUpdateForInvertHighlight(val: Record<string, any>, attribute: any) {\n  // @ts-ignore\n  const graphic = this as any;\n  if (graphic.shadowRoot && graphic.shadowRoot.childrenCount && (isValid(val.width) || isValid(val.height))) {\n    const shadowRect = (graphic.shadowRoot as Group).findChildrenByName('shadow-rect')[0] as Rect;\n    if (shadowRect) {\n      shadowRect.setAttributes({\n        width: val.width ?? shadowRect.attribute.width,\n        height: val.height ?? shadowRect.attribute.height\n      });\n    }\n  }\n}\n"]}

package/es/scenegraph/component/cell-mover.d.ts

@@ -9,7 +9,12 @@ export declare class CellMover {
     x?: number;
     constructor(table: BaseTableAPI);
     appand(parent: Group): void;
-    show(col: number, row: number, delta: number): void;
+    show(col: number, row: number, delta: number): {
+        backX: number;
+        lineX: number;
+        backY: number;
+        lineY: number;
+    };
     hide(): void;
     update(backX: number | undefined, lineX: number | undefined, backY: number | undefined, lineY: number | undefined): void;
     updateStyle(): void;

package/es/scenegraph/component/cell-mover.js

@@ -45,7 +45,7 @@ export class CellMover {
         mergeInfo && (col = mergeInfo.start.col, row = mergeInfo.start.row);
         let rectX = 0, rectY = 0, rectWidth = 0, rectHeight = 0, rectDx = 0, rectDy = 0, symbolX = 0, symbolY = 0, symbolRotate = Math.PI;
         const linePoints = [];
-        "columnHeader" === cellLocation ? (rectX = this.table.getColsWidth(0, col - 1) - this.table.stateManager.scroll.horizontalBarPos, 
+        return "columnHeader" === cellLocation ? (rectX = this.table.getColsWidth(0, col - 1) - this.table.stateManager.scroll.horizontalBarPos, 
         rectY = this.table.getRowsHeight(0, this.table.frozenRowCount - 1), rectHeight = this.table.tableNoFrameHeight, 
         rectWidth = mergeInfo ? this.table.getColsWidth(mergeInfo.start.col, mergeInfo.end.col) : this.table.getColWidth(col), 
         rectDx = rectX - delta, symbolX = rectX + rectWidth, symbolY = 2, linePoints.push({
@@ -82,7 +82,12 @@ export class CellMover {
             x: symbolX,
             y: symbolY,
             angle: symbolRotate
-        });
+        }), {
+            backX: rectX - rectDx,
+            lineX: symbolX,
+            backY: rectY - rectDy,
+            lineY: symbolY
+        };
     }
     hide() {
         this.columnMoverLabel.setAttribute("visible", !1), this.columnMoverLine.setAttribute("visible", !1), 

package/es/scenegraph/component/cell-mover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/scenegraph/component/cell-mover.ts"],"names":[],"mappings":"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","file":"cell-mover.js","sourcesContent":["import type { ILine, IRect, ISymbol } from './../../vrender';\nimport { createLine, createRect, createSymbol } from './../../vrender';\nimport { getCellMergeInfo } from '../utils/get-cell-merge';\nimport type { Group } from '../graphic/group';\nimport type { BaseTableAPI } from '../../ts-types/base-table';\nimport type { SimpleHeaderLayoutMap } from '../../layout';\n\nexport class CellMover {\n  columnMoverLabel: ISymbol;\n  columnMoverLine: ILine;\n  columnMoverBack: IRect;\n  table: BaseTableAPI;\n  x?: number;\n\n  constructor(table: BaseTableAPI) {\n    const columnMoverLineWidth = table.theme.dragHeaderSplitLine.lineWidth;\n    const columnMoverLineColor = table.theme.dragHeaderSplitLine.lineColor;\n    const columnMoverShadowBlockColor = table.theme.dragHeaderSplitLine.shadowBlockColor;\n\n    this.columnMoverLabel = createSymbol({\n      visible: false,\n      pickable: false,\n      x: 0,\n      y: 0,\n      symbolType: 'triangle',\n      fill: columnMoverLineColor as string\n    });\n    this.columnMoverLine = createLine({\n      visible: false,\n      pickable: false,\n      stroke: columnMoverLineColor as string,\n      lineWidth: columnMoverLineWidth as number,\n      x: 0,\n      y: 0,\n      points: [\n        { x: 0, y: 0 },\n        { x: 0, y: 0 }\n      ]\n    });\n\n    // 列顺序调整阴影块\n    this.columnMoverBack = createRect({\n      visible: false,\n      pickable: false,\n      fill: columnMoverShadowBlockColor,\n      x: 0,\n      y: 0,\n      width: 0,\n      height: 0\n    });\n\n    this.table = table;\n  }\n\n  appand(parent: Group) {\n    parent.appendChild(this.columnMoverLabel);\n    parent.appendChild(this.columnMoverLine);\n    parent.appendChild(this.columnMoverBack);\n  }\n\n  show(col: number, row: number, delta: number) {\n    const cellLocation = this.table.getCellLocation(col, row);\n    const mergeInfo = getCellMergeInfo(this.table, col, row);\n    if (mergeInfo) {\n      col = mergeInfo.start.col;\n      row = mergeInfo.start.row;\n    }\n\n    let rectX = 0;\n    let rectY = 0;\n    let rectWidth = 0;\n    let rectHeight = 0;\n    let rectDx = 0;\n    let rectDy = 0;\n    let symbolX = 0;\n    let symbolY = 0;\n    let symbolRotate = Math.PI;\n    const linePoints: { x: number; y: number }[] = [];\n    if (cellLocation === 'columnHeader') {\n      rectX = this.table.getColsWidth(0, col - 1) - this.table.stateManager.scroll.horizontalBarPos;\n      rectY = this.table.getRowsHeight(0, this.table.frozenRowCount - 1);\n      rectHeight = this.table.tableNoFrameHeight;\n      if (mergeInfo) {\n        rectWidth = this.table.getColsWidth(mergeInfo.start.col, mergeInfo.end.col);\n      } else {\n        rectWidth = this.table.getColWidth(col);\n      }\n      rectDx = rectX - delta;\n\n      symbolX = rectX + rectWidth;\n      symbolY = 2;\n\n      linePoints.push({ x: 0, y: 0 });\n      linePoints.push({ x: 0, y: this.table.tableNoFrameHeight });\n    } else if (\n      cellLocation === 'rowHeader' ||\n      (this.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row)\n    ) {\n      rectY = this.table.getRowsHeight(0, row - 1) - this.table.stateManager.scroll.verticalBarPos;\n      rectX = this.table.getColsWidth(0, this.table.frozenColCount - 1);\n      rectWidth = this.table.tableNoFrameWidth;\n      if (mergeInfo) {\n        rectHeight = this.table.getRowsHeight(mergeInfo.start.row, mergeInfo.end.row);\n      } else {\n        rectHeight = this.table.getRowHeight(row);\n      }\n      rectDy = rectY - delta;\n\n      symbolX = 2;\n      symbolY = rectY + rectHeight;\n      symbolRotate = Math.PI / 2;\n\n      linePoints.push({ x: 0, y: 0 });\n      linePoints.push({ x: this.table.tableNoFrameWidth, y: 0 });\n    }\n\n    this.columnMoverBack.setAttributes({\n      visible: true,\n      x: rectX - rectDx,\n      y: rectY - rectDy,\n      width: rectWidth,\n      height: rectHeight,\n      dx: rectDx,\n      dy: rectDy\n    });\n    this.columnMoverLine.setAttributes({\n      x: symbolX,\n      y: symbolY,\n      visible: true,\n      points: linePoints\n    });\n    this.columnMoverLabel.setAttributes({\n      visible: true,\n      x: symbolX,\n      y: symbolY,\n      angle: symbolRotate\n    });\n  }\n\n  hide() {\n    this.columnMoverLabel.setAttribute('visible', false);\n    this.columnMoverLine.setAttribute('visible', false);\n    this.columnMoverBack.setAttribute('visible', false);\n  }\n\n  update(backX: number | undefined, lineX: number | undefined, backY: number | undefined, lineY: number | undefined) {\n    if (typeof backX === 'number' && typeof lineX === 'number') {\n      this.columnMoverLabel.setAttribute('x', lineX);\n      this.columnMoverLine.setAttribute('x', lineX);\n      this.columnMoverBack.setAttribute('x', backX);\n    } else if (typeof backY === 'number' && typeof lineY === 'number') {\n      this.columnMoverLabel.setAttribute('y', lineY);\n      this.columnMoverLine.setAttribute('y', lineY);\n      this.columnMoverBack.setAttribute('y', backY);\n    }\n  }\n\n  updateStyle() {\n    const columnMoverLineWidth = this.table.theme.dragHeaderSplitLine.lineWidth;\n    const columnMoverLineColor = this.table.theme.dragHeaderSplitLine.lineColor;\n    const columnMoverShadowBlockColor = this.table.theme.dragHeaderSplitLine.shadowBlockColor;\n\n    this.columnMoverLabel.setAttributes({\n      fill: columnMoverLineColor as string\n    });\n    this.columnMoverLine.setAttributes({\n      stroke: columnMoverLineColor as string,\n      lineWidth: columnMoverLineWidth as number\n    });\n\n    // 列顺序调整阴影块\n    this.columnMoverBack.setAttributes({\n      fill: columnMoverShadowBlockColor\n    });\n  }\n}\n"]}
+{"version":3,"sources":["../src/scenegraph/component/cell-mover.ts"],"names":[],"mappings":"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","file":"cell-mover.js","sourcesContent":["import type { ILine, IRect, ISymbol } from './../../vrender';\nimport { createLine, createRect, createSymbol } from './../../vrender';\nimport { getCellMergeInfo } from '../utils/get-cell-merge';\nimport type { Group } from '../graphic/group';\nimport type { BaseTableAPI } from '../../ts-types/base-table';\nimport type { SimpleHeaderLayoutMap } from '../../layout';\n\nexport class CellMover {\n  columnMoverLabel: ISymbol;\n  columnMoverLine: ILine;\n  columnMoverBack: IRect;\n  table: BaseTableAPI;\n  x?: number;\n\n  constructor(table: BaseTableAPI) {\n    const columnMoverLineWidth = table.theme.dragHeaderSplitLine.lineWidth;\n    const columnMoverLineColor = table.theme.dragHeaderSplitLine.lineColor;\n    const columnMoverShadowBlockColor = table.theme.dragHeaderSplitLine.shadowBlockColor;\n\n    this.columnMoverLabel = createSymbol({\n      visible: false,\n      pickable: false,\n      x: 0,\n      y: 0,\n      symbolType: 'triangle',\n      fill: columnMoverLineColor as string\n    });\n    this.columnMoverLine = createLine({\n      visible: false,\n      pickable: false,\n      stroke: columnMoverLineColor as string,\n      lineWidth: columnMoverLineWidth as number,\n      x: 0,\n      y: 0,\n      points: [\n        { x: 0, y: 0 },\n        { x: 0, y: 0 }\n      ]\n    });\n\n    // 列顺序调整阴影块\n    this.columnMoverBack = createRect({\n      visible: false,\n      pickable: false,\n      fill: columnMoverShadowBlockColor,\n      x: 0,\n      y: 0,\n      width: 0,\n      height: 0\n    });\n\n    this.table = table;\n  }\n\n  appand(parent: Group) {\n    parent.appendChild(this.columnMoverLabel);\n    parent.appendChild(this.columnMoverLine);\n    parent.appendChild(this.columnMoverBack);\n  }\n\n  show(col: number, row: number, delta: number) {\n    const cellLocation = this.table.getCellLocation(col, row);\n    const mergeInfo = getCellMergeInfo(this.table, col, row);\n    if (mergeInfo) {\n      col = mergeInfo.start.col;\n      row = mergeInfo.start.row;\n    }\n\n    let rectX = 0;\n    let rectY = 0;\n    let rectWidth = 0;\n    let rectHeight = 0;\n    let rectDx = 0;\n    let rectDy = 0;\n    let symbolX = 0;\n    let symbolY = 0;\n    let symbolRotate = Math.PI;\n    const linePoints: { x: number; y: number }[] = [];\n    if (cellLocation === 'columnHeader') {\n      rectX = this.table.getColsWidth(0, col - 1) - this.table.stateManager.scroll.horizontalBarPos;\n      rectY = this.table.getRowsHeight(0, this.table.frozenRowCount - 1);\n      rectHeight = this.table.tableNoFrameHeight;\n      if (mergeInfo) {\n        rectWidth = this.table.getColsWidth(mergeInfo.start.col, mergeInfo.end.col);\n      } else {\n        rectWidth = this.table.getColWidth(col);\n      }\n      rectDx = rectX - delta;\n\n      symbolX = rectX + rectWidth;\n      symbolY = 2;\n\n      linePoints.push({ x: 0, y: 0 });\n      linePoints.push({ x: 0, y: this.table.tableNoFrameHeight });\n    } else if (\n      cellLocation === 'rowHeader' ||\n      (this.table.internalProps.layoutMap as SimpleHeaderLayoutMap).isSeriesNumberInBody(col, row)\n    ) {\n      rectY = this.table.getRowsHeight(0, row - 1) - this.table.stateManager.scroll.verticalBarPos;\n      rectX = this.table.getColsWidth(0, this.table.frozenColCount - 1);\n      rectWidth = this.table.tableNoFrameWidth;\n      if (mergeInfo) {\n        rectHeight = this.table.getRowsHeight(mergeInfo.start.row, mergeInfo.end.row);\n      } else {\n        rectHeight = this.table.getRowHeight(row);\n      }\n      rectDy = rectY - delta;\n\n      symbolX = 2;\n      symbolY = rectY + rectHeight;\n      symbolRotate = Math.PI / 2;\n\n      linePoints.push({ x: 0, y: 0 });\n      linePoints.push({ x: this.table.tableNoFrameWidth, y: 0 });\n    }\n\n    this.columnMoverBack.setAttributes({\n      visible: true,\n      x: rectX - rectDx,\n      y: rectY - rectDy,\n      width: rectWidth,\n      height: rectHeight,\n      dx: rectDx,\n      dy: rectDy\n    });\n    this.columnMoverLine.setAttributes({\n      x: symbolX,\n      y: symbolY,\n      visible: true,\n      points: linePoints\n    });\n    this.columnMoverLabel.setAttributes({\n      visible: true,\n      x: symbolX,\n      y: symbolY,\n      angle: symbolRotate\n    });\n    return {\n      backX: rectX - rectDx,\n      lineX: symbolX,\n      backY: rectY - rectDy,\n      lineY: symbolY\n    };\n  }\n\n  hide() {\n    this.columnMoverLabel.setAttribute('visible', false);\n    this.columnMoverLine.setAttribute('visible', false);\n    this.columnMoverBack.setAttribute('visible', false);\n  }\n\n  update(backX: number | undefined, lineX: number | undefined, backY: number | undefined, lineY: number | undefined) {\n    if (typeof backX === 'number' && typeof lineX === 'number') {\n      this.columnMoverLabel.setAttribute('x', lineX);\n      this.columnMoverLine.setAttribute('x', lineX);\n      this.columnMoverBack.setAttribute('x', backX);\n    } else if (typeof backY === 'number' && typeof lineY === 'number') {\n      this.columnMoverLabel.setAttribute('y', lineY);\n      this.columnMoverLine.setAttribute('y', lineY);\n      this.columnMoverBack.setAttribute('y', backY);\n    }\n  }\n\n  updateStyle() {\n    const columnMoverLineWidth = this.table.theme.dragHeaderSplitLine.lineWidth;\n    const columnMoverLineColor = this.table.theme.dragHeaderSplitLine.lineColor;\n    const columnMoverShadowBlockColor = this.table.theme.dragHeaderSplitLine.shadowBlockColor;\n\n    this.columnMoverLabel.setAttributes({\n      fill: columnMoverLineColor as string\n    });\n    this.columnMoverLine.setAttributes({\n      stroke: columnMoverLineColor as string,\n      lineWidth: columnMoverLineWidth as number\n    });\n\n    // 列顺序调整阴影块\n    this.columnMoverBack.setAttributes({\n      fill: columnMoverShadowBlockColor\n    });\n  }\n}\n"]}

package/es/scenegraph/component/custom.d.ts

@@ -1,3 +1,4 @@
+import type { ITimeline } from './../../vrender';
 import { Group as VGroup } from './../../vrender';
 import type { CellRange, ICustomLayout, ICustomRender } from '../../ts-types';
 import type { BaseTableAPI } from '../../ts-types/base-table';
@@ -9,4 +10,4 @@ export declare function dealWithCustom(customLayout: ICustomLayout, customRender
     renderDefault: boolean;
 };
 export declare function dealPercentCalc(group: VGroup, parentWidth: number, parentHeight: number): void;
-export declare function decodeReactDom(dom: any): any;
+export declare function decodeReactDom(dom: any, timeline?: ITimeline): any;

package/es/scenegraph/component/custom.js

@@ -36,7 +36,7 @@ export function dealWithCustom(customLayout, customRender, col, row, width, heig
             originCol: col,
             originRow: row
         });
-        customRenderObj.rootContainer && (customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer)), 
+        customRenderObj.rootContainer && (customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer, table.animationManager.timeline)), 
         customRenderObj.rootContainer instanceof VGroup && (elementsGroup = customRenderObj.rootContainer, 
         elementsGroup.name = CUSTOM_CONTAINER_NAME, elementsGroup.col = col, elementsGroup.row = row), 
         renderDefault = customRenderObj.renderDefault, enableCellPadding = customRenderObj.enableCellPadding;
@@ -243,16 +243,22 @@ export function dealPercentCalc(group, parentWidth, parentHeight) {
     }));
 }
 
-export function decodeReactDom(dom) {
+export function decodeReactDom(dom, timeline) {
     if (!dom || !isValid(dom.$$typeof) && !isValid(dom.vtype)) return dom;
-    const type = dom.type, {attribute: attribute, children: children, stateProxy: stateProxy} = dom.props, g = type({
+    const type = dom.type, {attribute: attribute, children: children, stateProxy: stateProxy, animation: animation} = dom.props, g = type({
         attribute: attribute
     });
-    return parseToGraphic(g, dom.props), stateProxy && (g.stateProxy = stateProxy), 
-    g.id = attribute.id, g.name = attribute.name, isArray(children) ? children.forEach((item => {
-        const c = decodeReactDom(item);
+    if (parseToGraphic(g, dom.props), stateProxy && (g.stateProxy = stateProxy), g.id = attribute.id, 
+    g.name = attribute.name, isArray(children) ? children.forEach((item => {
+        const c = decodeReactDom(item, timeline);
         c && c.type && g.add(c);
-    })) : children && g.add(decodeReactDom(children)), g;
+    })) : children && g.add(decodeReactDom(children, timeline)), isArray(animation) && timeline) {
+        const animate = g.animate();
+        animate.setTimeline(timeline), animation.forEach((item => {
+            animate[item[0]](...item.slice(1));
+        }));
+    }
+    return g;
 }
 
 function parseToGraphic(g, props) {