feat: 图形选中支持自定义事件 (#1397)

antvis · Mar 15, 2022 · 6381fa8 · 6381fa8
1 parent 04a8e48
commit 6381fa8
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 3 deletions.
diff --git a/packages/f2/src/components/geometry/selection.ts b/packages/f2/src/components/geometry/selection.ts
@@ -19,6 +19,7 @@ type StyleType = (record: any) => ShapeAttrs;
 
 export interface SelectionProps {
   selection?: {
+    triggerOn?: 'click' | 'press' | string;
     type?: 'single' | 'multiple';
     defaultSelected?: any[];
     selectedStyle?: ShapeAttrs | StyleType;
@@ -48,9 +49,11 @@ class Selection<
   didMount() {
     const { props, state, container } = this;
     const canvas = container.get('canvas');
-    canvas.on('click', (ev) => {
-      const { selection, chart } = props;
-      if (!selection) return;
+    const { selection, chart } = props;
+    if (!selection) return;
+    // 默认为 click
+    const { triggerOn = 'click' } = selection;
+    canvas.on(triggerOn, (ev) => {
       const { points } = ev;
       const records = this.getSnapRecords(points[0]);
       const { type = 'single', cancelable = true } = selection;

diff --git a/...ponents/interval/__image_snapshots__/selected-test-tsx-数据选中-press-事件-1-snap.png b/...ponents/interval/__image_snapshots__/selected-test-tsx-数据选中-press-事件-1-snap.png
diff --git a/packages/f2/test/components/interval/selected.test.tsx b/packages/f2/test/components/interval/selected.test.tsx
@@ -187,6 +187,49 @@ describe('数据选中', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('press 事件', async () => {
+    const context = createContext();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Axis field="genre" />
+          <Axis field="sold" />
+          <Interval
+            x="genre"
+            y="sold"
+            color="genre"
+            selection={{
+              triggerOn: 'press',
+              // type: 'multiple',
+              defaultSelected: [{ a: '1', genre: 'Strategy', sold: 115 }],
+              selectedStyle: {
+                fillOpacity: 1,
+              },
+              unSelectedStyle: {
+                fillOpacity: 0.4,
+              },
+              cancelable: false,
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+    await delay(200);
+
+    // 模拟 press 事件
+    await delay(20);
+    await gestureSimulator(context.canvas, 'touchstart', [{ x: 260, y: 170 }]);
+    await delay(20);
+    await gestureSimulator(context.canvas, 'touchmove', [{ x: 213, y: 165 }]);
+    await delay(20);
+    await gestureSimulator(context.canvas, 'touchend', [{ x: 213, y: 165 }]);
+    await delay(300);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('饼图', async () => {
     const context = createContext();
     const { props } = (

diff --git a/packages/site/docs/api/chart/interval.zh.md b/packages/site/docs/api/chart/interval.zh.md
@@ -36,6 +36,12 @@ const data = [
 
 设置单选/多选， 默认为 `single`（单选），可选值： `'single' | 'multiple'`
 
+#### triggerOn: string
+
+触发的事件，默认为 `click`，可选 `'click' | 'press'`
+
+> 设置 press 时，需要把 cancelable 设置成 false, 否则会有明显的闪动
+
 #### defaultSelected: Array
 
 默认的选中项，可设置多个