feat: add barMarkInBar style config in progressbar #3616

Author: Rui-Sun

common/changes/@visactor/vtable/feat-barMarkInBar_2025-03-25-07-07.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: add barMarkInBar style config in progressbar #3616",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

docs/assets/option/en/common/style.md

@@ -235,6 +235,10 @@ Progress bar mark width
 
 Progress bar mark position, can be set to `'right' | 'bottom'`, default is `'right'`.
 
+#${prefix} barMarkInBar(boolean)
+
+Progress bar mark shows inside of bar, default is `true`。
+
 {{ /if }}
 
 {{ if: ${isCheckbox} }}

docs/assets/option/zh/common/style.md

@@ -236,6 +236,10 @@
 
 进度条标记位置，可设置`'right' | 'bottom'`，默认`'right'`。
 
+#${prefix} barMarkInBar(boolean)
+
+进度条标记是否显示在进度条内侧，默认`true`。
+
 {{ /if }}
 
 {{ if: ${isCheckbox} }}

packages/vtable/src/body-helper/style/ProgressBarStyle.ts

@@ -35,6 +35,7 @@ export class ProgressBarStyle extends Style {
   private _barMarkWidth: number;
   private _barMarkPosition: 'right' | 'bottom';
   private _barRightToLeft: boolean;
+  private _barMarkInBar: boolean;
 
   static get DEFAULT(): ProgressBarStyle {
     return defaultStyle ? defaultStyle : (defaultStyle = new ProgressBarStyle());
@@ -57,6 +58,7 @@ export class ProgressBarStyle extends Style {
     this._barMarkWidth = style.barMarkWidth ?? 2;
     this._barMarkPosition = style.barMarkPosition ?? 'right';
     this._barRightToLeft = style.barRightToLeft ?? false;
+    this._barMarkInBar = style.barMarkInBar ?? true;
   }
   get showBar(): boolean | ((args: StylePropertyFunctionArg) => boolean) {
     return this._showBar;
@@ -163,6 +165,13 @@ export class ProgressBarStyle extends Style {
     this._barRightToLeft = value;
     //this.doChangeStyle();
   }
+  get barMarkInBar(): boolean {
+    return this._barMarkInBar;
+  }
+  set barMarkInBar(value: boolean) {
+    this._barMarkInBar = value;
+    //this.doChangeStyle();
+  }
   clone(): ProgressBarStyle {
     return new ProgressBarStyle(this, null);
   }

packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts

@@ -100,7 +100,8 @@ export function createProgressBarCell(
     barMarkPositiveColor,
     barMarkNegativeColor,
     barMarkWidth,
-    barMarkPosition
+    barMarkPosition,
+    barMarkInBar
   } = style;
   let { barHeight, barBottom, barPadding } = style;
   // const { col, row, dataValue: originalValue } = context;
@@ -128,9 +129,14 @@ export function createProgressBarCell(
 
   const borderWidth = getQuadProps(getProp('borderLineWidth', style, col, row, table));
   const barPaddingTop = Math.max((barPadding as number[])[0], Math.ceil(borderWidth[0] / 2));
-  const barPaddingRight = Math.max((barPadding as number[])[1], Math.floor(borderWidth[1] / 2));
+  let barPaddingRight = Math.max((barPadding as number[])[1], Math.floor(borderWidth[1] / 2));
   const barPaddingBottom = Math.max((barPadding as number[])[2], Math.floor(borderWidth[2] / 2));
-  const barPaddingLeft = Math.max((barPadding as number[])[3], Math.ceil(borderWidth[3] / 2));
+  let barPaddingLeft = Math.max((barPadding as number[])[3], Math.ceil(borderWidth[3] / 2));
+
+  if (showBarMark && barMarkWidth > 0 && barMarkPosition === 'right' && barMarkInBar === false) {
+    barPaddingRight += barMarkWidth;
+    barPaddingLeft += barMarkWidth;
+  }
 
   contentWidth -= barPaddingRight + barPaddingLeft;
   contentHeight -= barPaddingBottom + barPaddingTop;
@@ -395,7 +401,7 @@ export function createProgressBarCell(
           if (barMarkPosition === 'right') {
             const markLeft = barRightToLeft
               ? barRectPosi.left + barMarkWidth / 2
-              : barRectPosi.left + barRectPosi.width - barMarkWidth / 2;
+              : barRectPosi.left + barRectPosi.width + (barMarkInBar ? -barMarkWidth / 2 : barMarkWidth / 2);
             points.push({ x: markLeft, y: barRectPosi.top });
             points.push({ x: markLeft, y: barRectPosi.top + barRectPosi.height });
           } else if (barMarkPosition === 'bottom') {

packages/vtable/src/ts-types/column/style.ts

@@ -180,6 +180,8 @@ export interface ProgressBarStyleOption extends IStyleOption {
   barMarkWidth?: number;
   // 进度条标记位置
   barMarkPosition?: 'right' | 'bottom';
+  // 进度条标记是否在进度条内
+  barMarkInBar?: boolean;
 }
 
 export type CheckboxStyleOption = {