feat: interactive params add event. feat #4421

skie1997 · xuefei1313 · commit b5921c978078 · 2026-01-21T20:24:05.000+08:00
diff --git a/common/changes/@visactor/vchart/pre-release-2.0.13-alpha.9_2026-01-19-07-28.json b/common/changes/@visactor/vchart/pre-release-2.0.13-alpha.9_2026-01-19-07-28.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: interactive params add event. feat #4421",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
diff --git a/packages/vchart/src/interaction/interface/trigger.ts b/packages/vchart/src/interaction/interface/trigger.ts
@@ -13,7 +13,7 @@ export interface ITrigger<TriggerOptions extends IBaseTriggerOptions = any> {
   release: () => void;
 
   init: () => void;
-  start: (g: any) => void;
+  start: (g: any, e?: BaseEventParams) => void;
   reset: (g?: IMarkGraphic) => void;
   getStartState: () => string;
   getResetState: () => string;
diff --git a/packages/vchart/src/interaction/triggers/base.ts b/packages/vchart/src/interaction/triggers/base.ts
@@ -3,6 +3,7 @@ import type { IBaseTriggerOptions, ITrigger, ITriggerEventHandler } from '../int
 import type { IMark, IMarkGraphic } from '../../mark/interface/common';
 import { MarkSet } from '../../mark/mark-set';
 import { groupMarksByState } from './util';
+import type { BaseEventParams } from '../../core';
 
 export abstract class BaseTrigger<T extends IBaseTriggerOptions> implements ITrigger<T> {
   options: T;
@@ -111,11 +112,11 @@ export abstract class BaseTrigger<T extends IBaseTriggerOptions> implements ITri
     }
   }
 
-  start(g: IMarkGraphic | string) {
+  start(g: IMarkGraphic | string, e?: BaseEventParams) {
     // do nothing
   }
 
-  reset(g?: IMarkGraphic) {
+  reset(g?: IMarkGraphic, e?: BaseEventParams) {
     // do nothing
   }
 
diff --git a/packages/vchart/src/interaction/triggers/element-highlight.ts b/packages/vchart/src/interaction/triggers/element-highlight.ts
@@ -65,13 +65,13 @@ export class ElementHighlight
     return events;
   }
 
-  resetAll = () => {
+  resetAll = (e?: BaseEventParams) => {
     const { highlightState, blurState, interaction } = this.options;
 
     if (this._lastGraphic) {
       interaction.clearAllStatesOfTrigger(this, highlightState, blurState);
 
-      this.dispatchEvent('reset', { graphics: [this._lastGraphic], options: this.options });
+      this.dispatchEvent('reset', { graphics: [this._lastGraphic], options: this.options, ...e });
 
       this._lastGraphic = null;
 
@@ -80,7 +80,7 @@ export class ElementHighlight
   };
 
   handleStart = (e: BaseEventParams) => {
-    this.start(e.item);
+    this.start(e.item, e);
   };
 
   handleReset = (e: BaseEventParams) => {
@@ -94,13 +94,13 @@ export class ElementHighlight
     const hasActiveElement = markGraphic && this._markSet.getMarkInId(markGraphic.context.markId);
 
     if (this._resetType.includes('view') && !hasActiveElement) {
-      this.resetAll();
+      this.resetAll(e);
     } else if (this._resetType.includes('self') && hasActiveElement) {
-      this.resetAll();
+      this.resetAll(e);
     }
   };
 
-  start(markGraphic: IMarkGraphic) {
+  start(markGraphic: IMarkGraphic, e?: BaseEventParams) {
     if (markGraphic && this._markSet.getMarkInId(markGraphic.context.markId)) {
       const { highlightState, blurState, interaction } = this.options;
 
@@ -119,19 +119,19 @@ export class ElementHighlight
 
       this._lastGraphic = markGraphic;
 
-      this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options });
+      this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options, ...e });
     } else if (this._lastGraphic && this._resetType === 'view') {
-      this.resetAll();
+      this.resetAll(e);
     }
   }
 
-  reset(markGraphic: IMarkGraphic) {
+  reset(markGraphic: IMarkGraphic, e?: BaseEventParams) {
     if (markGraphic) {
       if (this._markSet.getMarkInId(markGraphic.context.markId)) {
         markGraphic.removeState([this.options.highlightState, this.options.blurState]);
       }
     } else {
-      this.resetAll();
+      this.resetAll(e);
     }
   }
 }
