diff --git a/src/index.ts b/src/index.ts index 6e7405150a..6550c30006 100644 --- a/src/index.ts +++ b/src/index.ts @@ -177,17 +177,17 @@ import SiblingTooltip from './interaction/action/component/tooltip/sibling'; import TooltipAction from './interaction/action/component/tooltip/geometry'; import EllipsisTextAction from './interaction/action/component/tooltip/ellipsis-text'; -import ElmentActive from './interaction/action/element/active'; +import ElementActive from './interaction/action/element/active'; import ElementLinkByColor from './interaction/action/element/link-by-color'; -import ElmentRangeActive from './interaction/action/element/range-active'; -import ElmentSingleActive from './interaction/action/element/single-active'; +import ElementRangeActive from './interaction/action/element/range-active'; +import ElementSingleActive from './interaction/action/element/single-active'; -import ElmentHighlight from './interaction/action/element/highlight'; -import ElmentHighlightByColor from './interaction/action/element/highlight-by-color'; -import ElmentHighlightByX from './interaction/action/element/highlight-by-x'; +import ElementHighlight from './interaction/action/element/highlight'; +import ElementHighlightByColor from './interaction/action/element/highlight-by-color'; +import ElementHighlightByX from './interaction/action/element/highlight-by-x'; -import ElmentRangeHighlight from './interaction/action/element/range-highlight'; -import ElmentSingleHighlight from './interaction/action/element/single-highlight'; +import ElementRangeHighlight, { ELEMENT_RANGE_HIGHLIGHT_EVENTS } from './interaction/action/element/range-highlight'; +import ElementSingleHighlight from './interaction/action/element/single-highlight'; import ElementRangeSelected from './interaction/action/element/range-selected'; import ElementSelected from './interaction/action/element/selected'; @@ -221,17 +221,17 @@ import ScaleZoom from './interaction/action/view/scale-zoom'; registerAction('tooltip', TooltipAction); registerAction('sibling-tooltip', SiblingTooltip); registerAction('ellipsis-text', EllipsisTextAction); -registerAction('element-active', ElmentActive); -registerAction('element-single-active', ElmentSingleActive); -registerAction('element-range-active', ElmentRangeActive); +registerAction('element-active', ElementActive); +registerAction('element-single-active', ElementSingleActive); +registerAction('element-range-active', ElementRangeActive); -registerAction('element-highlight', ElmentHighlight); -registerAction('element-highlight-by-x', ElmentHighlightByX); -registerAction('element-highlight-by-color', ElmentHighlightByColor); +registerAction('element-highlight', ElementHighlight); +registerAction('element-highlight-by-x', ElementHighlightByX); +registerAction('element-highlight-by-color', ElementHighlightByColor); -registerAction('element-single-highlight', ElmentSingleHighlight); -registerAction('element-range-highlight', ElmentRangeHighlight); -registerAction('element-sibling-highlight', ElmentRangeHighlight, { +registerAction('element-single-highlight', ElementSingleHighlight); +registerAction('element-range-highlight', ElementRangeHighlight); +registerAction('element-sibling-highlight', ElementRangeHighlight, { effectSiblings: true, effectByRecord: true, }); @@ -692,6 +692,6 @@ declare module './chart/view' { // 暴露一些常量 export { VIEW_LIFE_CIRCLE } from './constant'; /** brush 范围筛选的一些事件常量 */ -export { BRUSH_FILTER_EVENTS }; +export { BRUSH_FILTER_EVENTS, ELEMENT_RANGE_HIGHLIGHT_EVENTS }; export * from './core'; diff --git a/src/interaction/action/data/range-filter.ts b/src/interaction/action/data/range-filter.ts index 065e633930..e422e47670 100644 --- a/src/interaction/action/data/range-filter.ts +++ b/src/interaction/action/data/range-filter.ts @@ -1,6 +1,6 @@ import { Point, Scale } from '../../../dependents'; import { FilterCondition, EventPayload } from '../../../interface'; -import { View } from '../../../chart'; +import { View, Event } from '../../../chart'; import Action from '../base'; import { isMask } from '../util'; @@ -36,11 +36,18 @@ function getFilter(scale: Scale, dim: string, point1: Point, point2: Point): Fil } } -export enum BRUSH_FILTER_EVENTS { +/** range-filter 只用于：brush-filter, brush-x-filter, brush-y-filter */ +enum EVENTS { FILTER = 'brush-filter-processing', RESET = 'brush-filter-reset', + BEFORE_FILTER = 'brush-filter:beforefilter', + AFTER_FILTER = 'brush-filter:afterfilter', + BEFORE_RESET = 'brush-filter:beforereset', + AFTER_RESET = 'brush-filter:afterreset', } +export { EVENTS as BRUSH_FILTER_EVENTS }; + /** * 范围过滤的 Action * @ignore @@ -94,7 +101,10 @@ class RangeFilter extends Action { // 距离过小也不生效 return; } - const view = this.context.view; + const { view, event } = this.context; + const payload = { view, event, dims: this.dims }; + view.emit(EVENTS.BEFORE_FILTER, Event.fromData(view, EVENTS.BEFORE_FILTER, payload)); + const coord = view.getCoordinate(); const normalCurrent = coord.invert(currentPoint); const normalStart = coord.invert(startPoint); @@ -110,7 +120,9 @@ class RangeFilter extends Action { const filter = getFilter(yScale, 'y', normalCurrent, normalStart); this.filterView(view, yScale.field, filter); } - this.reRender(view, { source: BRUSH_FILTER_EVENTS.FILTER }); + this.reRender(view, { source: EVENTS.FILTER }); + + view.emit(EVENTS.AFTER_FILTER, Event.fromData(view, EVENTS.AFTER_FILTER, payload)); } /** @@ -125,6 +137,8 @@ class RangeFilter extends Action { */ public reset() { const view = this.context.view; + view.emit(EVENTS.BEFORE_RESET, Event.fromData(view, EVENTS.BEFORE_RESET, {})); + this.isStarted = false; if (this.hasDim('x')) { const xScale = view.getXScale(); @@ -135,7 +149,9 @@ class RangeFilter extends Action { const yScale = view.getYScales()[0]; this.filterView(view, yScale.field, null); // 取消过滤 } - this.reRender(view, { source: BRUSH_FILTER_EVENTS.RESET }); + this.reRender(view, { source: EVENTS.RESET }); + + view.emit(EVENTS.AFTER_RESET, Event.fromData(view, EVENTS.AFTER_RESET, {})); } /** diff --git a/src/interaction/action/element/range-highlight.ts b/src/interaction/action/element/range-highlight.ts index 6c52ad42d7..ba8edb445d 100644 --- a/src/interaction/action/element/range-highlight.ts +++ b/src/interaction/action/element/range-highlight.ts @@ -1,7 +1,17 @@ -import Element from '../../../geometry/element/'; +import Element from '../../../geometry/element'; +import { Event } from '../../../chart'; import { clearHighlight, setHighlightBy } from './highlight-util'; import ElementRangeState from './range-state'; +enum EVENTS { + BEFORE_HIGHLIGHT = 'element-range-highlight:beforehighlight', + AFTER_HIGHLIGHT = 'element-range-highlight:afterhighlight', + BEFORE_CLEAR = 'element-range-highlight:beforeclear', + AFTER_CLEAR = 'element-range-highlight:afterclear', +} + +export { EVENTS as ELEMENT_RANGE_HIGHLIGHT_EVENTS }; + /** * @ignore * 区域 highlight 的 Action @@ -18,7 +28,22 @@ class ElementRangeHighlight extends ElementRangeState { * 设置 highlight */ public highlight() { + const { view, event } = this.context; + const elements = this.getIntersectElements(); + const payload = { view, event, highlightElements: elements }; + view.emit(EVENTS.BEFORE_HIGHLIGHT, Event.fromData(view, EVENTS.BEFORE_HIGHLIGHT, payload)); this.setState(); + view.emit(EVENTS.AFTER_HIGHLIGHT, Event.fromData(view, EVENTS.AFTER_HIGHLIGHT, payload)); + } + + /** + * @overrider 添加事件 + */ + public clear() { + const view = this.context.view; + view.emit(EVENTS.BEFORE_CLEAR, Event.fromData(view, EVENTS.BEFORE_CLEAR, {})); + super.clear(); + view.emit(EVENTS.AFTER_CLEAR, Event.fromData(view, EVENTS.AFTER_CLEAR, {})); } protected setElementsState(elements: Element[], enable: boolean, allElements: Element[]) { diff --git a/src/interaction/action/element/range-state.ts b/src/interaction/action/element/range-state.ts index 42a6d022f6..dcbec09e80 100644 --- a/src/interaction/action/element/range-state.ts +++ b/src/interaction/action/element/range-state.ts @@ -45,7 +45,7 @@ class ElementRangeState extends StateBase { this.isStarted = true; } - private getIntersectElements() { + protected getIntersectElements() { let elements = null; if (isMask(this.context)) { elements = getMaskedElements(this.context, 10);