Merge pull request #2038 from VisActor/feat/support-minSliderSize-ins-scrollbar

Feat/support min slider size ins scrollbar

Author: xuefei1313

common/changes/@visactor/vrender-components/feat-support-minSliderSize-ins-scrollbar_2026-01-21-10-52.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: support minSliderSize in scrollBar\n\n",
+      "type": "none",
+      "packageName": "@visactor/vrender-components"
+    }
+  ],
+  "packageName": "@visactor/vrender-components",
+  "email": "lixuef1313@163.com"
+}

packages/vrender-components/__tests__/browser/examples/scrollbar.ts

@@ -13,10 +13,11 @@ export function run() {
     height: 12,
     padding: [2, 0],
     realTime: false,
+    minSliderSize: 20,
     railStyle: {
       fill: 'rgba(0, 0, 0, .1)'
     },
-    range: [0, 0.05],
+    range: [0, 0.0001],
     delayTime: 0
     // scrollRange: [0.4, 0.8]
   });
@@ -30,6 +31,7 @@ export function run() {
     height: 500,
     padding: [0, 2],
     delayTime: 0,
+    // minSliderSize: 20,
     railStyle: {
       fill: 'rgba(0, 0, 0, .1)'
       //
@@ -49,7 +51,7 @@ export function run() {
   });
 
   for (let j = 0; j < 10; j++) {
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 1000; i++) {
       let fill = 'green';
       if (i > 6) {
         fill = 'orange';
@@ -73,32 +75,32 @@ export function run() {
     }
   }
 
-  const stage = render([group], 'main');
+  const stage = render([group, hScrollBar, vScrollBar], 'main');
   window.stage = stage;
-  hScrollBar.addEventListener('mouseenter', e => {
-    console.log('abc');
-    hScrollBar.setAttributes({ visible: true });
-    hScrollBar.showAll();
-  });
-  hScrollBar.addEventListener('mouseleave', e => {
-    console.log('def');
-    hScrollBar.setAttributes({ visibleAll: false });
-    hScrollBar.hideAll();
-  });
+  // hScrollBar.addEventListener('mouseenter', e => {
+  //   console.log('abc');
+  //   hScrollBar.setAttributes({ visible: true });
+  //   hScrollBar.showAll();
+  // });
+  // hScrollBar.addEventListener('mouseleave', e => {
+  //   console.log('def');
+  //   hScrollBar.setAttributes({ visibleAll: false });
+  //   hScrollBar.hideAll();
+  // });
 
-  hScrollBar.addEventListener('scrollDown', e => {
-    console.log('hScrollBar', e.detail);
-  });
+  // hScrollBar.addEventListener('scrollDown', e => {
+  //   console.log('hScrollBar', e.detail);
+  // });
 
-  vScrollBar.addEventListener('scrollDown', e => {
-    console.log('vScrollBar', e.detail);
-  });
+  // vScrollBar.addEventListener('scrollDown', e => {
+  //   console.log('vScrollBar', e.detail);
+  // });
 
-  hScrollBar.addEventListener('scroll', e => {
-    console.log('hScrollBar', e.detail.value);
-  });
+  // hScrollBar.addEventListener('scroll', e => {
+  //   console.log('hScrollBar', e.detail.value);
+  // });
 
-  vScrollBar.addEventListener('scroll', e => {
-    console.log('vScrollBar', e.detail.value);
-  });
+  // vScrollBar.addEventListener('scroll', e => {
+  //   console.log('vScrollBar', e.detail.value);
+  // });
 }

packages/vrender-components/src/scrollbar/scrollbar.ts

@@ -36,6 +36,7 @@ export class ScrollBar extends AbstractComponent<Required<ScrollBarAttributes>>
     direction: 'horizontal',
     round: true,
     sliderSize: 20,
+    minSliderSize: 0,
     sliderStyle: {
       fill: 'rgba(0, 0, 0, .5)'
     },
@@ -267,15 +268,23 @@ export class ScrollBar extends AbstractComponent<Required<ScrollBarAttributes>>
     return 0;
   }
 
-  // 计算滑块在轨道的位置
+  /**
+   * 计算滑块在轨道的位置（像素），应用最小展示尺寸但不改变 range 语义
+   */
   private _getSliderPos(range: [number, number]) {
-    const { direction } = this.attribute as ScrollBarAttributes;
+    const { direction, minSliderSize = 0 } = this.attribute as ScrollBarAttributes;
     const { width, height, x1, y1 } = this.getSliderRenderBounds();
-
-    if (direction === 'horizontal') {
-      return [width * range[0] + x1, width * range[1] + x1];
-    }
-    return [height * range[0] + y1, height * range[1] + y1];
+    const track = direction === 'horizontal' ? width : height;
+    const origin = direction === 'horizontal' ? x1 : y1;
+    const start = clamp(range[0], 0, 1);
+    const end = clamp(range[1], 0, 1);
+    const ratio = clamp(end - start, 0, 1);
+    const L = Math.max(ratio * track, minSliderSize);
+    const T = Math.max(track - L, 0);
+    const denom = Math.max(1 - ratio, 1e-12);
+    const pStart = origin + (start / denom) * T;
+    const pEnd = pStart + L;
+    return [pStart, pEnd];
   }
 
   private _getScrollRange() {
@@ -349,24 +358,37 @@ export class ScrollBar extends AbstractComponent<Required<ScrollBarAttributes>>
     });
   };
 
+  /**
+   * 将拖拽像素位移映射为逻辑 range 增量，保证最小尺寸下仍覆盖 [0,1]
+   */
   private _computeScrollValue = (e: any) => {
     const { direction } = this.attribute as ScrollBarAttributes;
     const { x, y } = this.stage.eventPointTransform(e);
 
-    let currentScrollValue;
+    let currentScrollValue = 0;
     let currentPos;
     let delta = 0;
 
     const { width, height } = this.getSliderRenderBounds();
+    const track = direction === 'vertical' ? height : width;
+    const travel = Math.max(track - this._sliderSize, 0);
+    const { range } = this.attribute as ScrollBarAttributes;
+    const ratio = clamp(range[1] - range[0], 0, 1);
+
     if (direction === 'vertical') {
       currentPos = y;
       delta = currentPos - this._prePos;
-      currentScrollValue = delta / height;
     } else {
       currentPos = x;
       delta = currentPos - this._prePos;
-      currentScrollValue = delta / width;
     }
+
+    if (travel > 0 && ratio < 1) {
+      currentScrollValue = (delta / travel) * (1 - ratio);
+    } else {
+      currentScrollValue = 0;
+    }
+
     return [currentPos, currentScrollValue];
   };
 

packages/vrender-components/src/scrollbar/type.ts

@@ -27,6 +27,10 @@ export interface ScrollBarAttributes extends IGroupGraphicAttribute {
    * 滚动条内边距，影响滑轨的实际可用空间 [top, right, bottom, left]
    */
   padding?: Padding;
+  /**
+   * 滑块最小展示尺寸，单位像素。仅影响视觉大小，不改变 range 表示的内容比例。
+   */
+  minSliderSize?: number;
   /** 滑块当前的可视范围，数值为 0 - 1 */
   range: [number, number];
   /**