feat: add the ability to brush historical

lxfu1 · lxfu1 · commit 81ad4a24328e · 2025-12-23T20:12:55.000+08:00
diff --git a/__tests__/integration/snapshots/interaction/penguins-point-brush-filter-with-history/step0.svg b/__tests__/integration/snapshots/interaction/penguins-point-brush-filter-with-history/step0.svg
diff --git a/__tests__/integration/snapshots/interaction/penguins-point-brush-filter-with-history/step1.svg b/__tests__/integration/snapshots/interaction/penguins-point-brush-filter-with-history/step1.svg
diff --git a/__tests__/integration/snapshots/interaction/penguins-point-brush-filter-with-history/step2.svg b/__tests__/integration/snapshots/interaction/penguins-point-brush-filter-with-history/step2.svg
diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts
@@ -24,6 +24,7 @@ export { cars3LineBrushAxis } from './cars3-line-brush-axis';
 export { cars3LineVerticalBrushAxis } from './cars3-line-vertical-brush-axis';
 export { penguinsPointBrushAxis } from './penguins-point-brush-axis';
 export { penguinsPointBrushFilter } from './penguins-point-brush-filter';
+export { penguinsPointBrushFilterWithHistory } from './penguins-point-brush-filter-with-history';
 export { settleWeatherCellBrushFilter } from './seattle-weather-cell-brush-filter';
 export { profitIntervalBrushFilter } from './profit-interval-brush-filter';
 export { penguinsPointBrushXFilter } from './penguins-point-brush-x-filter';
diff --git a/__tests__/plots/interaction/penguins-point-brush-filter-with-history.ts b/__tests__/plots/interaction/penguins-point-brush-filter-with-history.ts
@@ -0,0 +1,48 @@
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { brush, dblclick } from './penguins-point-brush';
+
+export function penguinsPointBrushFilterWithHistory(): G2Spec {
+  return {
+    type: 'point',
+    data: {
+      type: 'fetch',
+      value: 'data/penguins.csv',
+    },
+    axis: { x: { animate: false }, y: { animate: false } },
+    encode: {
+      color: 'species',
+      x: 'culmen_length_mm',
+      y: 'culmen_depth_mm',
+    },
+    state: {
+      inactive: { stroke: 'gray' },
+    },
+    interaction: {
+      brushFilter: {
+        history: true,
+      },
+    },
+  };
+}
+
+penguinsPointBrushFilterWithHistory.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const plot = document.getElementsByClassName(PLOT_CLASS_NAME)[0];
+  return [
+    {
+      changeState: () => {
+        brush(plot, 100, 100, 300, 300);
+      },
+    },
+    {
+      changeState: () => {
+        brush(plot, 100, 100, 300, 300);
+      },
+    },
+    {
+      changeState: () => {
+        dblclick(plot);
+      },
+    },
+  ];
+};
diff --git a/site/docs/manual/core/interaction/brushFilter.en.md b/site/docs/manual/core/interaction/brushFilter.en.md
@@ -94,6 +94,7 @@ It can also be configured at the View level. Interactions declared on the view w
 | Property | Description              | Type          | Default           | Required |
 | -------- | ------------------------ | ------------- | ----------------- | -------- |
 | reverse  | Whether to reverse brush | boolean       | false             |          |
