fix(slider): slider 更新的时候,组合的子组件不更新的问题

src/slider/slider.ts

@@ -54,6 +54,7 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
 
   private minHandler: Handler;
   private maxHandler: Handler;
+  private trend: Trend;
   private currentTarget: string;
   private prevX: number;
   private prevY: number;
@@ -133,6 +134,7 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
     super.update(validCfg);
     this.minHandler = this.getChildComponentById(this.getElementId('minHandler'));
     this.maxHandler = this.getChildComponentById(this.getElementId('maxHandler'));
+    this.trend = this.getChildComponentById(this.getElementId('trend'));
   }
 
   public init() {
@@ -141,6 +143,16 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
     super.init();
   }
 
+  public render() {
+    super.render();
+
+    this.updateUI(
+      this.getElementByLocalId('foreground'),
+      this.getElementByLocalId('minText'),
+      this.getElementByLocalId('maxText')
+    );
+  }
+
   protected renderInner(group: IGroup) {
     const {
       start,
@@ -161,7 +173,7 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
 
     // 趋势图数据
     if (size(get(trendCfg, 'data'))) {
-      this.addComponent(group, {
+      this.trend = this.addComponent(group, {
         component: Trend,
         id: this.getElementId('trend'),
         x: 0,
@@ -254,8 +266,6 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
       cursor: 'ew-resize',
       ...handlerStyle,
     });
-
-    this.updateUI(foregroundShape, minTextShape, maxTextShape);
   }
 
   protected applyOffset() {
@@ -270,10 +280,20 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
   }
 
   private updateUI(foregroundShape: IShape, minTextShape: IShape, maxTextShape: IShape) {
-    const { start, end, width, minText, maxText, handlerStyle } = this.cfg as SliderCfg;
+    const { start, end, width, minText, maxText, handlerStyle, height } = this.cfg as SliderCfg;
     const min = start * width;
     const max = end * width;
 
+    if (this.trend) {
+      this.trend.update({
+        width,
+        height,
+      });
+      if (!this.get('updateAutoRender')) {
+        this.trend.render();
+      }
+    }
+
     // 1. foreground
     foregroundShape.attr('x', min);
     foregroundShape.attr('width', max - min);
@@ -493,7 +513,7 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
     return !sorted ? [minAttrs, maxAttrs] : [maxAttrs, minAttrs];
   }
 
-  private draw() {
+  public draw() {
     const container = this.get('container');
     const canvas = container && container.get('canvas');
     if (canvas) {

tests/unit/slider/slider-spec.ts

@@ -194,4 +194,21 @@ describe('slider', () => {
 
     simulateMouseEvent(containerDOM, 'mouseup', {});
   });
+
+  it('update height', () => {
+    slider.update({
+      height: 32,
+      start: 0.1,
+      end: 0.8,
+    });
+
+    slider.render();
+
+    // @ts-ignore
+    expect(slider.trend.get('height')).toBe(32);
+    // @ts-ignore
+    expect(slider.minHandler.get('y')).toBe(4);
+    // @ts-ignore
+    expect(slider.maxHandler.get('y')).toBe(4);
+  });
 });