feat(brush): support resize and custom (#5012)

__tests__/plots/interaction/index.ts

@@ -58,3 +58,5 @@ export { populationIntervalDiverging } from './population-interval-diverging';
 export { stateAgesIntervalNormalized } from './stateages-interval-normalized';
 export { aaplLineSliderFilterTranspose } from './appl-line-slider-filter-transpose';
 export { alphabetIntervalFunnelLegendFilter } from './alphabet-interval-funnel-legend-filter';
+export { penguinsPointBrushHandleStyle } from './penguins-point-brush-handle-style';
+export { penguinsPointBrushHandleCustom } from './penguins-point-brush-handle-custom';

__tests__/plots/interaction/penguins-point-brush-handle-custom.ts

@@ -0,0 +1,102 @@
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { brush, brushSteps } from './penguins-point-brush';
+
+function createPathRender(path) {
+  return (group, options, document) => {
+    if (!group.handle) {
+      const path = document.createElement('path');
+      group.handle = path;
+      group.appendChild(group.handle);
+    }
+    const { handle } = group;
+    const { width, height, ...rest } = options;
+    if (width === undefined || height === undefined) return handle;
+    handle.style.d = path(width, height);
+    handle.attr(rest);
+    return handle;
+  };
+}
+
+export function penguinsPointBrushHandleCustom(): G2Spec {
+  return {
+    type: 'point',
+    data: {
+      type: 'fetch',
+      value: 'data/penguins.csv',
+    },
+    encode: {
+      color: 'species',
+      x: 'culmen_length_mm',
+      y: 'culmen_depth_mm',
+    },
+    state: {
+      inactive: { stroke: 'gray', opacity: 0.5 },
+    },
+    interaction: {
+      brushHighlight: {
+        maskHandleSize: 30,
+        maskHandleNRender: createPathRender(
+          (width, height) =>
+            `M0,${height / 2}L${width / 2},${-height / 2}L${width},${
+              height / 2
+            },Z`,
+        ),
+        maskHandleERender: createPathRender(
+          (width, height) =>
+            `M${width / 2},0L${(width * 3) / 2},${height / 2}L${
+              width / 2
+            },${height},Z`,
+        ),
+        maskHandleSRender: createPathRender(
+          (width, height) =>
+            `M0,${height / 2}L${width / 2},${(height / 2) * 3}L${width},${
+              height / 2
+            },Z`,
+        ),
+        maskHandleWRender: createPathRender(
+          (width, height) =>
+            `M${width / 2},0L${-width},${height / 2}L${width / 2},${height},Z`,
+        ),
+        maskHandleNWRender: createPathRender(
+          (width, height) =>
+            `M0,0L${width},${height / 2}L${width / 2},${height},Z`,
+        ),
+        maskHandleNERender: createPathRender(
+          (width, height) =>
+            `M0,${height / 2}L${width},0L${width / 2},${height},Z`,
+        ),
+        maskHandleSERender: createPathRender(
+          (width, height) =>
+            `M${width / 2},0L${width},${height}L0,${height / 2},Z`,
+        ),
+        maskHandleSWRender: createPathRender(
+          (width, height) =>
+            `M${width / 2},0L${width},${height / 2}L0,${height},Z`,
+        ),
+        maskHandleNFill: 'blue',
+        maskHandleEFill: 'red',
+        maskHandleSFill: 'green',
+        maskHandleWFill: 'yellow',
+        maskHandleNWFill: 'black',
+        maskHandleNEFill: 'steelblue',
+        maskHandleSEFill: 'pink',
+        maskHandleSWFill: 'orange',
+      },
+    },
+  };
+}
+
+penguinsPointBrushHandleCustom.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const plot = document.getElementsByClassName(PLOT_CLASS_NAME)[0];
+
+  return [
+    {
+      changeState: () => {
+        brush(plot, 100, 100, 200, 200);
+      },
+    },
+  ];
+};
+
+penguinsPointBrushHandleCustom.steps = brushSteps;

__tests__/plots/interaction/penguins-point-brush-handle-style.ts