+| history  | Whether to histroy brush | boolean       | false             |          |
 | mask     | Style of brush area mask | [mask](#mask) | See [mask](#mask) |          |
 
 ### mask
diff --git a/site/docs/manual/core/interaction/brushFilter.zh.md b/site/docs/manual/core/interaction/brushFilter.zh.md
@@ -94,6 +94,7 @@ chart.render();
 | 属性    | 描述               | 类型          | 默认值             | 必选 |
 | ------- | ------------------ | ------------- | ------------------ | ---- |
 | reverse | brush 是否反转     | boolean       | false              |      |
+| history | brush 框选记录     | boolean       | false              |      |
 | mask    | 框选区域的蒙版样式 | [mask](#mask) | 详见 [mask](#mask) |      |
 
 ### mask
diff --git a/src/interaction/brushFilter.ts b/src/interaction/brushFilter.ts
@@ -81,7 +81,12 @@ export function brushFilter(
   };
 }
 
-export function BrushFilter({ hideX = true, hideY = true, ...rest }) {
+export function BrushFilter({
+  hideX = true,
+  hideY = true,
+  history = false,
+  ...rest
+}) {
   return (target, viewInstances, emitter) => {
     const { container, view, options: viewOptions, update, setState } = target;
     const plotArea = selectPlotArea(container);
@@ -96,8 +101,36 @@ export function BrushFilter({ hideX = true, hideY = true, ...rest }) {
     let filtered = false;
     let filtering = false;
     let newView = view;
-
+    const brushHistory = [];
     const { scale, coordinate } = view;
+    const updateScale = (options, domainX, domainY) => {
+      const { marks } = options;
+      const newMarks = marks.map((mark) =>
+        deepMix(
+          {
+            // Hide label to keep smooth transition.
+            axis: {
+              ...(hideX && { x: { transform: [{ type: 'hide' }] } }),
+              ...(hideY && { y: { transform: [{ type: 'hide' }] } }),
+            },
+          },
+          mark,
+          {
+            // Set nice to false to avoid modify domain.
+            scale: {
+              x: { domain: domainX, nice: false },
+              y: { domain: domainY, nice: false },
+            },
+          },
+        ),
+      );
+
+      return {
+        ...viewOptions,
+        marks: newMarks,
+        clip: true, // Clip shapes out of plot area.
+      };
+    };
     return brushFilter(plotArea, {
       brushRegion: (x, y, x1, y1) => [x, y, x1, y1],
       selection: (x, y, x1, y1) => {
@@ -112,62 +145,75 @@ export function BrushFilter({ hideX = true, hideY = true, ...rest }) {
         // Update the domain of x and y scale to filter data.
         const [domainX, domainY] = selection;
 
-        setState('brushFilter', (options) => {
-          const { marks } = options;
-          const newMarks = marks.map((mark) =>
-            deepMix(
-              {
-                // Hide label to keep smooth transition.
-                axis: {
-                  ...(hideX && { x: { transform: [{ type: 'hide' }] } }),
-                  ...(hideY && { y: { transform: [{ type: 'hide' }] } }),
-                },
-              },
-              mark,
-              {
-                // Set nice to false to avoid modify domain.
-                scale: {
-                  x: { domain: domainX, nice: false },
-                  y: { domain: domainY, nice: false },
-                },
-              },
-            ),
-          );
-
-          return {
-            ...viewOptions,
-            marks: newMarks,
-            clip: true, // Clip shapes out of plot area.
-          };
-        });
-
+        setState('brushFilter', (options) =>
+          updateScale(options, domainX, domainY),
+        );
+        if (history) {
+          brushHistory.push({
+            domain: selection,
+            view: newView,
+          });
+        }
         // Emit event.
         emitter.emit('brush:filter', {
           ...event,
-          data: { selection: [domainX, domainY] },
+          data: {
+            ...(history ? { history: brushHistory } : {}),
+            selection: [domainX, domainY],
+          },
         });
-
         const newState = await update();
         newView = newState.view;
         filtering = false;
         filtered = true;
       },
-      reset: (event) => {
+      reset: async (event) => {
         if (filtering || !filtered) return;
+        event.nativeEvent = true;
 
-        // Emit event.
-        const { scale } = view;
-        const { x: scaleX, y: scaleY } = scale;
-        const domainX = scaleX.getOptions().domain;
-        const domainY = scaleY.getOptions().domain;
-        emitter.emit('brush:filter', {
-          ...event,
-          data: { selection: [domainX, domainY] },
-        });
-        filtered = false;
-        newView = view;
-        setState('brushFilter');
-        update();
+        // Restore previous brush state
+        if (brushHistory.length > 1) {
+          brushHistory.pop();
+
+          // Get the last brush state
+          const { domain, view: lastView } =
+            brushHistory[brushHistory.length - 1];
+
+          const [domainX, domainY] = domain;
+          newView = lastView;
+
+          // update scale
+          setState('brushFilter', (options) =>
+            updateScale(options, domainX, domainY),
+          );
+
+          emitter.emit('brush:filter', {
+            ...event,
+            data: {
+              ...(history ? { history: brushHistory } : {}),
+              selection: [domainX, domainY],
+            },
+          });
+
+          await update();
+        } else {
+          // Reset to initial state
+          brushHistory.length = 0;
+          emitter.emit('brush:filter', {
+            ...event,
+            data: {
+              ...(history ? { history: brushHistory } : {}),
+              selection: [
+                scale.x.getOptions().domain,
+                scale.y.getOptions().domain,
+              ],
+            },
+          });
+          setState('brushFilter');
+          newView = view;
+          filtered = false;
+          await update();
+        }
       },
       extent: undefined,
       emitter,
diff --git a/src/spec/interaction.ts b/src/spec/interaction.ts
@@ -87,6 +87,7 @@ export type BrushAxisHighlightInteraction = {
 export type BrushFilterInteraction = {
   type?: 'brushFilter';
   reverse?: boolean;
+  history?: boolean;
 } & Record<`${'mask'}${any}`, any>;
 
 export type BrushXFilterInteraction = {
