feat: selection 增加 onChange (#1931)

* feat: selection增加onchange * chore: 修改单测 --------- Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
antvis · Feb 26, 2024 · ca9bd0b · ca9bd0b
1 parent b20d3ff
commit ca9bd0b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 3 deletions.
diff --git a/packages/f2/src/components/geometry/selection.ts b/packages/f2/src/components/geometry/selection.ts
@@ -25,6 +25,7 @@ export interface SelectionProps {
     selectedStyle?: ShapeStyleProps | StyleType;
     unSelectedStyle?: ShapeStyleProps | StyleType;
     cancelable?: boolean;
+    onChange?: Function;
   };
 }
 
@@ -50,7 +51,7 @@ class Selection<
     const { selection, chart } = props;
     if (!selection) return;
     // 默认为 click
-    const { triggerOn = 'click' } = selection;
+    const { triggerOn = 'click', onChange } = selection;
     chart.on(triggerOn, (ev) => {
       const { points, canvasX: x, canvasY: y } = ev;
       const point = triggerOn === 'click' ? { x, y } : points[0];
@@ -59,6 +60,7 @@ class Selection<
 
       if (!records || !records.length) {
         if (cancelable) {
+          onChange && onChange({ selected: null })
           this.setState({
             selected: null,
           } as S);
@@ -69,13 +71,15 @@ class Selection<
       const { selected } = state;
       const origins = records.map((record) => record.origin);
       if (!selected || !selected.length) {
+        onChange && onChange({ selected: origins })
         this.setState({
           selected: origins,
         } as S);
       }
 
       if (type === 'single') {
         if (!cancelable) {
+          onChange && onChange({ selected: origins })
           this.setState({
             selected: origins,
           } as S);
@@ -87,6 +91,7 @@ class Selection<
             newSelected.push(record.origin);
           }
         });
+        onChange && onChange({ selected: newSelected })
         this.setState({
           selected: newSelected,
         } as S);
@@ -111,6 +116,7 @@ class Selection<
         .map((key) => selectedMap[key])
         .filter(Boolean);
 
+      onChange && onChange({ selected: newSelected })
       this.setState({
         selected: newSelected,
       } as S);

diff --git a/...nts/interval/example/__image_snapshots__/doughnut-test-tsx-环形图-玫瑰环形图-2-snap.png b/...nts/interval/example/__image_snapshots__/doughnut-test-tsx-环形图-玫瑰环形图-2-snap.png
diff --git a/packages/f2/test/components/interval/example/doughnut.test.tsx b/packages/f2/test/components/interval/example/doughnut.test.tsx
@@ -261,7 +261,7 @@ describe('环形图', () => {
     const context = createContext('基础环形图');
     const chartRef = { current: null };
     const { type, props } = (
-      <Canvas context={context} pixelRatio={1}>
+      <Canvas context={context} pixelRatio={1} animate={false}>
         <Chart
           ref={chartRef}
           data={data}
@@ -313,7 +313,7 @@ describe('环形图', () => {
     await delay(20);
 
     await gestureSimulator(context.canvas, 'click', { x: 133, y: 64 });
-    await delay(100);
+    await delay(200);
     expect(context).toMatchImageSnapshot();
   });
 });
diff --git a/packages/f2/test/components/interval/selected.test.tsx b/packages/f2/test/components/interval/selected.test.tsx
@@ -372,3 +372,55 @@ describe('改变默认值', () => {
     expect(context).toMatchImageSnapshot();
   });
 });
+
+describe('select onChange', () => {
+  it('select onChange', async () => {
+    const context = createContext();
+    const onChange = jest.fn();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart
+          data={data}
+          coord={{
+            radius: 0.8,
+            type: 'polar',
+            transposed: true,
+          }}
+        >
+          <Interval
+            x="a"
+            y="sold"
+            adjust="stack"
+            color="genre"
+            selection={{
+              defaultSelected: [{ a: '1', genre: 'Strategy', sold: 115 }],
+              selectedStyle: (record) => {
+                const { yMax, yMin } = record;
+                return {
+                  r: (yMax - yMin) * 1.1,
+                };
+              },
+              cancelable: true,
+              onChange: onChange,
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+    await delay(200);
+
+    // 选中
+    await gestureSimulator(context.canvas, 'click', { x: 144, y: 68 });
+    await delay(200);
+    expect(onChange.mock.calls.length).toBe(1);
+    expect(onChange.mock.calls[0][0].selected[0]).toEqual({ a: '1', genre: 'Other', sold: 110 });
+
+    // 反选
+    await gestureSimulator(context.canvas, 'click', { x: 213, y: 166 });
+    await delay(200);
+    expect(onChange.mock.calls.length).toBe(2);
+  });
+});