diff --git a/packages/vchart/src/interaction/triggers/element-select.ts b/packages/vchart/src/interaction/triggers/element-select.ts
@@ -61,21 +61,21 @@ export class ElementSelect extends BaseTrigger<IElementSelectOptions> implements
     return events;
   }
 
-  resetAll = () => {
+  resetAll = (e?: BaseEventParams) => {
     const { state, reverseState, interaction } = this.options;
 
     const statedGraphics = interaction.getStatedGraphics(this);
 
     if (statedGraphics && statedGraphics.length) {
       interaction.clearAllStatesOfTrigger(this, state, reverseState);
-      this.dispatchEvent('reset', { graphics: statedGraphics, options: this.options });
+      this.dispatchEvent('reset', { graphics: statedGraphics, options: this.options, ...e });
 
       interaction.setStatedGraphics(this, []);
     }
   };
 
   handleStart = (e: BaseEventParams) => {
-    this.start(e.item);
+    this.start(e.item, e);
   };
 
   handleReset = (e: BaseEventParams) => {
@@ -89,13 +89,13 @@ export class ElementSelect extends BaseTrigger<IElementSelectOptions> implements
     const hasActiveElement = markGraphic && this._markSet.getMarkInId(markGraphic.context.markId);
 
     if (this._resetType.includes('view') && !hasActiveElement) {
-      this.resetAll();
+      this.resetAll(e);
     } else if (this._resetType.includes('self') && hasActiveElement) {
-      this.resetAll();
+      this.resetAll(e);
     }
   };
 
-  start(markGraphic: IMarkGraphic) {
+  start(markGraphic: IMarkGraphic, e?: BaseEventParams) {
     const { state, reverseState, isMultiple, interaction } = this.options;
     const statedGraphics = interaction.getStatedGraphics(this);
 
@@ -110,7 +110,7 @@ export class ElementSelect extends BaseTrigger<IElementSelectOptions> implements
               interaction.updateStates(this, newStatedGraphics, statedGraphics, state, reverseState)
             );
           } else {
-            this.resetAll();
+            this.resetAll(e);
           }
         }
       } else {
@@ -127,26 +127,26 @@ export class ElementSelect extends BaseTrigger<IElementSelectOptions> implements
           reverseState
         );
         interaction.setStatedGraphics(this, newStatedGraphics);
-        this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options });
+        this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options, ...e });
 
         if (this._resetType.includes('timeout')) {
           this._timer = setTimeout(() => {
-            this.resetAll();
+            this.resetAll(e);
           }, this.options.triggerOff as number) as unknown as number;
         }
       }
     } else if (this._resetType.includes('view') && statedGraphics && statedGraphics.length) {
-      this.resetAll();
+      this.resetAll(e);
     }
   }
 
