From dbf4ef7f373a49738d5fc8c7d96be033bc3c5ed9 Mon Sep 17 00:00:00 2001
From: Rui-Sun <sunrui1992@foxmail.com>
Date: Thu, 21 Nov 2024 15:17:56 +0800
Subject: [PATCH] feat: cell support multi-custom-style #2841

---
 ...t-multi-custom-style_2024-11-21-07-17.json | 10 ++++++
 .../examples/style/custom-cell-style.ts       | 27 ++++++++++++++--
 .../vtable/src/plugins/custom-cell-style.ts   | 32 +++++++++++++------
 3 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 common/changes/@visactor/vtable/feat-multi-custom-style_2024-11-21-07-17.json

diff --git a/common/changes/@visactor/vtable/feat-multi-custom-style_2024-11-21-07-17.json b/common/changes/@visactor/vtable/feat-multi-custom-style_2024-11-21-07-17.json
new file mode 100644
index 000000000..b406317bb
--- /dev/null
+++ b/common/changes/@visactor/vtable/feat-multi-custom-style_2024-11-21-07-17.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: cell support multi-custom-style #2841",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
\ No newline at end of file
diff --git a/packages/vtable/examples/style/custom-cell-style.ts b/packages/vtable/examples/style/custom-cell-style.ts
index 1a7b0244c..78f5c0a39 100644
--- a/packages/vtable/examples/style/custom-cell-style.ts
+++ b/packages/vtable/examples/style/custom-cell-style.ts
@@ -346,8 +346,8 @@ export function createTable() {
             })`;
           },
           barColor: 'transparent'
-        }),
-        cellType: 'progressbar'
+        })
+        // cellType: 'progressbar'
         // headerType: 'MULTILINETEXT',
       },
       {
@@ -357,7 +357,7 @@ export function createTable() {
           // if (rec.rowDimensions[0].value === '东北') return `${rec.dataValue}%`;
           return value;
         },
-        cellType: 'progressbar',
+        // cellType: 'progressbar',
         // headerStyle: {
         //   bgColor(arg: VTable.TYPES.StylePropertyFunctionArg) {
         //     if (
@@ -476,6 +476,12 @@ export function createTable() {
         style: {
           bgColor: 'red'
         }
+      },
+      {
+        id: 'custom-2',
+        style: {
+          color: 'green'
+        }
       }
     ],
     customCellStyleArrangement: [
@@ -485,6 +491,21 @@ export function createTable() {
           row: 4
         },
         customStyleId: 'custom-1'
+      },
+      {
+        cellPosition: {
+          range: {
+            start: {
+              col: 2,
+              row: 3
+            },
+            end: {
+              col: 4,
+              row: 5
+            }
+          }
+        },
+        customStyleId: 'custom-2'
       }
     ]
   };
diff --git a/packages/vtable/src/plugins/custom-cell-style.ts b/packages/vtable/src/plugins/custom-cell-style.ts
index bbe821eac..2deee186e 100644
--- a/packages/vtable/src/plugins/custom-cell-style.ts
+++ b/packages/vtable/src/plugins/custom-cell-style.ts
@@ -1,3 +1,4 @@
+import { merge } from '@visactor/vutils';
 import type { Style } from '../body-helper/style';
 import type {
   CellRange,
@@ -24,16 +25,27 @@ export class CustomCellStylePlugin {
   }
 
   getCustomCellStyle(col: number, row: number) {
-    const customStyleId = this.getCustomCellStyleId(col, row);
-    if (customStyleId) {
-      const styleOption = this.getCustomCellStyleOption(customStyleId);
-      return styleOption?.style;
+    const customStyleIds = this.getCustomCellStyleIds(col, row);
+    if (customStyleIds.length) {
+      const styles: ColumnStyleOption[] = [];
+
+      customStyleIds.forEach(customStyleId => {
+        const styleOption = this.getCustomCellStyleOption(customStyleId);
+        if (styleOption?.style) {
+          styles.push(styleOption.style);
+        }
+      });
+
+      return merge({}, ...styles);
+      // const styleOption = this.getCustomCellStyleOption(customStyleId);
+      // return styleOption?.style;
     }
     return undefined;
   }
 
-  getCustomCellStyleId(col: number, row: number) {
-    let customStyleId;
+  getCustomCellStyleIds(col: number, row: number) {
+    // let customStyleId;
+    const customStyleIds: string[] = [];
 
     const range = this.table.getCellRange(col, row);
     for (let c = range.start.col; c <= range.end.col; c++) {
@@ -47,16 +59,18 @@ export class CustomCellStylePlugin {
               style.cellPosition.range.start.row <= r &&
               style.cellPosition.range.end.row >= r
             ) {
-              customStyleId = style.customStyleId;
+              // customStyleId = style.customStyleId;
+              customStyleIds.push(style.customStyleId);
             }
           } else if (style.cellPosition.col === c && style.cellPosition.row === r) {
-            customStyleId = style.customStyleId;
+            // customStyleId = style.customStyleId;
+            customStyleIds.push(style.customStyleId);
           }
         });
       }
     }
 
-    return customStyleId;
+    return customStyleIds;
   }
 
   getCustomCellStyleOption(customStyleId: string) {