fix: 调整timeline，去掉canvas 对 timeline 的依赖 (#1301)

antvis · Dec 7, 2021 · e2a1266 · e2a1266
1 parent 874ffdf
commit e2a1266
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 109 deletions.
diff --git a/packages/f2/package.json b/packages/f2/package.json
@@ -17,6 +17,7 @@
   ],
   "dependencies": {
     "@antv/adjust": "~0.1.1",
+    "@antv/event-emitter": "^0.1.2",
     "@antv/f2-graphic": "^0.0.2-alpha.0",
     "@antv/scale": "~0.3.3",
     "@antv/util": "~2.0.6",
@@ -28,13 +29,7 @@
     "d3-interpolate": "~2.0.1",
     "fecha": "^2.3.3"
   },
-  "devDependencies": {
-    "babel-plugin-module-resolver": "^4.1.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "react": "16.8.6",
-    "react-dom": "16.8.6"
-  },
+  "devDependencies": {},
   "homepage": "https://github.com/antvis/f2",
   "author": "https://github.com/orgs/antvis/people",
   "repository": {

diff --git a/packages/f2/src/canvas/animation/index.ts b/packages/f2/src/canvas/animation/index.ts
@@ -32,7 +32,7 @@ class Animation {
     return new Animator(element, animation);
   }
 
-  play(container, onAnimationEnd) {
+  play(container, onAnimationEnd?) {
     const { canvas } = this;
     const animators: Animator[] = [];
     let maxDuration = 0;

diff --git a/packages/f2/src/canvas/index.ts b/packages/f2/src/canvas/index.ts
@@ -1,14 +1,14 @@
 import { createCanvas } from '@antv/f2-graphic';
 import { deepMix } from '@antv/util';
 import Component from '../base/component';
-import Timeline from '../timeline';
 import Layout from '../base/layout';
 import equal from '../base/equal';
 import Animation from './animation';
 import { px2hd as defaultPx2hd } from '../util';
 import { createUpdater } from './updater';
 import defaultTheme from '../theme';
 import { renderChildren, renderComponent } from '../base/diff';
+import EE from '@antv/event-emitter';
 
 interface ChartProps {
   context?: CanvasRenderingContext2D;
@@ -21,7 +21,6 @@ interface ChartProps {
   px2hd?: any;
   theme?: any;
   style?: any;
-  onAnimationEnd?: () => void;
 }
 
 interface IF2Canvas {
@@ -59,6 +58,8 @@ class Canvas extends Component<ChartProps> implements IF2Canvas {
   layout: Layout;
   theme: any;
 
+  private _ee: EE;
+
   constructor(props: ChartProps) {
     super(props);
     const {
@@ -122,6 +123,7 @@ class Canvas extends Component<ChartProps> implements IF2Canvas {
     this.animate = animate;
     this.animation = animation;
     this.theme = theme;
+    this._ee = new EE();
   }
 
   renderComponents(components: Component[]) {
@@ -142,20 +144,20 @@ class Canvas extends Component<ChartProps> implements IF2Canvas {
   }
 
   draw() {
-    const { canvas, animate, animation, props, children } = this;
+    const { canvas, animate } = this;
     if (animate === false) {
       canvas.draw();
       return;
     }
-    // 查找timeline
-    const timeline = Timeline.find(children);
-    const { onAnimationEnd } = props;
+    this.play();
+  }
+
+  play() {
+    const { canvas, animation } = this;
     // 执行动画
     animation.abort();
     animation.play(canvas, () => {
-      if (!timeline || !timeline.next()) {
-        onAnimationEnd && onAnimationEnd();
-      }
+      this.emit('animationEnd');
     });
   }
 
@@ -171,6 +173,18 @@ class Canvas extends Component<ChartProps> implements IF2Canvas {
     const { canvas } = this;
     canvas.destroy();
   }
+
+  on(type: string, listener) {
+    this._ee.on(type, listener);
+  }
+
+  emit(type: string, event?: any) {
+    this._ee.emit(type, event);
+  }
+
+  off(type: string, listener?) {
+    this._ee.off(type, listener);
+  }
 }
 
 export default Canvas;
diff --git a/packages/f2/src/index.ts b/packages/f2/src/index.ts
@@ -12,14 +12,3 @@ import { jsx as createElement } from './jsx';
 export * from './components';
 export { jsx, render } from './jsx';
 export { Children, createElement, Component, Timeline, Canvas, Chart };
-
-// F2 namespace
-const F2 = {
-  Children,
-  createElement,
-  Component,
-  Timeline,
-  Canvas,
-  Chart,
-};
-export default F2;
diff --git a/packages/f2/src/timeline.ts b/packages/f2/src/timeline.ts
@@ -5,17 +5,6 @@ class Timeline extends Component {
   index: number;
   delay: number;
 
-  static find(children) {
-    if (!children) return null;
-    const elements = Children.toArray(children);
-    for (let i = 0, len = elements.length; i < len; i++) {
-      const element = elements[i];
-      if (element && element.component && element.component.constructor === Timeline) {
-        return element.component;
-      }
-    }
-  }
-
   constructor(props) {
     super(props);
     const { delay, start = 0, children } = props;
@@ -27,7 +16,19 @@ class Timeline extends Component {
     };
   }
 
-  next() {
+  didMount() {
+    const { context } = this;
+    const { root } = context;
+    root.on('animationEnd', this.next);
+  }
+
+  didUnmount() {
+    const { context } = this;
+    const { root } = context;
+    root.off('animationEnd', this.next);
+  }
+
+  next = () => {
     const { state, props } = this;
     const { index, count, delay } = state;
     const { loop } = props;
@@ -39,10 +40,8 @@ class Timeline extends Component {
           index: next,
         });
       }, delay || 0);
-      return true;
     }
-    return false;
-  }
+  };
 
   render() {
     const { state, props } = this;

diff --git a/packages/f2/test/components/legend.test.tsx b/packages/f2/test/components/legend.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { clone, values } from '@antv/util';
 import { jsx, Component, Canvas, Chart, Tooltip } from '../../src';
 import { Line, Axis, Legend } from '../../src/components';
@@ -50,15 +49,14 @@ describe('图例', () => {
                   },
                   pressend: (items, records, legend) => {
                     legend.setItems(items);
-                  }
+                  },
                 }}
               />
             </Chart>
           </Canvas>
         );
 
-        // @ts-ignore
-        const canvas = new type(props);
+        const canvas = new Canvas(props);
         canvas.render();
       });
   });

