feat: add scroll bar hover on display mode (#10)

VisActor · Jun 14, 2023 · e4d1227 · e4d1227
1 parent c91c0f3
commit e4d1227
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/vtable/examples/interactive/scroll.ts b/packages/vtable/examples/interactive/scroll.ts
@@ -165,7 +165,7 @@ export function createTable() {
     allowFrozenColCount: 2,
     theme: {
       scrollStyle: {
-        hoverOn: true,
+        hoverOn: false,
         scrollSliderColor: 'red',
         visible: 'always'
       }

diff --git a/packages/vtable/src/scenegraph/component/table-component.ts b/packages/vtable/src/scenegraph/component/table-component.ts
@@ -152,8 +152,13 @@ export class TableComponent {
     componentGroup.addChild(this.columnResizerBgLine);
     componentGroup.addChild(this.columnResizerLine);
     componentGroup.addChild(this.columnResizerLabel);
-    componentGroup.addChild(this.hScrollBar);
-    componentGroup.addChild(this.vScrollBar);
+    if (this.table.theme.scrollStyle.hoverOn) {
+      componentGroup.addChild(this.hScrollBar);
+      componentGroup.addChild(this.vScrollBar);
+    } else {
+      componentGroup.stage.defaultLayer.addChild(this.hScrollBar);
+      componentGroup.stage.defaultLayer.addChild(this.vScrollBar);
+    }
     this.menu.bindTableComponent(componentGroup);
     this.drillIcon.appand(componentGroup);
     this.cellMover.appand(componentGroup);
@@ -236,7 +241,7 @@ export class TableComponent {
       const rangeEnd = Math.max(0.05, (tableWidth - frozenColsWidth) / (totalWidth - frozenColsWidth));
       this.hScrollBar.setAttributes({
         x: frozenColsWidth,
-        y: y - width,
+        y: y - (this.table.theme.scrollStyle.hoverOn ? width : 0),
         width: tableWidth - frozenColsWidth,
         range: [0, rangeEnd],
         visible: visible === 'always'
@@ -255,7 +260,7 @@ export class TableComponent {
       const x = Math.min(tableWidth, totalWidth);
       const rangeEnd = Math.max(0.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
       this.vScrollBar.setAttributes({
-        x: x - width,
+        x: x - (this.table.theme.scrollStyle.hoverOn ? width : 0),
         y: frozenRowsHeight,
         height: tableHeight - frozenRowsHeight,
         range: [0, rangeEnd],