feat(interaction): review and brush-x, update docs

docs/manual/tutorial/interaction.zh.md

@@ -606,6 +606,7 @@ registerInteraction('brush-visible', {
 - element-range-highlight
 - element-filter
 - element-sibling-filter
+- element-sibling-highlight
 - element-link-by-color
 
 Element 的 Action 可以响应的触发源：
@@ -676,6 +677,11 @@ Element 的 Action 可以响应的触发源：
 - filter() 过滤
 - reset() 取消过滤
 
+### element-sibling-highlight
+图表元素高亮时，对应的其他 view 的图形也同时高亮：
+- highlight() 设置当前触发事件相关元素对应的其他 View 上的元素的 highlight
+- clear() 取消相关元素的 highlight
+
 ### element-link-by-color
 
 用于连接相同颜色的图表元素，一般用于层叠柱状图，有以下方法：

src/index.ts

@@ -433,21 +433,21 @@ registerInteraction('brush-x', {
     {
       trigger: 'mousedown',
       isEnable: isPointInView,
-      action: ['brush-x:start', 'rect-mask:start', 'rect-mask:show'],
+      action: ['brush-x:start', 'x-rect-mask:start', 'x-rect-mask:show'],
     },
   ],
   processing: [
     {
       trigger: 'mousemove',
       isEnable: isPointInView,
-      action: ['rect-mask:resize'],
+      action: ['x-rect-mask:resize'],
     },
   ],
   end: [
     {
       trigger: 'mouseup',
       isEnable: isPointInView,
-      action: ['brush-x:filter', 'brush-x:end', 'rect-mask:end', 'rect-mask:hide'],
+      action: ['brush-x:filter', 'brush-x:end', 'x-rect-mask:end', 'x-rect-mask:hide'],
     },
   ],
   rollback: [{ trigger: 'dblclick', action: ['brush-x:reset'] }],

src/interaction/action/data/range-filter.ts

@@ -86,7 +86,7 @@ class RangeFilter extends Action {
       startPoint = this.startPoint;
       currentPoint = this.context.getCurrentPoint();
     }
-    if (distance(startPoint, currentPoint) < 5) {
+    if (Math.abs(startPoint.x - currentPoint.x) < 5 || Math.abs(startPoint.x - currentPoint.y) < 5) {
       // 距离过小也不生效
       return;
     }

src/interaction/action/mask/base.ts

@@ -1,7 +1,6 @@
 import { each } from '@antv/util';
 import Action from '../base';
-import { IGroup, IShape } from '../../../dependents';
-import { LooseObject } from '@antv/g-svg';
+import { LooseObject } from '../../../interface';
 
 /**
  * @ignore

src/interaction/action/mask/circle.ts

@@ -1,7 +1,6 @@
 import { last } from '@antv/util';
 import { distance } from '../util';
 import MaskBase from './base';
-import { IGroup, IShape } from '../../../dependents';
 
 /**
  * @ignore

src/interaction/action/mask/path.ts

@@ -1,6 +1,5 @@
 import { each } from '@antv/util';
 import MaskBase from './base';
-import { IGroup, IShape} from '../../../dependents';
 
 /**
  * @ignore

src/interaction/action/mask/rect.ts

@@ -1,7 +1,6 @@
 import { head, last } from '@antv/util';
 import { Region } from '../../../interface';
 import MaskBase from './base';
-import { IGroup, IShape} from '../../../dependents';
 
 /**
  * @ignore

src/interaction/action/util.ts

@@ -111,14 +111,13 @@ export function getMaskedElements(context: IInteractionContext, tolerance: numbe
       return;
     }
     return getElementsByPath(context.view, maskPath);
-  } else {
-    const maskBBox = getMaskBBox(context, tolerance);
-    // 如果 bbox 过小则不返回
-    if (!maskBBox) {
-      return null;
-    }
-    return getIntersectElements(context.view, maskBBox);
   }
+  const maskBBox = getMaskBBox(context, tolerance);
+  // 如果 bbox 过小则不返回
+  if (!maskBBox) {
+    return null;
+  }
+  return getIntersectElements(context.view, maskBBox);
 }
 
 /**
@@ -262,8 +261,7 @@ function pathToPoints(path: any[]) {
 export function getElementsByPath(view: View, path: any[]) {
   const elements = getElements(view);
   const points = pathToPoints(path);
-  const rst = [];
-  each(elements, (el) => {
+  const rst = elements.filter((el: Element) => {
     const shape = el.shape;
     let shapePoints;
     if (shape.get('type') === 'path') {
@@ -272,11 +270,8 @@ export function getElementsByPath(view: View, path: any[]) {
       const shapeBBox = shape.getCanvasBBox();
       shapePoints = toPoints(shapeBBox);
     }
-    if (isPolygonsIntersect(points, shapePoints)) {
-      rst.push(el);
-    }
+    return isPolygonsIntersect(points, shapePoints);
   });
-
   return rst;
 }
 

src/util/bbox.ts

@@ -223,7 +223,7 @@ export const getRegionBBox = (bbox: BBox, region: Region): BBox => {
  * 将 bbox 转换成 points
  * @param bbox
  */
-export function toPoints(bbox: BBox): any[] {
+export function toPoints(bbox: Partial<BBox>): any[] {
   return [
     [bbox.minX, bbox.minY],
     [bbox.maxX, bbox.minY],

tests/unit/interaction/action/mask-range-state-spec.ts

@@ -165,7 +165,7 @@ describe('test mask and active', () => {
   });
 });
 
-describe.only('test path mask', () => {
+describe('test path mask', () => {
   const chart = new Chart({
     container: createDiv(),
     width: 400,