fix: 事件挂载gesture属性上 & 补充圆角单测 (#1525)

antvis · Jun 23, 2022 · 22ebb87 · 22ebb87
1 parent 67d7a9f
commit 22ebb87
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 25 deletions.
diff --git a/packages/f2/src/components/axis/types.d.ts b/packages/f2/src/components/axis/types.d.ts
@@ -40,6 +40,7 @@ interface Point {
 }
 
 export interface Tick {
+  value: number;
   points: Point[];
   text: string;
   tickValue: string | number;

diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
@@ -328,7 +328,7 @@ class Geometry<
     ['onPressStart', 'onPress', 'onPressEnd', 'onPan', 'onPanStart', 'onPanEnd'].forEach(
       (eventName) => {
         if (props[eventName]) {
-          context.root.on(eventName.substr(2).toLowerCase(), (ev) => {
+          context.gesture.on(eventName.substr(2).toLowerCase(), (ev) => {
             ev.geometry = this;
             props[eventName](ev);
           });

diff --git a/packages/f2/src/components/geometry/selection.ts b/packages/f2/src/components/geometry/selection.ts
@@ -53,7 +53,7 @@ class Selection<
     if (!selection) return;
     // 默认为 click
     const { triggerOn = 'click' } = selection;
-    context.root.on(triggerOn, (ev) => {
+    context.gesture.on(triggerOn, (ev) => {
       const { points } = ev;
       const records = this.getSnapRecords(points[0]);
       const { type = 'single', cancelable = true } = selection;

diff --git a/packages/f2/src/components/guide/withGuide.tsx b/packages/f2/src/components/guide/withGuide.tsx
@@ -33,7 +33,7 @@ export default (View) => {
       const { canvas } = context;
       const { onClick } = props;
 
-      context.root.on('click', (ev) => {
+      context.gesture.on('click', (ev) => {
         const { points } = ev;
         const shape = this.triggerRef.current;
         if (!shape || shape.isDestroyed()) return;

diff --git a/packages/f2/src/components/legend/withLegend.tsx b/packages/f2/src/components/legend/withLegend.tsx
@@ -243,7 +243,7 @@ export default (View) => {
       if (!clickable) return;
 
       // item 点击事件
-      context.root.on('click', (ev) => {
+      context.gesture.on('click', (ev) => {
         const { points } = ev;
 
         const point = points[0];

diff --git a/packages/f2/src/components/pieLabel/withPieLabel.tsx b/packages/f2/src/components/pieLabel/withPieLabel.tsx
@@ -318,7 +318,7 @@ export default (View) => {
       const { context, props } = this;
       const { canvas } = context;
       const { triggerOn = DEFAULT_CONFIG.triggerOn } = props;
-      context.root.on(triggerOn, this._handleEvent);
+      context.gesture.on(triggerOn, this._handleEvent);
     }
 
     render() {

diff --git a/packages/f2/src/components/sunburst/withSunburst.tsx b/packages/f2/src/components/sunburst/withSunburst.tsx
@@ -45,7 +45,7 @@ export default (View) => {
       const { canvas } = context;
       this.triggerRef = [];
 
-      context.root.on('click', (ev) => {
+      context.gesture.on('click', (ev) => {
         const { points } = ev;
         const shape = this.triggerRef.find((ref) => {
           return isInBBox(ref.current.getBBox(), points[0]);

diff --git a/packages/f2/src/components/tooltip/withTooltip.tsx b/packages/f2/src/components/tooltip/withTooltip.tsx
@@ -95,8 +95,8 @@ export default (View) => {
       const { props, context } = this;
       const { triggerOn = 'press', triggerOff = 'pressend' } = props;
       // 解绑事件
-      context.root.off(triggerOn, this._triggerOn);
-      context.root.off(triggerOff, this._triggerOff);
+      context.gesture.off(triggerOn, this._triggerOn);
+      context.gesture.off(triggerOff, this._triggerOff);
     }
     _initShow() {
       const { props } = this;
@@ -129,12 +129,12 @@ export default (View) => {
     _initEvent() {
       const { context, props } = this;
       const { triggerOn = 'press', triggerOff = 'pressend', alwaysShow = false } = props;
-      context.root.on(triggerOn, (ev) => {
+      context.gesture.on(triggerOn, (ev) => {
         const { points } = ev;
         this.show(points[0], ev);
       });
 
-      context.root.on(triggerOff, (_ev) => {
+      context.gesture.on(triggerOff, (_ev) => {
         if (!alwaysShow) {
           this.hide();
         }

diff --git a/packages/f2/src/components/zoom/index.tsx b/packages/f2/src/components/zoom/index.tsx
@@ -276,19 +276,18 @@ class Zoom<P extends ZoomProps = ZoomProps, S extends ZoomState = ZoomState> ext
 
   _bindEvents() {
     const { props, context } = this;
-    const { canvas } = context;
     const { pan, pinch } = props;
     // 统一绑定事件
     if (pan !== false) {
-      context.root?.on('panstart', this.onStart);
-      context.root?.on('pan', this.onPan);
-      context.root?.on('panend', this.onEnd);
+      context.gesture?.on('panstart', this.onStart);
+      context.gesture?.on('pan', this.onPan);
+      context.gesture?.on('panend', this.onEnd);
     }
 
     if (pinch !== false) {
-      context.root?.on('pinchstart', this.onStart);
-      context.root?.on('pinch', this.onPinch);
-      context.root?.on('pinchend', this.onEnd);
+      context.gesture?.on('pinchstart', this.onStart);
+      context.gesture?.on('pinch', this.onPinch);
+      context.gesture?.on('pinchend', this.onEnd);
     }
   }
 
@@ -298,14 +297,14 @@ class Zoom<P extends ZoomProps = ZoomProps, S extends ZoomState = ZoomState> ext
     const { pan, pinch } = props;
     // 统一解绑事件
     if (pan !== false) {
-      context.root?.off('panstart', this.onStart);
-      context.root?.off('pan', this.onPan);
-      context.root?.off('panend', this.onEnd);
+      context.gesture?.off('panstart', this.onStart);
+      context.gesture?.off('pan', this.onPan);
+      context.gesture?.off('panend', this.onEnd);
     }
     if (pinch !== false) {
-      context.root?.off('pinchstart', this.onStart);
-      context.root?.off('pinch', this.onPinch);
-      context.root?.off('pinchend', this.onEnd);
+      context.gesture?.off('pinchstart', this.onStart);
+      context.gesture?.off('pinch', this.onPinch);
+      context.gesture?.off('pinchend', this.onEnd);
     }
   }
 }

diff --git a/...omponents/interval/example/__image_snapshots__/pie-test-tsx-饼图-圆角圆环图-1-snap.png b/...omponents/interval/example/__image_snapshots__/pie-test-tsx-饼图-圆角圆环图-1-snap.png
diff --git a/packages/f2/test/components/interval/example/pie.test.tsx b/packages/f2/test/components/interval/example/pie.test.tsx
@@ -2,7 +2,7 @@ import { jsx } from '../../../../src';
 import { Polar, Rect } from '../../../../src/coord';
 import { isArray } from '@antv/util';
 import { Canvas, Chart, Component } from '../../../../src';
-import { Hammer } from '@antv/f-engine';
+import { Gesture } from '@antv/f-engine';
 import { Interval } from '../../../../src/components';
 import { createContext, delay, gestureSimulator } from '../../../util';
 
@@ -31,7 +31,7 @@ class Test extends Component {
   _initEvent() {
     const { context } = this;
     const { canvas } = context;
-    const hammer = new Hammer(canvas);
+    const hammer = new Gesture(canvas);
     hammer.on('click', this._handleEvent);
   }
 
@@ -126,6 +126,43 @@ describe('饼图', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('圆角圆环图', async () => {
+    const context = createContext('圆角圆环图');
+    const chartRef = { current: null };
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart
+          ref={chartRef}
+          data={data}
+          coord={{
+            type: Polar,
+            transposed: true,
+            innerRadius: 0.5,
+          }}
+        >
+          <Interval
+            x="a"
+            y="percent"
+            adjust="stack"
+            color={{
+              field: 'name',
+              range: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'],
+            }}
+            style={{
+              radius: [10, 7, 4, 2],
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('饼图-交互式label', async () => {
     const context = createContext('饼图-交互式label');
     const chartRef = { current: null };