diff --git a/packages/f2/src/components/geometry/selection.ts b/packages/f2/src/components/geometry/selection.ts index 3799847c7..23c8d95ca 100644 --- 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,6 +71,7 @@ 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); @@ -76,6 +79,7 @@ class Selection< 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/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-2-snap.png" "b/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-2-snap.png" index 4e6835782..34433968c 100644 Binary files "a/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-2-snap.png" and "b/packages/f2/test/components/interval/example/__image_snapshots__/doughnut-test-tsx-\347\216\257\345\275\242\345\233\276-\347\216\253\347\221\260\347\216\257\345\275\242\345\233\276-2-snap.png" differ diff --git a/packages/f2/test/components/interval/example/doughnut.test.tsx b/packages/f2/test/components/interval/example/doughnut.test.tsx index 5fbb4c025..b6830732a 100644 --- 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 } = ( - + { 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 index ce77c4717..e1721ea4c 100644 --- 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 } = ( + + + { + const { yMax, yMin } = record; + return { + r: (yMax - yMin) * 1.1, + }; + }, + cancelable: true, + onChange: onChange, + }} + /> + + + ); + + 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); + }); +});