feat: 完成微笑定投

packages/components/src/area/withArea.tsx

@@ -1,30 +1,10 @@
 import { jsx } from '@ali/f2-jsx';
-import { withGeometry } from '../geometry/index';
+import Geometry from '../geometry';
 
 export default View => {
-  return class Area extends withGeometry(View) {
-    mount() {
-      this.props = {
-        ...this.props,
-        type: 'area',
-      }
-      super.mount();
+  return class Area extends Geometry {
+    render() {
+      return <View />;
     }
-
-    renderShape(props) {
-      const { points } = props;
-      let topPoints = [];
-      let bottomPoints = [];
-      points.forEach((point) => {
-        bottomPoints.push(point[0]);
-        topPoints.push(point[1]);
-      });
-      bottomPoints.reverse();
-      topPoints = this.parsePoints(topPoints);
-      bottomPoints = this.parsePoints(bottomPoints);
-      const newPoints = topPoints.concat(bottomPoints);
-
-      return <View { ...props } points={ newPoints } />
-    } 
   }
 }

packages/components/src/axis/withAxis.tsx

@@ -39,7 +39,8 @@ export default View => {
     style: any;
     lastLayout: any;
 
-    mount() {
+    init(config) {
+      super.init(config);
       const { props, chart } = this;
       const {
         field,
@@ -52,6 +53,26 @@ export default View => {
         mask,
         min,
         max,
+        nice,
+      } = props;
+
+      chart.scale(field, {
+        type,
+        tickCount,
+        range,
+        mask,
+        formatter,
+        min,
+        max,
+        nice
+      });
+    }
+
+    mount() {
+      const { props, chart } = this;
+      const {
+        field,
+        visible,
       } = props;
       if (visible === false) {
         return;

packages/components/src/canvas/animation/animator.ts

@@ -6,6 +6,7 @@ import {
 } from './interface';
 import interpolate from './interpolate';
 import * as Easing from './easing';
+import { ElementStatus } from '@ali/f2-jsx';
 
 class Animator {
   // 对应G的shape
@@ -28,12 +29,15 @@ class Animator {
   // 整体持续时间 delay + duration
   totalDuration: number;
 
+  onFrame?: any;
+  end = false;
+
 
   constructor(element: any, animation: Animation) {
     this.element = element;
     this.animation = animation;
 
-    const { property, easing, duration, delay = 0, start, end } = animation;
+    const { property = [], easing, duration, delay = 0, start, end, onFrame } = animation;
     const interpolates = property.map(key => {
       return interpolate(start[key], end[key]);
     });
@@ -43,6 +47,7 @@ class Animator {
     this.interpolates = interpolates;
     this.duration = duration;
     this.delay = delay;
+    this.onFrame = onFrame;
 
     this.totalDuration = duration + delay;
 
@@ -51,7 +56,11 @@ class Animator {
   }
 
   to(time: number) {
-    const { duration, delay, totalDuration, easing } = this;
+    const { duration, delay, totalDuration, easing, end } = this;
+    // 已结束
+    if (end) {
+      return;
+    }
     // 未开始
     if (time <= delay || !duration) {
       return;
@@ -60,21 +69,52 @@ class Animator {
     const t = time >= totalDuration ? 1 : (time - delay) / duration;
 
     this.update(easing(t));
+
+    // 最后一帧
+    if (t === 1) {
+      this.onEnd();
+    }
   }
 
   update(t: number) {
-    const { element, clip, interpolates, property } = this;
-    const attrs = {};
+    const { element, clip, interpolates, property, onFrame } = this;
+    let attrs = {};
     for (let i = property.length - 1; i >= 0; i--) {
       const key = property[i];
       attrs[key] = interpolates[i](t);
     }
+    if (onFrame) {
+      attrs = {
+        ...attrs,
+        ...this.onFrame(t)
+      }
+    }
     if (clip) {
       clip.attr(attrs);
     } else {
       element.attr(attrs);
     }
   }
+
+  onEnd() {
+    const { animation, clip, element } = this;
+    const { onEnd } = animation;
+
+    onEnd && onEnd.call(this);
+
+    if (clip) {
+      // 如果是裁剪区动画，要移除裁剪区
+      clip.remove(true);
+      element.attr('clip', null);
+    }
+
+    // 如果当前元素状态被标记为删除，等动画结束后直接删除
+    if(element._attrs.status === ElementStatus.ELEMENT_DELETE) {
+      element.remove(true);
+    }
+
+    this.end = true;
+  }
 }
 
 export default Animator;

packages/components/src/canvas/animation/index.ts

@@ -25,9 +25,9 @@ class Animation {
   }
 
   createAnimator(element, animation) {
-    const { duration, property } = animation;
+    const { duration } = animation;
     // 校验关键参数
-    if (!duration || !property || !property.length) {
+    if (!duration) {
       return;
     }
     return new Animator(element, animation);
@@ -80,22 +80,11 @@ class Animation {
         const animator = animators[i];
         animator.to(time);
       }
-      canvas.draw();
-    }, () => {
-      // 动画结束后移除被删除的元素
-      for (let i = 0, len = animators.length; i < len; i++) {
-        const animator = animators[i];
-        const { element, clip } = animator;
-        if (clip) {
-          // 如果是裁剪区动画，要移除裁剪区
-          clip.remove(true);
-          element.attr('clip', null);
-        }
-        if(element._attrs.status === ElementStatus.ELEMENT_DELETE) {
-          element.remove(true);
-        }
+      // 最后一帧放在end里统一draw， 避免重复draw
+      if (time < maxDuration) {
+        canvas.draw();
       }
-      // @TODO 要和update 合在一起绘制，否则会调用2次
+    }, () => {
       canvas.draw();
     })
   }

packages/components/src/canvas/animation/interface.ts

@@ -13,4 +13,7 @@ export interface Animation {
   start?: any;
   // end 的 attrs
   end?: any;
+  // 每一帧的处理函数
+  onFrame?: any;
+  onEnd?: any;
 }

packages/components/src/chart/index.ts

@@ -14,12 +14,12 @@ interface Point {
 
 interface Props {
   data: any;
-  scale: any;
-  coord: any;
+  scale?: any;
+  coord?: any;
   start?: Point;
   end?: Point;
   children: any;
-  theme: any;
+  theme?: any;
 }
 
 // 统计图表

packages/components/src/chart/scale/index.ts

@@ -73,6 +73,11 @@ class ScaleController {
       values
     };
 
+    // 设置默认nice
+    if (type === 'linear' && typeof cfg.nice !== 'boolean') {
+      cfg.nice = true;
+    }
+
     // if (type !== 'cat' && type !== 'timeCat') {
     //   if (!def || !(def.min && def.max)) {
     //     const { min, max } = Array.getRange(values);

packages/components/src/component/container.ts

@@ -76,6 +76,7 @@ class ContainerComponent extends Component {
       width,
       height,
       // plot,
+      layout,
     }
   }
 

packages/components/src/coord/index.tsx

@@ -1,6 +1,8 @@
 import Component from '../component';
 
 class Coord extends Component {
+  chart: any;
+
   mount() {
     const { chart, props } = this;
     chart.coord(props);

packages/components/src/index.ts

@@ -6,11 +6,11 @@ export { default as Chart } from './chart';
 
 export { default as Line, withLine, LineView } from './line';
 // export { default as Coord } from './coord';
-// export { default as Area, withArea, AreaView } from './area';
-// export { default as Interval, withInterval, IntervalView } from './interval';
-// export { default as Point, withPoint, PointView } from './point';
+export { default as Area, withArea, AreaView } from './area';
+export { default as Interval, withInterval, IntervalView } from './interval';
+export { default as Point, withPoint, PointView } from './point';
 export { default as Axis, withAxis, AxisView } from './axis';
-// export { default as Legend, withLegend, LegendView } from './legend';
+export { default as Legend, withLegend, LegendView } from './legend';
 export { default as Guide, withGuide, GuideView } from './guide';
-// export { default as Tooltip, withTooltip, TooltipView } from './tooltip';
+export { default as Tooltip, withTooltip, TooltipView } from './tooltip';
 export { default as Treemap, withTreemap, TreemapView } from './treemap';

packages/components/src/interval/withInterval.tsx

@@ -1,18 +1,10 @@
 import { jsx } from '@ali/f2-jsx';
-import { withGeometry } from '../geometry/index';
+import Geometry from '../geometry';
 
 export default View => {
-  return class Interval extends withGeometry(View) {
-    mount() {
-      this.props = {
-        ...this.props,
-        type: 'interval',
-      }
-      super.mount();
-    }
-    renderShape(props) {
-      const points = this.parsePoints(props.points);
-      return <View { ...props } points={ points }/>
+  return class Interval extends Geometry {
+    render() {
+      return <View />
     }
   }
 }

packages/components/src/legend/withLegend.tsx

@@ -4,6 +4,8 @@ import Component from '../component/index';
 export default View => {
   return class Legend extends Component {
 
+    chart: any;
+
     getItems() {
       const { props, chart } = this;
       const { field } = props;

packages/components/src/point/withPoint.tsx

@@ -1,13 +1,10 @@
-import { withGeometry } from '../geometry/index';
+import { jsx } from '@ali/f2-jsx';
+import Geometry from '../geometry';
 
 export default View => {
-  return class Point extends withGeometry(View) {
-    mount() {
-      this.props = {
-        ...this.props,
-        type: 'point',
-      }
-      super.mount();
+  return class Point extends Geometry {
+    render() {
+      return <View />
     }
   }
 }

packages/components/test/line.test.tsx

@@ -16,7 +16,7 @@ const data = [
 describe('Line', () => {
   it('Line color callback', () => {
     const { type, props } = (
-      <Canvas context={ context } animate={ false }>
+      <Canvas context={ context }>
         <Chart
           data={ data }
           scale={{
@@ -25,18 +25,10 @@ describe('Line', () => {
           coord={{
             type: 'rect'
           }}
-          // start={{
-          //   x: 10,
-          //   y: 10,
-          // }}
-          // end={{
-          //   x: 100,
-          //   y: 300,
-          // }}
         >
           <Line
             position="genre*sold"
-            color={[ 'genre', () => {
+            color={[ 'type', () => {
                 colorCallback();
                 return 'red';
               }
@@ -50,8 +42,8 @@ describe('Line', () => {
     );
 
     // @ts-ignore
-    const chart = new type(props);
-    chart.render();
+    const canvas = new type(props);
+    canvas.render();
 
     expect(colorCallback.mock.calls.length).not.toBe(0);
   })

packages/components/test/treemap.test.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { jsx } from '@ali/f2-jsx';
 import Canvas, { Treemap } from '../src';
 import { createContext } from './util';
@@ -60,11 +59,10 @@ describe('Treemap', () => {
     );
 
     // @ts-ignore
-    const chart = new type(props);
-    chart.render();
+    const canvas = new type(props);
+    canvas.render();
 
-
-    const treemapContainer = chart.container.get('children')[0];
+    const treemapContainer = canvas.container.get('children')[0];
     const view = treemapContainer.get('children')[0];
     expect(view.get('children').length).toBe(10);
     expect(view.get('children')[1].get('attrs').x).toBe(132);