fix: clear component in clearCells()

VisActor · Jan 24, 2024 · be8fbc0 · be8fbc0
1 parent ac9b3f6
commit be8fbc0
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 1 deletion.
diff --git a/common/changes/@visactor/vtable/fix-update-theme_2024-01-24-09-29.json b/common/changes/@visactor/vtable/fix-update-theme_2024-01-24-09-29.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: add component update",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts
@@ -1967,6 +1967,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     internalProps.title?.release();
     internalProps.layoutMap.release();
     this.scenegraph.clearCells();
+    this.scenegraph.updateComponent();
     this.stateManager.updateOptionSetState();
 
     this._updateSize();
@@ -2477,6 +2478,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
     this.internalProps.theme = themes.of(theme ?? themes.DEFAULT);
     this.options.theme = theme;
+    this.scenegraph.updateComponent();
     this.scenegraph.updateStageBackground();
     this.scenegraph.clearCells();
     this.clearCellStyleCache();

diff --git a/packages/vtable/src/scenegraph/component/cell-mover.ts b/packages/vtable/src/scenegraph/component/cell-mover.ts
@@ -150,4 +150,23 @@ export class CellMover {
       this.columnMoverBack.setAttribute('y', backY);
     }
   }
+
+  updateStyle() {
+    const columnMoverLineWidth = this.table.theme.dragHeaderSplitLine.lineWidth;
+    const columnMoverLineColor = this.table.theme.dragHeaderSplitLine.lineColor;
+    const columnMoverShadowBlockColor = this.table.theme.dragHeaderSplitLine.shadowBlockColor;
+
+    this.columnMoverLabel.setAttributes({
+      fill: columnMoverLineColor as string
+    });
+    this.columnMoverLine.setAttributes({
+      stroke: columnMoverLineColor as string,
+      lineWidth: columnMoverLineWidth as number
+    });
+
+    // 列顺序调整阴影块
+    this.columnMoverBack.setAttributes({
+      fill: columnMoverShadowBlockColor
+    });
+  }
 }
diff --git a/packages/vtable/src/scenegraph/component/table-component.ts b/packages/vtable/src/scenegraph/component/table-component.ts
@@ -1,4 +1,4 @@
-import type { ILine, IRect, IGroup, FederatedPointerEvent, Text } from '@src/vrender';
+import type { ILine, IRect, IGroup, FederatedPointerEvent, Text, IText } from '@src/vrender';
 import { createRect, createLine, createText, createGroup, createSymbol } from '@src/vrender';
 import { ScrollBar } from '@visactor/vrender-components';
 import type { Group } from '../graphic/group';
@@ -497,4 +497,92 @@ export class TableComponent {
       y: bounds.y1
     };
   }
+
+  updateStyle() {
+    const theme = this.table.theme;
+
+    // scrollbar
+    const scrollRailColor = theme.scrollStyle?.scrollRailColor as string;
+    const scrollSliderColor = theme.scrollStyle?.scrollSliderColor as string;
+    const width = theme.scrollStyle?.width as number;
+    this.hScrollBar.setAttributes({
+      height: width,
+      railStyle: {
+        fill: scrollRailColor
+      },
+      sliderStyle: {
+        fill: scrollSliderColor
+      }
+    });
+
+    this.vScrollBar.setAttributes({
+      width,
+      railStyle: {
+        fill: scrollRailColor
+      },
+      sliderStyle: {
+        fill: scrollSliderColor
+      }
+    });
+
+    // columnResizeLine & columnResizeBgLine
+    const columnResizeColor = theme.columnResize?.lineColor;
+    const columnResizeWidth = theme.columnResize?.lineWidth;
+    const columnResizeBgColor = theme.columnResize?.bgColor;
+    const columnResizeBgWidth = theme.columnResize?.width;
+
+    this.columnResizeLine.setAttributes({
+      stroke: columnResizeColor as string,
+      lineWidth: columnResizeWidth as number
+    });
+    this.columnResizeBgLine = createLine({
+      stroke: columnResizeBgColor as string,
+      lineWidth: columnResizeBgWidth as number
+    });
+
+    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;
+
+    // columnResizeLabelBack
+    (this.columnResizeLabel.lastChild as IText).setAttributes({
+      fontSize: labelFontSize, // 10
+      fill: labelColor,
+      fontFamily: labelFontFamily,
+      dy: -labelFontSize / 2
+    });
+    // columnResizeLabelText
+    (this.columnResizeLabel.firstChild as IRect).setAttributes({
+      fill: labelBackgroundFill,
+      width: 5 * labelFontSize * 0.8,
+      height: labelFontSize + 8,
+      cornerRadius: labelBackgroundCornerRadius,
+      dy: -labelFontSize / 2 - 4
+    });
+
+    // frozenShadowLine
+    const shadowWidth = theme.frozenColumnLine?.shadow?.width;
+    const shadowStartColor = theme.frozenColumnLine?.shadow?.startColor;
+    const shadowEndColor = theme.frozenColumnLine?.shadow?.endColor;
+    this.frozenShadowLine.setAttributes({
+      width: shadowWidth,
+      fill: {
+        gradient: 'linear',
+        x0: 0,
+        y0: 0,
+        x1: 1,
+        y1: 0,
+        stops: [
+          { color: shadowStartColor, offset: 0 },
+          { color: shadowEndColor, offset: 1 }
+        ]
+      }
+    });
+
+    this.cellMover.updateStyle();
+    // this.menu.updateStyle();
+    // this.drillIcon.updateStyle();
+  }
 }
diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts
@@ -326,6 +326,10 @@ export class Scenegraph {
     this.selectingRangeComponents = new Map();
   }
 
+  updateComponent() {
+    this.component.updateStyle();
+  }
+
   /**
    * @description: 依据数据创建表格场景树
    * @return {*}