fix: 异步问题调整 & 去掉 Graphic 依赖 (#1573)

antvis · Sep 7, 2022 · 91a14ed · 91a14ed
1 parent 8eefd29
commit 91a14ed
Show file tree

Hide file tree

Showing 32 changed files with 106 additions and 518 deletions.
diff --git a/packages/f2/src/canvas.ts b/packages/f2/src/canvas.ts
@@ -1,44 +1,44 @@
-import { CanvasRenderer, Canvas } from '@antv/f-engine';
+import { Canvas } from '@antv/f-engine';
 import { deepMix } from '@antv/util';
 import Layout from './base/layout';
 import defaultTheme from './theme';
 import { px2hd as defaultPx2hd, batch2hd } from './util';
 
-class f2Canvas extends Canvas {
-  layout: Layout;
+// class f2Canvas extends Canvas {
+//   layout: Layout;
 
-  constructor(props) {
-    const theme = deepMix({}, defaultTheme, props.theme);
-    props = {
-      ...props,
-      px2hd: props.px2hd ? batch2hd(props.px2hd) : defaultPx2hd,
-      renderer: props.renderer || new CanvasRenderer(),
-      theme,
-    };
-    super(props);
+//   constructor(props) {
+//     const theme = deepMix({}, defaultTheme, props.theme);
+//     props = {
+//       ...props,
+//       px2hd: props.px2hd ? batch2hd(props.px2hd) : defaultPx2hd,
+//       renderer: props.renderer || new CanvasRenderer(),
+//       theme,
+//     };
+//     super(props);
 
-    const { style: customStyle, px2hd } = props;
-    const { width: canvasWidth, height: canvasHeight } = this.getCanvasConfig();
+//     const { style: customStyle, px2hd } = props;
+//     const { width: canvasWidth, height: canvasHeight } = this.getCanvasConfig();
 
-    const style = px2hd({
-      left: 0,
-      top: 0,
-      width: canvasWidth,
-      height: canvasHeight,
-      padding: theme.padding,
-      ...customStyle,
-    });
+//     const style = px2hd({
+//       left: 0,
+//       top: 0,
+//       width: canvasWidth,
+//       height: canvasHeight,
+//       padding: theme.padding,
+//       ...customStyle,
+//     });
 
-    const layout = Layout.fromStyle(style);
-    this.layout = layout;
+//     const layout = Layout.fromStyle(style);
+//     this.layout = layout;
 
-    this.setContext({
-      left: layout.left,
-      top: layout.top,
-      width: layout.width,
-      height: layout.height,
-    });
-  }
-}
+//     this.setContext({
+//       left: layout.left,
+//       top: layout.top,
+//       width: layout.width,
+//       height: layout.height,
+//     });
+//   }
+// }
 
-export { f2Canvas };
+export default Canvas;
diff --git a/packages/f2/src/components/axis/polar/polar-x.tsx b/packages/f2/src/components/axis/polar/polar-x.tsx
@@ -1,14 +1,14 @@
 import { jsx } from '../../../jsx';
-import { Vector2 } from '@antv/f-engine';
+import { length as vec2Length } from 'gl-matrix/vec2';
+import type { vec2 } from 'gl-matrix';
 import { PolarProps } from '../types';
-// const { Vector2 } = G;
 
 // 相对圆心偏移量的点
 function getOffsetPoint(center, point, offset) {
   const vectorX = point.x - center.x;
   const vectorY = point.y - center.y;
   const vector = [vectorX, vectorY];
-  const vectorLength = Vector2.length(vector);
+  const vectorLength = vec2Length((vector as unknown) as vec2);
   const offsetLength = vectorLength + offset;
 
   const x = (vectorX / vectorLength) * offsetLength;
@@ -90,7 +90,7 @@ export default (props: PolarProps) => {
   const firstTicks = ticks[0];
   const { points } = firstTicks;
   const end = points[points.length - 1];
-  const radius = Vector2.length([end.x - center.x, end.y - center.y]);
+  const radius = vec2Length([end.x - center.x, end.y - center.y]);
 
   return (
     <group>

diff --git a/packages/f2/src/components/axis/polar/polar-y.tsx b/packages/f2/src/components/axis/polar/polar-y.tsx
@@ -1,5 +1,5 @@
 import { jsx } from '../../../jsx';
-import { Vector2 } from '@antv/f-engine';
+import { length as vec2Length } from 'gl-matrix/vec2';
 import { PolarProps } from '../types';
 
 export default (props: PolarProps) => {
@@ -20,7 +20,7 @@ export default (props: PolarProps) => {
                   attrs={{
                     x: center.x,
                     y: center.y,
-                    r: Vector2.length([end.x - center.x, end.y - center.y]),
+                    r: vec2Length([end.x - center.x, end.y - center.y]),
                     ...grid,
                     ...gridStyle,
                   }}

diff --git a/packages/f2/src/components/tooltip/tooltipView.tsx b/packages/f2/src/components/tooltip/tooltipView.tsx
@@ -193,9 +193,12 @@ export default class TooltipView extends Component {
     this.arrowRef = createRef();
   }
   // 调整 显示的位置
-  _position() {
+  async _position() {
     const { props, context, rootRef, arrowRef } = this;
+    const { canvas } = context;
+    await canvas.ready;
     const rect = rootRef.current?.childNodes[0];
+
     if (!rect) {
       return;
     }

diff --git a/packages/f2/src/coord/polar.ts b/packages/f2/src/coord/polar.ts
@@ -1,6 +1,9 @@
 import Base from './base';
 import { Range, Option } from './types';
-import { Vector2, Matrix } from '@antv/f-engine';
+import { rotate as mat2dRotate } from 'gl-matrix/mat2d'
+import { length as vec2Length, transformMat2d as vec2TransformMat2d  } from 'gl-matrix/vec2';
+import { vec2Zero, vec2AngleTo } from '../util/vector';
+import type { mat2d, vec2 } from 'gl-matrix';
 
 interface PolarOption extends Option {
   radius: number; // 内半径比例
@@ -76,26 +79,27 @@ class Polar extends Base {
     const [xStart, xEnd] = x;
     const [yStart, yEnd] = y;
 
-    const m = [1, 0, 0, 1, 0, 0];
-    Matrix.rotate(m, m, xStart);
+    const m = ([1, 0, 0, 1, 0, 0] as unknown) as mat2d;
 
-    let startV = [1, 0];
-    Vector2.transformMat2d(startV, startV, m);
+    mat2dRotate(m, m, xStart);
+
+    let startV = ([1, 0] as unknown) as vec2;
+    vec2TransformMat2d(startV, startV, m);
     startV = [startV[0], startV[1]];
 
-    const pointV = [point.x - center.x, point.y - center.y];
-    if (Vector2.zero(pointV)) {
+    const pointV = ([point.x - center.x, point.y - center.y] as unknown) as vec2;
+    if (vec2Zero(pointV)) {
       return {
         x: 0,
         y: 0,
       };
     }
 
-    let theta = Vector2.angleTo(startV, pointV, xEnd < xStart);
+    let theta = vec2AngleTo(startV, pointV, xEnd < xStart);
     if (Math.abs(theta - Math.PI * 2) < 0.001) {
       theta = 0;
     }
-    const l = Vector2.length(pointV);
+    const l = vec2Length(pointV);
     let percentX = theta / (xEnd - xStart);
     percentX = xEnd - xStart > 0 ? percentX : -percentX;
     const percentY = (l - yStart) / (yEnd - yStart);

diff --git a/packages/f2/src/index.ts b/packages/f2/src/index.ts
@@ -2,7 +2,7 @@ import type * as Types from './types'
 export { Types };
 
 import { CanvasRenderer, jsx as createElement, Timeline, Fragment, createRef, Component, Children, jsx, renderShape, JSX} from '@antv/f-engine'
-import { f2Canvas as Canvas } from './canvas';
+import  Canvas  from './canvas';
 import Chart from './chart';
 
 

diff --git a/packages/f2/src/util/vector.ts b/packages/f2/src/util/vector.ts
@@ -0,0 +1,31 @@
+/**
+ *  expand Vec2
+ */
+import { angle as vec2Angle } from 'gl-matrix/vec2';
+
+const vec2Direction = (v1, v2) => {
+  return v1[0] * v2[1] - v2[0] * v1[1];
+};
+
+const vec2Zero = (v) => {
+  return v[0] === 0 && v[1] === 0;
+};
+
+const vec2AngleTo = (v1, v2, direction) => {
+  const angle = vec2Angle(v1, v2);
+  const angleLargeThanPI = vec2Direction(v1, v2) >= 0;
+  if (direction) {
+    if (angleLargeThanPI) {
+      return Math.PI * 2 - angle;
+    }
+
+    return angle;
+  }
+
+  if (angleLargeThanPI) {
+    return angle;
+  }
+  return Math.PI * 2 - angle;
+};
+
+export { vec2Zero, vec2AngleTo };
diff --git a/packages/f2/test/__image_snapshots__/index-test-ts-index-index-1-snap.png b/packages/f2/test/__image_snapshots__/index-test-ts-index-index-1-snap.png
diff --git a/packages/f2/test/components/gauge/gauge.test.tsx b/packages/f2/test/components/gauge/gauge.test.tsx
@@ -21,7 +21,7 @@ describe('Gauge', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
 
     await delay(1000);
     expect(context).toMatchImageSnapshot();

diff --git a/...nents/interval/__image_snapshots__/interval-test-tsx-interval-render-2-snap.png b/...nents/interval/__image_snapshots__/interval-test-tsx-interval-render-2-snap.png
diff --git a/packages/f2/test/components/interval/example/bar.test.tsx b/packages/f2/test/components/interval/example/bar.test.tsx
@@ -66,7 +66,7 @@ describe('条形图', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
 
     await delay(1000);
     expect(context).toMatchImageSnapshot();

diff --git a/packages/f2/test/components/interval/selected.test.tsx b/packages/f2/test/components/interval/selected.test.tsx
@@ -38,7 +38,7 @@ describe('数据选中', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
     await delay(200);
     expect(context).toMatchImageSnapshot();
 
@@ -80,7 +80,7 @@ describe('数据选中', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
     await delay(200);
     expect(context).toMatchImageSnapshot();
 
@@ -130,7 +130,7 @@ describe('数据选中', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
     await delay(200);
     expect(context).toMatchImageSnapshot();
 
@@ -172,7 +172,7 @@ describe('数据选中', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
     await delay(200);
     expect(context).toMatchImageSnapshot();
 
@@ -215,7 +215,7 @@ describe('数据选中', () => {
     );
 
     const canvas = new Canvas(props);
-    await canvas.render();
+    await await canvas.render();
     await delay(200);
 
     // 模拟 press 事件
@@ -260,7 +260,7 @@ describe('数据选中', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
     await delay(200);
     expect(context).toMatchImageSnapshot();
 
@@ -310,7 +310,7 @@ describe('cancelable = false', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
 
     await delay(200);
 
@@ -360,7 +360,7 @@ describe('改变默认值', () => {
 
     const props = getProps(data, [{ a: '1', genre: 'Sports', sold: 275 }]);
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
 
     await delay(200);
     expect(context).toMatchImageSnapshot();

diff --git a/...ponents/legend/__image_snapshots__/pie-test-tsx-geometry-attr-不传size-1-snap.png b/...ponents/legend/__image_snapshots__/pie-test-tsx-geometry-attr-不传size-1-snap.png
diff --git a/packages/f2/test/components/legend/interval.test.tsx b/packages/f2/test/components/legend/interval.test.tsx
@@ -26,7 +26,7 @@ describe('Interval', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
 
     await delay(800);
     expect(context).toMatchImageSnapshot();
@@ -40,7 +40,7 @@ describe('Interval', () => {
     expect(context).toMatchImageSnapshot();
 
     await gestureSimulator(context.canvas, 'click', { x: 165, y: 26 });
-    await delay(500);
+    await delay(800);
     expect(context).toMatchImageSnapshot();
   });
 });
diff --git a/packages/f2/test/components/legend/legend.test.tsx b/packages/f2/test/components/legend/legend.test.tsx
@@ -379,7 +379,7 @@ describe('图例', () => {
     expect(context).toMatchImageSnapshot();
 
     const updateProps = getProps(data1);
-    canvas.update(updateProps);
+    await canvas.update(updateProps);
     expect(context).toMatchImageSnapshot();
   });
 

diff --git a/packages/f2/test/components/tooltip/alias.test.tsx b/packages/f2/test/components/tooltip/alias.test.tsx
@@ -31,7 +31,7 @@ describe('alias', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
 
     await delay(500);
     expect(context).toMatchImageSnapshot();

diff --git a/packages/f2/test/components/tooltip/tooltip.test.tsx b/packages/f2/test/components/tooltip/tooltip.test.tsx
@@ -127,7 +127,7 @@ describe('tooltip', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
     await delay(500);
     await gestureSimulator(context.canvas, 'press', { x: 170, y: 21 });
     expect(onChangeMockCallback.mock.calls.length).toBe(1); // 验证 onChange 有被调用

diff --git a/packages/f2/test/timeline/radar-change.test.tsx b/packages/f2/test/timeline/radar-change.test.tsx
@@ -141,7 +141,7 @@ describe('雷达图', () => {
       </Canvas>
     );
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
 
     await delay(2000);
     expect(context).toMatchImageSnapshot();