@@ -0,0 +1,44 @@
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { brush } from './penguins-point-brush';
+
+export function penguinsPointBrushHandleStyle(): G2Spec {
+  return {
+    type: 'point',
+    data: {
+      type: 'fetch',
+      value: 'data/penguins.csv',
+    },
+    encode: {
+      color: 'species',
+      x: 'culmen_length_mm',
+      y: 'culmen_depth_mm',
+    },
+    state: {
+      inactive: { stroke: 'gray', opacity: 0.5 },
+    },
+    interaction: {
+      brushHighlight: {
+        maskHandleNFill: 'blue',
+        maskHandleEFill: 'red',
+        maskHandleSFill: 'green',
+        maskHandleWFill: 'yellow',
+        maskHandleNWFill: 'black',
+        maskHandleNEFill: 'steelblue',
+        maskHandleSEFill: 'pink',
+        maskHandleSWFill: 'orange',
+      },
+    },
+  };
+}
+
+penguinsPointBrushHandleStyle.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const plot = document.getElementsByClassName(PLOT_CLASS_NAME)[0];
+  return [
+    {
+      changeState: () => {
+        brush(plot, 100, 100, 200, 200);
+      },
+    },
+  ];
+};

__tests__/plots/interaction/penguins-point-brush.ts

@@ -40,21 +40,8 @@ export function brush(plot, x, y, x1, y1) {
 }
 
 export function dragMask(plot, x, y, x1, y1) {
-  const mask = plot.getElementsByClassName('mask')[0];
-  mask.dispatchEvent(
-    new CustomEvent('dragstart', {
-      // @ts-ignore
-      offsetX: x,
-      offsetY: y,
-    }),
-  );
-  mask.dispatchEvent(
-    new CustomEvent('drag', {
-      // @ts-ignore
-      offsetX: x1,
-      offsetY: y1,
-    }),
-  );
+  const mask = plot.getElementById('selection');
+  drag(mask, x, y, x1, y1);
 }
 
 export function dblclick(plot, x = 200, y = 200) {
@@ -76,10 +63,26 @@ export function dblclick(plot, x = 200, y = 200) {
   );
 }
 
-penguinsPointBrush.steps = ({ canvas }) => {
+export function drag(shape, x, y, x1, y1) {
+  shape.dispatchEvent(
+    new CustomEvent('dragstart', {
+      // @ts-ignore
+      offsetX: x,
+      offsetY: y,
+    }),
+  );
+  shape.dispatchEvent(
+    new CustomEvent('drag', {
+      // @ts-ignore
+      offsetX: x1,
+      offsetY: y1,
+    }),
+  );
+}
+
+export function brushSteps({ canvas }) {
   const { document } = canvas;
   const plot = document.getElementsByClassName(PLOT_CLASS_NAME)[0];
-
   return [
     {
       changeState: () => {
@@ -101,5 +104,28 @@ penguinsPointBrush.steps = ({ canvas }) => {
         dragMask(plot, 100, 100, 640, 480);
       },
     },
+    ...resize(plot),
   ];
-};
+}
+
+// Origin mask: [490, 330, 640, 480]
+export function resize(plot) {
+  const handles = [
+    ['handle-n', 500, 330, 500, 200], // [490, 200, 640, 480]
+    ['handle-e', 640, 300, 600, 300], // [490, 200, 600, 480]
+    ['handle-s', 500, 480, 500, 300], // [490, 200, 600, 300]
+    ['handle-w', 490, 200, 400, 200], // [400, 200, 500, 300]
+    ['handle-nw', 400, 200, 300, 300], // [300, 300, 500, 300]
+    ['handle-ne', 500, 300, 600, 200], // [300, 200, 600, 300]
+    ['handle-se', 600, 300, 500, 200], // [300, 200, 500, 200]
+    ['handle-sw', 300, 200, 400, 300], // [400, 200, 500, 300]
+  ] as const;
+  return handles.map(([id, x, y, x1, y1]) => ({
+    changeState: () => {
+      const handle = plot.getElementById(id);
+      drag(handle, x, y, x1, y1);
+    },
+  }));
+}
+
+penguinsPointBrush.steps = brushSteps;