feat: add column resize label theme

VisActor · Dec 29, 2023 · c77ebd9 · c77ebd9
1 parent 0908d2c
commit c77ebd9
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/common/changes/@visactor/vtable/feat-column-resize-theme_2023-12-29-07-08.json b/common/changes/@visactor/vtable/feat-column-resize-theme_2023-12-29-07-08.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: add column resize label theme",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git a/packages/vtable/src/scenegraph/component/table-component.ts b/packages/vtable/src/scenegraph/component/table-component.ts
@@ -42,6 +42,12 @@ export class TableComponent {
     const columnResizeWidth = theme.columnResize?.lineWidth;
     const columnResizeBgColor = theme.columnResize?.bgColor;
     const columnResizeBgWidth = theme.columnResize?.width;
+    const labelColor = theme.columnResize?.labelColor;
+    const labelFontSize = theme.columnResize?.labelFontSize;
+    const labelFontFamily = theme.columnResize?.labelFontFamily;
+    const labelBackgroundFill = theme.columnResize?.labelBackgroundFill;
+    const labelBackgroundCornerRadius = theme.columnResize?.labelBackgroundCornerRadius;
+
     this.columnResizeLine = createLine({
       visible: false,
       pickable: false,
@@ -74,24 +80,25 @@ export class TableComponent {
       pickable: false,
       x: 0,
       y: 0,
-      fontSize: 10,
-      fill: '#FFF',
+      fontSize: labelFontSize, // 10
+      fill: labelColor,
+      fontFamily: labelFontFamily,
       text: '',
       textBaseline: 'top',
       dx: 12 + 4,
-      dy: -8 + 2
+      dy: -labelFontSize / 2
     });
     const columnResizeLabelBack = createRect({
       visible: false,
       pickable: false,
-      fill: '#3073F2',
+      fill: labelBackgroundFill,
       x: 0,
       y: 0,
-      width: 38,
-      height: 16,
-      cornerRadius: 5,
+      width: 5 * labelFontSize * 0.8,
+      height: labelFontSize + 8,
+      cornerRadius: labelBackgroundCornerRadius,
       dx: 12,
-      dy: -8
+      dy: -labelFontSize / 2 - 4
     });
     this.columnResizeLabel = createGroup({
       visible: false,

diff --git a/packages/vtable/src/themes/theme.ts b/packages/vtable/src/themes/theme.ts
@@ -500,6 +500,21 @@ export class TableTheme implements ITableThemeDefine {
         },
         get width(): number {
           return columnResize.width ?? columnResize.lineWidth + 2;
+        },
+        get labelColor(): string {
+          return columnResize.labelColor ?? '#FFF';
+        },
+        get labelFontSize(): number {
+          return columnResize.labelFontSize ?? 10;
+        },
+        get labelFontFamily(): string {
+          return columnResize.labelFontFamily ?? 'sans-serif';
+        },
+        get labelBackgroundFill(): string {
+          return columnResize.labelBackgroundFill ?? '#3073F2';
+        },
+        get labelBackgroundCornerRadius(): number {
+          return columnResize.labelBackgroundCornerRadius ?? 5;
         }
       };
     }

diff --git a/packages/vtable/src/ts-types/theme.ts b/packages/vtable/src/ts-types/theme.ts
@@ -91,6 +91,11 @@ export interface ITableThemeDefine {
     bgColor?: ColorPropertyDefine; //背景线的颜色
     lineWidth: number; //上面线的宽度
     width?: number; //背景线的宽度
+    labelColor?: string; //label的颜色
+    labelFontSize?: number; //label的字体大小
+    labelFontFamily?: string; //label的字体
+    labelBackgroundFill?: string; //label的背景填充
+    labelBackgroundCornerRadius?: number; //label的背景圆角
   };
   //拖拽表格换位分割线的样式
   dragHeaderSplitLine?: {