Merge pull request #2034 from VisActor/feat/brush-before-change

Feat/brush before change

Author: xuefei1313

common/changes/@visactor/vrender-components/feat-brush-before-change_2026-01-04-11-30.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "feat: add before change api for brush",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-brush-before-change_2026-01-05-09-25.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "feat: add interactive config",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

packages/vrender-components/__tests__/browser/examples/brush.ts

@@ -7,6 +7,7 @@ export function run() {
 
   const guiObject = {
     name: 'Brush',
+    interactive: true,
     brushMode: 'single',
     brushType: 'rect',
     brushMoved: true,
@@ -58,7 +59,8 @@ export function run() {
       stroke: '#B0C8F9',
       strokeWidth: 2
     },
-    delayTime: 0
+    delayTime: 0,
+    interactive: true
   });
 
   const brush2 = new Brush({
@@ -100,6 +102,10 @@ export function run() {
 
   const gui = new GUI();
   gui.add(guiObject, 'name');
+  gui.add(guiObject, 'interactive').onChange(value => {
+    brush.setAttribute('interactive', value);
+  });
+
   gui.add(guiObject, 'brushMode', ['single', 'multiple']).onChange(value => {
     brush.setAttribute('brushMode', value);
   });

packages/vrender-components/src/brush/brush.ts

@@ -72,6 +72,12 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
    * 3. 如果是绘制状态: 标记绘制状态 & 标记正在绘制的mask & 清除之前的mask & 添加新的mask
    */
   private _onBrushStart = (e: FederatedPointerEvent) => {
+    if (this.attribute.interactive === false) {
+      return;
+    }
+    if (this._beforeBrushEvent(e) === false) {
+      return;
+    }
     const {
       updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
       endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
@@ -95,6 +101,13 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
    * 2. 如果是移动状态: 标记移动状态 & 计算位移量 & 给被移动的mask偏移属性
    */
   private _onBrushing = (e: FederatedPointerEvent) => {
+    if (this.attribute.interactive === false) {
+      return;
+    }
+    if (this._beforeBrushEvent(e) === false) {
+      return;
+    }
+
     if (this._outOfInteractiveRange(e)) {
       return;
     }
@@ -119,6 +132,9 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
    * @description 取消绘制 和 移动 状态
    */
   private _onBrushEnd = (e: FederatedPointerEvent) => {
+    if (this.attribute.interactive === false) {
+      return;
+    }
     this._releaseBrushUpdateEvents();
     e.preventDefault();
     this._activeDrawState && this._drawEnd(e);
@@ -129,6 +145,12 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
   };
 
   private _onBrushClear = (e: FederatedPointerEvent) => {
+    if (this.attribute.interactive === false) {
+      return;
+    }
+    if (this._beforeBrushEvent(e) === false) {
+      return;
+    }
     e.preventDefault();
     if (!this._isEmptyMask()) {
       this._clearMask();
@@ -143,6 +165,9 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
    * @description 清除之前的mask & 添加新的mask
    */
   private _initDraw(e: FederatedPointerEvent) {
+    if (this.attribute.interactive === false) {
+      return;
+    }
     const { brushMode } = this.attribute as BrushAttributes;
     const pos = this.eventPosToStagePos(e);
 
@@ -158,6 +183,9 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
    * @description 初始化mask的dx和dy
    */
   private _initMove(e: FederatedPointerEvent) {
+    if (this.attribute.interactive === false) {
+      return;
+    }
     this._cacheMovePoint = this.eventPosToStagePos(e);
 
     this._operatingMaskMoveDx = this._operatingMask.attribute.dx ?? 0;
@@ -185,6 +213,9 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
    * @description 更新_cacheDrawPoints 和 mask的points属性
    */
   private _drawing(e: FederatedPointerEvent) {
+    if (this.attribute.interactive === false) {
+      return;
+    }
     const pos = this.eventPosToStagePos(e);
     const { brushType, sizeThreshold = DEFAULT_SIZE_THRESHOLD } = this.attribute as BrushAttributes;
 
@@ -227,6 +258,9 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
    * @description 标记移动状态 & 计算位移量 & 给被移动的mask偏移属性
    */
   private _moving(e: FederatedPointerEvent) {
+    if (this.attribute.interactive === false) {
+      return;
+    }
     const startPos = this._cacheMovePoint;
     const pos = this.eventPosToStagePos(e);
     // 如果当前点的位置和上一次点的位置一致，则无需更新
@@ -252,6 +286,9 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
   }
 
   private _drawEnd(e: FederatedPointerEvent) {
+    if (this.attribute.interactive === false) {
+      return;
+    }
     const { removeOnClick = true, sizeThreshold = DEFAULT_SIZE_THRESHOLD } = this.attribute as BrushAttributes;
     if (this._outOfInteractiveRange(e)) {
       if (!this._isEmptyMask()) {
@@ -290,6 +327,9 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
   }
 
   private _moveEnd(e: FederatedPointerEvent) {
+    if (this.attribute.interactive === false) {
+      return;
+    }
     if (this._operatingMask) {
       this._operatingMask.setAttribute('pickable', false);
     }
@@ -442,6 +482,14 @@ export class Brush extends AbstractComponent<Required<BrushAttributes>> {
     return false;
   }
 
+  /**
+   * 触发框选前事件
+   * @returns 返回 false 表示中断后续逻辑，返回 true 或 undefined 表示继续执行
+   */
+  private _beforeBrushEvent(e: FederatedPointerEvent): void | boolean {
+    return this.attribute.beforeBrushChange?.(e);
+  }
+
   /**
    * 根据操作类型触发对应的事件
    */

packages/vrender-components/src/brush/type.ts

@@ -1,7 +1,16 @@
-import type { GraphicEventType, IGroupGraphicAttribute, IPolygonGraphicAttribute } from '@visactor/vrender-core';
+import type {
+  FederatedPointerEvent,
+  GraphicEventType,
+  IGroupGraphicAttribute,
+  IPolygonGraphicAttribute
+} from '@visactor/vrender-core';
 import type { IDelayType } from '../interface';
 
 export interface BrushAttributes extends IGroupGraphicAttribute {
+  /**
+   * 是否禁止交互，默认为 true
+   */
+  interactive?: boolean;
   /**
    * 触发框选的事件名称
    */
@@ -82,6 +91,10 @@ export interface BrushAttributes extends IGroupGraphicAttribute {
    * @default false
    */
   disableTriggerEvent?: boolean;
+  /**
+   * 框选前触发事件
+   */
+  beforeBrushChange?: (e: FederatedPointerEvent) => void | boolean;
 }
 
 export type IBrushType = 'x' | 'y' | 'rect' | 'polygon';