diff --git a/packages/f2/test/components/line/line.test.tsx b/packages/f2/test/components/line/line.test.tsx
@@ -1,11 +1,6 @@
-/* @jsx React.createElement */
 import { Rect } from '../../../src/coord';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactCanvas from '../../../../react/src/index';
-import { jsx, Component, Canvas, Chart, Timeline } from '../../../src';
-import { Line, Point, Axis, Tooltip, Legend } from '../../../src/components';
-import { createContext } from '../../util';
+import { jsx, Component, Canvas, Chart, Line, Point, Axis, Tooltip, Legend } from '../../../src';
+import { createContext, delay } from '../../util';
 
 const data = [
   {
@@ -962,16 +957,9 @@ describe('折线图', () => {
     });
   });
 
-  it.skip('动态折线图', () => {
+  it('动态折线图', async () => {
+    const context = createContext('动态折线图');
     const data = [];
-    const { offsetWidth } = document.body;
-    const height = offsetWidth * 0.75;
-
-    class TestComponent extends Component {
-      constructor(props) {
-        super(props);
-      }
-    }
 
     // 添加数据，模拟数据，可以指定当前时间的偏移的秒
     function getRecord(offset?) {
@@ -981,64 +969,78 @@ describe('折线图', () => {
         value: Math.random() + 10,
       };
     }
-
+    data.push(getRecord(-3));
     data.push(getRecord(-2));
     data.push(getRecord(-1));
-    data.push(getRecord(null));
 
-    class ChartComponent extends React.Component<any, any> {
+    const lineRef = { current: null };
+
+    class DynamicLine extends Component {
       constructor(props) {
         super(props);
         this.state = {
           data,
         };
       }
 
-      componentDidMount() {
+      didMount() {
         // 更新数据
-        for (let i = 40; i > 0; i--) {
+        for (let i = 0; i <= 40; i++) {
           setTimeout(() => {
             const { data } = this.state;
-            this.setState({ data: [].concat(data, getRecord(0)) });
-          }, i * 1000);
+            this.setState({ data: [].concat(data, getRecord(i)) });
+          }, i * 30);
         }
       }
 
       render() {
         const { data } = this.state;
         return (
-          <div className="">
-            <ReactCanvas width={offsetWidth} height={height}>
-              <Chart
-                data={data}
-                scale={{
-                  time: {
-                    type: 'timeCat',
-                  },
-                  value: {
-                    min: 0,
-                  },
-                }}
-              >
-                <Line x="time" y="value" />
-                <Axis field="value" />
-                <Axis field="time" />
-                <TestComponent />
-              </Chart>
-            </ReactCanvas>
-          </div>
+          <Chart
+            data={data}
+            scale={{
+              time: {
+                type: 'timeCat',
+              },
+              value: {
+                min: 0,
+              },
+            }}
+          >
+            <Line ref={lineRef} x="time" y="value" />
+            <Axis field="value" />
+            <Axis field="time" />
+          </Chart>
         );
       }
     }
+    const { props } = (
+      <Canvas context={context} animate={false}>
+        <DynamicLine />
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    const container = lineRef.current.container;
+    const polyline = container
+      .get('children')[0]
+      .get('children')[0]
+      .get('children')[0]
+      .get('children')[0];
+
+    expect(polyline.get('attrs').points.length).toBe(3);
 
-    const appDOM = document.createElement('div');
-    appDOM.id = 'app';
-    document.body.appendChild(appDOM);
+    await delay(80);
 
-    const Element = <ChartComponent />;
+    const newPolyline = container
+      .get('children')[0]
+      .get('children')[0]
+      .get('children')[0]
+      .get('children')[0];
 
-    // For debug
-    ReactDOM.render(Element, document.getElementById('app'));
+    expect(newPolyline.get('attrs').points.length > 3).toBe(true);
   });
 
   describe('其他折线图', () => {

diff --git a/packages/f2/test/components/line/radar.test.tsx b/packages/f2/test/components/line/radar.test.tsx
@@ -1,5 +1,3 @@
-/* @jsx React.createElement */
-import React from 'react';
 import { jsx, Canvas, Chart, Area } from '../../../src';
 import { Line, Point, Axis, Legend } from '../../../src/components';
 import { createContext } from '../../util';

diff --git a/packages/f2/test/index.test.ts b/packages/f2/test/index.test.ts
@@ -1,8 +1,7 @@
-import F2, { Component } from '../src';
+import { Component } from '../src';
 
 describe('Index', () => {
   it('Index', () => {
-    expect(F2).not.toBe(null);
     expect(Component).not.toBe(null);
   });
 });