feat: cell support multi-custom-style #2841

VisActor · Nov 21, 2024 · dbf4ef7 · dbf4ef7
1 parent 65ea8fb
commit dbf4ef7
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 12 deletions.
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
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: cell support multi-custom-style #2841",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git 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
@@ -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) {