-  reset(markGraphic: IMarkGraphic) {
+  reset(markGraphic: IMarkGraphic, e?: BaseEventParams) {
     if (markGraphic) {
       if (this._markSet.getMarkInId(markGraphic.context.markId)) {
         markGraphic.removeState([this.options.state, this.options.reverseState]);
       }
     } else {
-      this.resetAll();
+      this.resetAll(e);
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import type { IBaseTriggerOptions, ITrigger, ITriggerEventHandler } from '../int`
`3`	`3`	`import type { IMark, IMarkGraphic } from '../../mark/interface/common';`
`4`	`4`	`import { MarkSet } from '../../mark/mark-set';`
`5`	`5`	`import { groupMarksByState } from './util';`
	`6`	`+import type { BaseEventParams } from '../../core';`
`6`	`7`
`7`	`8`	`export abstract class BaseTrigger<T extends IBaseTriggerOptions> implements ITrigger<T> {`
`8`	`9`	`options: T;`
`@@ -111,11 +112,11 @@ export abstract class BaseTrigger<T extends IBaseTriggerOptions> implements ITri`
`111`	`112`	`}`
`112`	`113`	`}`
`113`	`114`
`114`		`- start(g: IMarkGraphic \| string) {`
	`115`	`+ start(g: IMarkGraphic \| string, e?: BaseEventParams) {`
`115`	`116`	`// do nothing`
`116`	`117`	`}`
`117`	`118`
`118`		`- reset(g?: IMarkGraphic) {`
	`119`	`+ reset(g?: IMarkGraphic, e?: BaseEventParams) {`
`119`	`120`	`// do nothing`
`120`	`121`	`}`
`121`	`122`
Original file line number	Diff line number	Diff line change
`@@ -61,21 +61,21 @@ export class ElementSelect extends BaseTrigger<IElementSelectOptions> implements`
`61`	`61`	`return events;`
`62`	`62`	`}`
`63`	`63`
`64`		`- resetAll = () => {`
	`64`	`+ resetAll = (e?: BaseEventParams) => {`
`65`	`65`	`const { state, reverseState, interaction } = this.options;`
`66`	`66`
`67`	`67`	`const statedGraphics = interaction.getStatedGraphics(this);`
`68`	`68`
`69`	`69`	`if (statedGraphics && statedGraphics.length) {`
`70`	`70`	`interaction.clearAllStatesOfTrigger(this, state, reverseState);`
`71`		`- this.dispatchEvent('reset', { graphics: statedGraphics, options: this.options });`
	`71`	`+ this.dispatchEvent('reset', { graphics: statedGraphics, options: this.options, ...e });`
`72`	`72`
`73`	`73`	`interaction.setStatedGraphics(this, []);`
`74`	`74`	`}`
`75`	`75`	`};`
`76`	`76`
`77`	`77`	`handleStart = (e: BaseEventParams) => {`
`78`		`- this.start(e.item);`
	`78`	`+ this.start(e.item, e);`
`79`	`79`	`};`
`80`	`80`
`81`	`81`	`handleReset = (e: BaseEventParams) => {`
`@@ -89,13 +89,13 @@ export class ElementSelect extends BaseTrigger<IElementSelectOptions> implements`
`89`	`89`	`const hasActiveElement = markGraphic && this._markSet.getMarkInId(markGraphic.context.markId);`
`90`	`90`
`91`	`91`	`if (this._resetType.includes('view') && !hasActiveElement) {`
`92`		`- this.resetAll();`
	`92`	`+ this.resetAll(e);`
`93`	`93`	`} else if (this._resetType.includes('self') && hasActiveElement) {`
`94`		`- this.resetAll();`
	`94`	`+ this.resetAll(e);`
`95`	`95`	`}`
`96`	`96`	`};`
`97`	`97`
`98`		`- start(markGraphic: IMarkGraphic) {`
	`98`	`+ start(markGraphic: IMarkGraphic, e?: BaseEventParams) {`
`99`	`99`	`const { state, reverseState, isMultiple, interaction } = this.options;`
`100`	`100`	`const statedGraphics = interaction.getStatedGraphics(this);`
`101`	`101`
`@@ -110,7 +110,7 @@ export class ElementSelect extends BaseTrigger<IElementSelectOptions> implements`
`110`	`110`	`interaction.updateStates(this, newStatedGraphics, statedGraphics, state, reverseState)`
`111`	`111`	`);`
`112`	`112`	`} else {`
`113`		`- this.resetAll();`
	`113`	`+ this.resetAll(e);`
`114`	`114`	`}`
`115`	`115`	`}`
`116`	`116`	`} else {`
`@@ -127,26 +127,26 @@ export class ElementSelect extends BaseTrigger<IElementSelectOptions> implements`
`127`	`127`	`reverseState`
`128`	`128`	`);`
`129`	`129`	`interaction.setStatedGraphics(this, newStatedGraphics);`
`130`		`- this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options });`
	`130`	`+ this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options, ...e });`
`131`	`131`
`132`	`132`	`if (this._resetType.includes('timeout')) {`
`133`	`133`	`this._timer = setTimeout(() => {`
`134`		`- this.resetAll();`
	`134`	`+ this.resetAll(e);`
`135`	`135`	`}, this.options.triggerOff as number) as unknown as number;`
`136`	`136`	`}`
`137`	`137`	`}`
`138`	`138`	`} else if (this._resetType.includes('view') && statedGraphics && statedGraphics.length) {`
`139`		`- this.resetAll();`
	`139`	`+ this.resetAll(e);`
`140`	`140`	`}`
`141`	`141`	`}`
`142`	`142`
`143`		`- reset(markGraphic: IMarkGraphic) {`
	`143`	`+ reset(markGraphic: IMarkGraphic, e?: BaseEventParams) {`
`144`	`144`	`if (markGraphic) {`
`145`	`145`	`if (this._markSet.getMarkInId(markGraphic.context.markId)) {`
`146`	`146`	`markGraphic.removeState([this.options.state, this.options.reverseState]);`
`147`	`147`	`}`
`148`	`148`	`} else {`
`149`		`- this.resetAll();`
	`149`	`+ this.resetAll(e);`
`150`	`150`	`}`
`151`	`151`	`}`
`152`	`152`	`}`