feat: 增加再次点击取消高亮状态 (#2138)

Author: tangying1027

packages/f2/src/components/elementLink/withElementLink.tsx

@@ -29,6 +29,7 @@ export default (View) => {
         const highlightsData = data.filter((record) => {
           return condition(record[field], record);
         });
+        if (!highlightsData.length) return;
         elements.push({
           highlightsData,
           field,

packages/f2/src/components/legend/withLegend.tsx

@@ -286,7 +286,7 @@ export default (View) => {
       }
 
       const { field, tickValue } = dataItem;
-      const { filtered: prevFiltered } = this.state;
+      const { filtered: prevFiltered, highlighted: preHighlighted } = this.state;
       const filtered = {
         ...prevFiltered,
         [tickValue]: !prevFiltered[tickValue],
@@ -301,7 +301,7 @@ export default (View) => {
         });
       } else if (clickMode === 'element-link') {
         const highlighted = {
-          [tickValue]: true,
+          [tickValue]: !preHighlighted[tickValue],
         };
         this.setState({
           highlighted,

packages/f2/test/components/elementLink/__image_snapshots__/index-test-tsx-element-link-toggle-highlight-1-snap.png

@@ -35,4 +35,36 @@ describe('element-link', () => {
     await delay(100);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('toggle highlight', async () => {
+    const context = createContext('toggle highlight', {
+      height: '300px',
+      width: '400px',
+    });
+
+    const { props } = (
+      <Canvas context={context}>
+        <Chart data={data}>
+          <Axis field="year" />
+          <Axis field="value" />
+          <Interval x="year" y="value" color="type" adjust="stack" />
+          <ElementLink field="type" />
+          <Legend position="top" clickMode="element-link" />
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(500);
+
+    await gestureSimulator(context.canvas, 'click', { x: 150, y: 30 });
+    await delay(100);
+    expect(context).toMatchImageSnapshot();
+
+    await gestureSimulator(context.canvas, 'click', { x: 150, y: 30 });
+    await delay(100);
+
+    expect(context).toMatchImageSnapshot();
+  });
 });