feat: 补充update的处理逻辑

packages/f2-next/src/base/container.ts

@@ -90,9 +90,6 @@ class ContainerComponent extends Component {
     const appendProps = this._getAppendProps();
 
     map(components, (component: Component) => {
-      if (!component.__shouldRender) {
-        return;
-      }
       this.renderComponent(component, appendProps);
     });
 
@@ -120,7 +117,7 @@ class ContainerComponent extends Component {
     // 返回的是shape的结构树
     const element = renderJSXElement(jsxElement, appendProps);
     component.__lastElement = element;
-
+  
     // 如果需要动画，才进行比较，默认为true, 只有在设置false 才关闭
     const renderElement = animate !== false ? compareRenderTree(element, __lastElement) : element;
     if (!renderElement) return null;
@@ -138,72 +135,60 @@ class ContainerComponent extends Component {
     }
   }
 
+  diffComponent(component, child) {
+    if (!child) {
+      // 销毁后，创建一个占位的组件
+      component.destroy();
+      return new PlaceholderComponent({});
+    }
+    // 如果之前是占位组件，现在有新的组件，是个新建逻辑
+    // @ts-ignore
+    if (component.placeholder) {
+      if (isArray(child)) {
+        return map(child, (c) => {
+          return this.createComponent(c);
+        });
+      }
+      return this.createComponent(child);
+    }
+
+    const { type, props } = child;
+    // 如果类型变化了
+    // @ts-ignore
+    if (!(component instanceof type)) {
+      // 销毁之前的
+      component.destroy();
+      // 创建新的
+      return this.createComponent(child);
+    }
+    if (!equal(props, component.props)) {
+      if (!component.shouldUpdate || component.shouldUpdate(props)) {
+        if (component.componentWillReceiveProps) {
+          component.componentWillReceiveProps(props);
+        }
+        component.props = props; 
+        if (component.update) {
+          component.update(props);
+        }
+      }
+    }
+    return component;
+  }
+
   update(props: any, forceUpdate?) {
     super.update(props);
     const { components, layout } = this;
     // 只处理数据和children的变化
     const { children } = props;
-    this.components = mapTwo(components, children, (component: Component, child: JSX.Element) => {
-      if (!child) {
-        // 销毁后，创建一个占位的组件
-        component.destroy();
-        const placeholderComponent = new PlaceholderComponent({});
-        placeholderComponent.init({
-          layout,
-          container: component.container,
-        });
-        return placeholderComponent;
-      }
-      // 如果之前是占位组件，现在有新的组件，是个新建逻辑
-      // @ts-ignore
-      if (component.placeholder) {
-        if (isArray(child)) {
-          return map(child, (c) => {
-            const newComponent = this.createComponent(c);
-            newComponent.init({
-              layout,
-              container: component.container,
-            });
-            return newComponent;
-          });
-        }
-        const newComponent = this.createComponent(child);
-        newComponent.init({
-          layout,
-          container: component.container,
-        });
-        return newComponent;
-      }
 
-      // TODO diff比较是否需要更新
-      const { type, props } = child;
-      // 如果类型变化了
-      // @ts-ignore
-      if (!(component instanceof type)) {
-        // 销毁之前的
-        component.destroy();
-        // 创建新的
-        const newComponent = this.createComponent(child);
-        newComponent.init({
-          layout,
-          container: component.container,
-        });
+    this.components = mapTwo(components, children, (component: Component, child: JSX.Element) => {
+      const newComponent = this.diffComponent(component, child);
 
-        // 保留shape结构，为了实现动画的过渡变化
-        if (component.props.keepElement) {
-          newComponent.__lastElement = component.__lastElement;
-        }
-        return newComponent;
-      }
-      if (!equal(props, component.__props) || forceUpdate) {
-        component.update(props);
-        component.__shouldRender = true;
-      } else {
-        // 没有变化，不需要重新render
-        component.__shouldRender = false;
+      if (!newComponent.__shape && newComponent.beforeMount) {
+        newComponent.beforeMount();
       }
 
-      return component;
+      return newComponent;
     });
   }
 

packages/f2-next/src/base/layout.ts

@@ -7,6 +7,13 @@ interface LayoutProps {
   height?: number;
 }
 
+interface Style {
+  left?: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
+}
+
 class Layout {
   left = 0;
   top = 0;
@@ -24,6 +31,30 @@ class Layout {
     const { left, top, width, height } = this;
     this.right = left + width;
     this.bottom = top + height;
+
+    return this;
+  }
+
+  padding(style: Style) {
+    if (!style) {
+      return this;
+    }
+    const {
+      top: paddingTop = 0,
+      right: paddingRight = 0,
+      bottom: paddingBottom = 0,
+      left: paddingLeft = 0,
+    } = style;
+    const { top, right, bottom, left } = this;
+    this.top = top + paddingTop;
+    this.right = right - paddingRight;
+    this.bottom = bottom - paddingBottom;
+    this.left = left + paddingLeft;
+
+    this.width = this.right - this.left;
+    this.height = this.bottom - this.top;
+
+    return this;
   }
 
   clone() {

packages/f2-next/src/canvas/index.ts

@@ -64,6 +64,7 @@ class Canvas extends Component implements IF2Canvas {
     this.canvas = canvas;
     this.container = canvas;
     this.component = component;
+    this.layout = layout;
 
     // 实例化动画模块
     this.animation = animate ? new Animation(canvas) : null;
@@ -109,7 +110,7 @@ class Canvas extends Component implements IF2Canvas {
   }
 
   update(props: ChartUpdateProps) {
-    const { component, canvas,  animation } = this;
+    const { component, canvas, animation, layout } = this;
     // 只处理数据，和children的变化
     const { children } = props;
 
@@ -119,13 +120,11 @@ class Canvas extends Component implements IF2Canvas {
       context,
     } = canvas._attrs;
 
-    const componentTree = createComponentTree(children, { width, height, context });
+    const componentTree = createComponentTree(children, { canvas: this, width, height, context, layout });
+
     component.update({ children: componentTree });
 
-    component.willMount()
-    component.mount();
-    component.render();
-    this.draw();
+    this.render();
   }
 
   destroy() {

packages/f2-next/src/chart/index.ts

@@ -33,6 +33,7 @@ class Chart extends Container implements IChart, ThemeMixin, CoordMixin, ScaleMi
   data: any;
   coord: Coord;
   createCoord: (coord, layout) => Coord;
+  updateCoord: (coord, layout) => Coord;
 
   scale: any;
   createScale: () => any;
@@ -58,15 +59,7 @@ class Chart extends Container implements IChart, ThemeMixin, CoordMixin, ScaleMi
   createComponent(child) {
     const { props } = this;
     const { props: childProps } = child;
-    const childComponent = super.createComponent({
-      ...child,
-      props: {
-        ...childProps,
-        // 把chart数据透传进去
-        data: props.data,
-        chart: this,
-      }
-    });
+    const childComponent = super.createComponent(child);
 
     // @ts-ignore
     childComponent.chart = this;
@@ -137,33 +130,63 @@ class Chart extends Container implements IChart, ThemeMixin, CoordMixin, ScaleMi
 
   mount() {
     const { props } = this;
-    const { theme, coord, layout, canvas } = props;
+    const { theme, layout, style, coord, canvas } = props;
     // 初始化默认主题
     this.theme = canvas.px2hd(mix({}, defaultTheme, theme));
     const { paddingLeft, paddingTop, paddingRight, paddingBottom } = this.theme;
 
-    this.layout = new Layout({
-      left: layout.left + paddingLeft,
-      top: layout.top + paddingTop,
-      width: layout.width - paddingLeft - paddingRight,
-      height: layout.height -paddingTop - paddingBottom,
-    });
+    this.layout = layout.clone().padding({
+      left: paddingLeft,
+      top: paddingTop,
+      right: paddingRight,
+      bottom: paddingBottom,
+    }).padding(style);
 
     // 创建坐标系
-    this.coord = this.createCoord(coord, layout);
+    this.coord = this.createCoord(coord, this.layout);
     // 创建scale
     this.updateScales();
     super.mount();
   }
 
-  // update() {
+  componentWillReceiveProps(nextProps) {
+    const { props } = this;
+    if (props.data !== nextProps.data) {
+      this.data = nextProps.data;
+      this.changeGetGeometryData(nextProps.data);
+      this.updateScales();
+    }
+  }
+
+  update() {
+    const { props } = this;
+    const { theme, layout, style, coord, canvas, data } = props;
+    this.data = data;
+    // 初始化默认主题
+    this.theme = canvas.px2hd(mix({}, defaultTheme, theme));
+    const { paddingLeft, paddingTop, paddingRight, paddingBottom } = this.theme;
+
+    this.layout = layout.clone().padding({
+      left: paddingLeft,
+      top: paddingTop,
+      right: paddingRight,
+      bottom: paddingBottom,
+    }).padding(style);
+
+    // 创建坐标系
+    this.coord = this.updateCoord(coord, this.layout);
+    // 创建scale
 
-  // }
+    super.update(props);
+  }
 
-  adjustScale() {
-    // TODO
-    // _adjustRange
-    // 1. _syncYScales
+  changeGetGeometryData(data) {
+    const geometrys = this.getGeometrys();
+    if (!geometrys.length) return;
+    geometrys.forEach(geometry => {
+      // @ts-ignore
+      geometry.changeData(data);
+    })
   }
 
   getGeometrys() {

packages/f2-next/src/components/geometry/index.tsx

@@ -243,8 +243,8 @@ class Geometry extends Component implements AttrMixin {
   }
 
   _processData() {
-    const { props } = this;
-    const { data: originData } = props;
+    const { chart } = this;
+    const { data: originData } = chart;
 
     const data = this._saveOrigin(originData);
     // 根据分类度量进行数据分组
@@ -255,6 +255,10 @@ class Geometry extends Component implements AttrMixin {
     this.dataArray = dataArray;
   }
 
+  changeData() {
+    this._processData();
+  }
+
   getY0Value() {
     const { attrs, chart } = this;
     const { y } = attrs;
@@ -264,8 +268,7 @@ class Geometry extends Component implements AttrMixin {
 
   // 获取
   _getAttrsDefaultValue() {
-    const { props } = this;
-    const { chart } = props;
+    const { chart } = this;
     const { theme } = chart;
     return {
       color: theme.colors[0],

packages/f2-next/src/components/line/withLine.tsx

@@ -39,8 +39,7 @@ export default View => {
     }
 
     render() {
-      const { props } = this;
-      const { chart } = props;
+      const { chart } = this;
       const { coord } = chart;
       const mapped = this.mapping();
       const mappedArray = this.parsePoints(mapped);

packages/f2-next/src/controller/scale.ts

@@ -59,9 +59,9 @@ class ScaleController {
 
       if (instanceScale) {
         this.updateScale(instanceScale, scaleOption);
+      } else {
+        scales[field] = this.createScale(scaleOption);
       }
-
-      scales[field] = this.createScale(scaleOption);
     });
 
     this.scales = scales;
@@ -84,8 +84,19 @@ class ScaleController {
   }
 
   getScale(field) {
-    const { scales } = this;
-    return scales && scales[field];
+    const { scales, scaleOptions } = this;
+
+    const scale = scales && scales[field];
+    if (scale) {
+      return scale;
+    }
+    const option = scaleOptions[field];
+    if (!option) {
+      return null;
+    }
+    const newScale = this.createScale(option);
+    scales[field] = newScale;
+    return newScale;
   }
 
   adjustStartZero(scale: Scale) {