diff --git a/common/changes/@visactor/vchart/feat-brush-api_2026-01-04-12-02.json b/common/changes/@visactor/vchart/feat-brush-api_2026-01-04-12-02.json new file mode 100644 index 0000000000..9b9944b4b5 --- /dev/null +++ b/common/changes/@visactor/vchart/feat-brush-api_2026-01-04-12-02.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "feat: add brush api before change", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/common/changes/@visactor/vchart/feat-brush-api_2026-01-05-09-41.json b/common/changes/@visactor/vchart/feat-brush-api_2026-01-05-09-41.json new file mode 100644 index 0000000000..2f4c372c85 --- /dev/null +++ b/common/changes/@visactor/vchart/feat-brush-api_2026-01-05-09-41.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "git commit -m 'feat: add interactive api", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/common/changes/@visactor/vchart/feat-brush-api_2026-01-07-03-54.json b/common/changes/@visactor/vchart/feat-brush-api_2026-01-07-03-54.json new file mode 100644 index 0000000000..fbef58a0fd --- /dev/null +++ b/common/changes/@visactor/vchart/feat-brush-api_2026-01-07-03-54.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "feat: add brush clear api and disable dimension hover config. close#4400", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 4b9489aa70..f5651013d3 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -37,11 +37,11 @@ importers: specifier: 1.2.4-alpha.5 version: 1.2.4-alpha.5 '@visactor/vrender': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-kits': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vtable': specifier: 1.19.0-alpha.0 version: 1.19.0-alpha.0 @@ -203,11 +203,11 @@ importers: specifier: workspace:2.0.12 version: link:../vchart '@visactor/vrender-core': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-kits': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vutils': specifier: ~1.0.12 version: 1.0.21 @@ -294,11 +294,11 @@ importers: specifier: workspace:2.0.12 version: link:../vchart-extension '@visactor/vrender-core': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-kits': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vutils': specifier: ~1.0.12 version: 1.0.21 @@ -529,17 +529,17 @@ importers: specifier: ~1.0.12 version: 1.0.21 '@visactor/vrender-animate': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-components': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-core': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-kits': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vscale': specifier: ~1.0.12 version: 1.0.21 @@ -692,17 +692,17 @@ importers: specifier: ~1.0.12 version: 1.0.21 '@visactor/vrender-animate': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-components': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-core': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-kits': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vutils': specifier: ~1.0.12 version: 1.0.21 @@ -1260,14 +1260,14 @@ importers: specifier: workspace:2.0.12 version: link:../../packages/vchart '@visactor/vrender': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-core': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vrender-kits': - specifier: ~1.0.36 - version: 1.0.36 + specifier: 1.0.37-alpha.1 + version: 1.0.37-alpha.1 '@visactor/vutils': specifier: ~1.0.12 version: 1.0.21 @@ -3073,29 +3073,29 @@ packages: '@visactor/vrender-animate@1.0.0-alpha.18': resolution: {integrity: sha512-9kTtvp1ef+1t+AtUiza6A7qBQP7SmvOu3/ILGrqs/HGdZVj1XGjbYvD/X/zwKJ3LEb7gGV5fa8x95e4czTvRSA==} - '@visactor/vrender-animate@1.0.36': - resolution: {integrity: sha512-AmWLsUG8Srha93ASrCdU4UhZkbq6bhrnen7CimQ5wV6Y8b6deAPopBi0F+FrChzi4bIVL4MdAE4DV8cX/BIYxw==} + '@visactor/vrender-animate@1.0.37-alpha.1': + resolution: {integrity: sha512-jbaegMFAA8nWxWIGSis63kzongcupvJqxj3KHR4Zn9E9ZeK3NDYgccXck97EYz187/8NDft8Fu8k8bQBBioVxQ==} '@visactor/vrender-components@1.0.0-alpha.18': resolution: {integrity: sha512-7Euq+ZfswL74n2pgkaqZSsPxoSa5SPIGyXatN1eUrdzM2Z0kX6U0RcJg01fctvRs4op6WhcecRLqGvnHcBeb9Q==} - '@visactor/vrender-components@1.0.36': - resolution: {integrity: sha512-z4MNfjwGwekKkwjjfci5A5c7+mOOjBKcA6cZtS0wDxiKY8R48fjPpd2QZlpVSOoLSeaYSbMBGCbTRXWpzLBQVg==} + '@visactor/vrender-components@1.0.37-alpha.1': + resolution: {integrity: sha512-g0G+HRsepXwJExFqhGj/8NErwR84s5KI4quAMWPR0mwRVu1q+1l91TdMQgDxtriXVHrrLfmK3RdUmdOuhkMrtQ==} '@visactor/vrender-core@1.0.0-alpha.18': resolution: {integrity: sha512-0ihtNvCyNkOsWPFgRqowHzq0IcQgS2Wl/nPpKbVtxWKveenwlhA+ZKoQvam6VJyBY7jeNe1pROy0mJMDyVAJQw==} - '@visactor/vrender-core@1.0.36': - resolution: {integrity: sha512-u/JprSGz0rNt/Oul/Y9h8/4qcAu9Xki+zX5fww2uePJREwhvQNnAAOubsUP7tG0jlHq5v9HIaJN+COUlKIZTyw==} + '@visactor/vrender-core@1.0.37-alpha.1': + resolution: {integrity: sha512-aSxF/FUuqM2HDj8DdvjdxvNqLBjW1f96ICdISXk9ZL/PoJVVZ8x9HHoESO5PDcMxLnkWGOSHhlSQJs7ON6A4gg==} '@visactor/vrender-kits@1.0.0-alpha.18': resolution: {integrity: sha512-Tvolkq+4G8qiPFZo0Aj8M//Yr6jR2h8FNkFEyWM9gbQbEiTkjpmHAJOYnoSsaPtPrcMSlG4EhJSFDk6ymANHVg==} - '@visactor/vrender-kits@1.0.36': - resolution: {integrity: sha512-+gQayxykuqCDo2ncCH8u1jaVWyXzyTfqu9PFLmXusHeJF0zp4FvvEEsOy540b24mf0kKFimSpmWk6Duqb+0utw==} + '@visactor/vrender-kits@1.0.37-alpha.1': + resolution: {integrity: sha512-auQabc+V3413QeJOEujKGa/pCnuhzK2o4ogg8LEiArcXUKfKBvw9qS12Xo8G60diZMQe81kPle4LZJFD8j9FrA==} - '@visactor/vrender@1.0.36': - resolution: {integrity: sha512-6VgL2vvlVvI1BnW0GKUiVDxPYUUJJLaliqR6hjmwKrZqRvdfib5iXlJf/ohQy6v/36jjZxxV5tTpF8jlu2DQLg==} + '@visactor/vrender@1.0.37-alpha.1': + resolution: {integrity: sha512-5hG4NJZw62ZUKtGb7XHS8cfXzQzOOpkHMj0eY+borlBovzhvYaC2v+Gx4EUjuJgD+H+cBM1xy8I0A2IqVluV7Q==} '@visactor/vscale@0.18.18': resolution: {integrity: sha512-iRG4kv+5Fv4KX3AxEfV95XU3I6OmF0QizyAhqHxKa7L1MaT+MRvDDk5zHWf1E8gialLbL2xDe3GnT6g/4u5jhA==} @@ -15026,9 +15026,9 @@ snapshots: '@visactor/vrender-core': 1.0.0-alpha.18 '@visactor/vutils': 1.0.4 - '@visactor/vrender-animate@1.0.36': + '@visactor/vrender-animate@1.0.37-alpha.1': dependencies: - '@visactor/vrender-core': 1.0.36 + '@visactor/vrender-core': 1.0.37-alpha.1 '@visactor/vutils': 1.0.21 '@visactor/vrender-components@1.0.0-alpha.18': @@ -15039,11 +15039,11 @@ snapshots: '@visactor/vscale': 1.0.4 '@visactor/vutils': 1.0.4 - '@visactor/vrender-components@1.0.36': + '@visactor/vrender-components@1.0.37-alpha.1': dependencies: - '@visactor/vrender-animate': 1.0.36 - '@visactor/vrender-core': 1.0.36 - '@visactor/vrender-kits': 1.0.36 + '@visactor/vrender-animate': 1.0.37-alpha.1 + '@visactor/vrender-core': 1.0.37-alpha.1 + '@visactor/vrender-kits': 1.0.37-alpha.1 '@visactor/vscale': 1.0.21 '@visactor/vutils': 1.0.21 @@ -15052,7 +15052,7 @@ snapshots: '@visactor/vutils': 1.0.4 color-convert: 2.0.1 - '@visactor/vrender-core@1.0.36': + '@visactor/vrender-core@1.0.37-alpha.1': dependencies: '@visactor/vutils': 1.0.21 color-convert: 2.0.1 @@ -15066,21 +15066,21 @@ snapshots: lottie-web: 5.13.0 roughjs: 4.5.2 - '@visactor/vrender-kits@1.0.36': + '@visactor/vrender-kits@1.0.37-alpha.1': dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 1.0.36 + '@visactor/vrender-core': 1.0.37-alpha.1 '@visactor/vutils': 1.0.21 gifuct-js: 2.1.2 lottie-web: 5.13.0 roughjs: 4.6.6 - '@visactor/vrender@1.0.36': + '@visactor/vrender@1.0.37-alpha.1': dependencies: - '@visactor/vrender-animate': 1.0.36 - '@visactor/vrender-components': 1.0.36 - '@visactor/vrender-core': 1.0.36 - '@visactor/vrender-kits': 1.0.36 + '@visactor/vrender-animate': 1.0.37-alpha.1 + '@visactor/vrender-components': 1.0.37-alpha.1 + '@visactor/vrender-core': 1.0.37-alpha.1 + '@visactor/vrender-kits': 1.0.37-alpha.1 '@visactor/vscale@0.18.18': dependencies: diff --git a/docs/package.json b/docs/package.json index b0e21ae06d..1c4ba9dee3 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,8 +19,8 @@ "@visactor/vchart-theme": "~1.6.6", "@visactor/vmind": "1.2.4-alpha.5", "@visactor/vutils": "~1.0.12", - "@visactor/vrender": "~1.0.36", - "@visactor/vrender-kits": "~1.0.36", + "@visactor/vrender": "1.0.37-alpha.1", + "@visactor/vrender-kits": "1.0.37-alpha.1", "@visactor/vtable": "1.19.0-alpha.0", "@visactor/vtable-editors": "1.19.0-alpha.0", "@visactor/vtable-gantt": "1.19.0-alpha.0", @@ -58,4 +58,4 @@ "react-device-detect": "^2.2.2", "minimist": "1.2.8" } -} +} \ No newline at end of file diff --git a/packages/openinula-vchart/package.json b/packages/openinula-vchart/package.json index 1aaba560e6..f9c7edffb9 100644 --- a/packages/openinula-vchart/package.json +++ b/packages/openinula-vchart/package.json @@ -30,8 +30,8 @@ "dependencies": { "@visactor/vchart": "workspace:2.0.12", "@visactor/vutils": "~1.0.12", - "@visactor/vrender-core": "~1.0.36", - "@visactor/vrender-kits": "~1.0.36", + "@visactor/vrender-core": "1.0.37-alpha.1", + "@visactor/vrender-kits": "1.0.37-alpha.1", "react-is": "^18.2.0" }, "devDependencies": { @@ -78,4 +78,4 @@ "access": "public", "registry": "https://registry.npmjs.org/" } -} +} \ No newline at end of file diff --git a/packages/react-vchart/package.json b/packages/react-vchart/package.json index 27bd4ee10d..680ad1827a 100644 --- a/packages/react-vchart/package.json +++ b/packages/react-vchart/package.json @@ -31,8 +31,8 @@ "@visactor/vchart": "workspace:2.0.12", "@visactor/vchart-extension": "workspace:2.0.12", "@visactor/vutils": "~1.0.12", - "@visactor/vrender-core": "~1.0.36", - "@visactor/vrender-kits": "~1.0.36", + "@visactor/vrender-core": "1.0.37-alpha.1", + "@visactor/vrender-kits": "1.0.37-alpha.1", "react-is": "^18.2.0" }, "devDependencies": { @@ -83,4 +83,4 @@ "access": "public", "registry": "https://registry.npmjs.org/" } -} +} \ No newline at end of file diff --git a/packages/vchart-extension/package.json b/packages/vchart-extension/package.json index f3270e0060..21f28cf9e9 100644 --- a/packages/vchart-extension/package.json +++ b/packages/vchart-extension/package.json @@ -21,10 +21,10 @@ "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser" }, "dependencies": { - "@visactor/vrender-core": "~1.0.36", - "@visactor/vrender-kits": "~1.0.36", - "@visactor/vrender-components": "~1.0.36", - "@visactor/vrender-animate": "~1.0.36", + "@visactor/vrender-core": "1.0.37-alpha.1", + "@visactor/vrender-kits": "1.0.37-alpha.1", + "@visactor/vrender-components": "1.0.37-alpha.1", + "@visactor/vrender-animate": "1.0.37-alpha.1", "@visactor/vchart": "workspace:2.0.12", "@visactor/vutils": "~1.0.12", "@visactor/vdataset": "~1.0.12", @@ -66,4 +66,4 @@ "directory": "packages/vchart-extension" }, "license": "MIT" -} +} \ No newline at end of file diff --git a/packages/vchart/package.json b/packages/vchart/package.json index 69148cd961..be9e4a3606 100644 --- a/packages/vchart/package.json +++ b/packages/vchart/package.json @@ -122,14 +122,14 @@ "@visactor/vdataset": "~1.0.12", "@visactor/vscale": "~1.0.12", "@visactor/vlayouts": "~1.0.12", - "@visactor/vrender-core": "~1.0.36", - "@visactor/vrender-kits": "~1.0.36", - "@visactor/vrender-components": "~1.0.36", - "@visactor/vrender-animate": "~1.0.36", + "@visactor/vrender-core": "1.0.37-alpha.1", + "@visactor/vrender-kits": "1.0.37-alpha.1", + "@visactor/vrender-components": "1.0.37-alpha.1", + "@visactor/vrender-animate": "1.0.37-alpha.1", "@visactor/vutils-extension": "workspace:2.0.12" }, "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org/" } -} +} \ No newline at end of file diff --git a/packages/vchart/src/compile/compiler.ts b/packages/vchart/src/compile/compiler.ts index ae7747b19a..6ae4edc2b2 100644 --- a/packages/vchart/src/compile/compiler.ts +++ b/packages/vchart/src/compile/compiler.ts @@ -71,6 +71,9 @@ export class Compiler implements ICompiler { protected _container: IRenderContainer; protected _option: IRenderOption; + getOption() { + return this._option; + } // 已释放标记 private _released: boolean = false; @@ -498,8 +501,8 @@ export class Compiler implements ICompiler { const animationState = markAnimationStates.every(state => state === AnimationStateEnum.appear) ? AnimationStateEnum.appear : markAnimationStates.every(state => state === AnimationStateEnum.disappear) - ? AnimationStateEnum.disappear - : AnimationStateEnum.none; + ? AnimationStateEnum.disappear + : AnimationStateEnum.none; if (!this._stage.context) { this._stage.context = {}; } diff --git a/packages/vchart/src/compile/interface/compilable-item.ts b/packages/vchart/src/compile/interface/compilable-item.ts index 3d57ee2684..acc94d112e 100644 --- a/packages/vchart/src/compile/interface/compilable-item.ts +++ b/packages/vchart/src/compile/interface/compilable-item.ts @@ -6,7 +6,7 @@ import type { IMorphConfig } from '../../animation/spec'; import type { IBoundsLike } from '@visactor/vutils'; import type { EventSourceType, EventType } from '../../event/interface'; import type { IMark, IMarkGraphic } from '../../mark/interface'; -import type { LayoutState } from '../interface/compiler'; +import type { IRenderOption, LayoutState } from '../interface/compiler'; import type { MarkAnimationSpec } from '../../animation/interface'; export type CompilerListenerParameters = { @@ -34,6 +34,7 @@ export interface IGrammarItemMap { export type ICompilerModel = Record>; export interface ICompiler { + getOption: () => IRenderOption; isInited?: boolean; readonly stateAnimationConfig?: MarkAnimationSpec; getCanvas: () => HTMLCanvasElement | undefined; diff --git a/packages/vchart/src/component/brush/brush.ts b/packages/vchart/src/component/brush/brush.ts index 5ee7fa599b..22b43a4ccb 100644 --- a/packages/vchart/src/component/brush/brush.ts +++ b/packages/vchart/src/component/brush/brush.ts @@ -8,7 +8,7 @@ import { Brush as BrushComponent, IOperateType as BrushEvent } from '@visactor/v import type { IBounds, IPointLike, Maybe } from '@visactor/vutils'; // eslint-disable-next-line no-duplicate-imports import { array, polygonIntersectPolygon, isValid, last } from '@visactor/vutils'; -import type { IModelRenderOption, IModelSpecInfo } from '../../model/interface'; +import type { IModelSpecInfo } from '../../model/interface'; import type { IRegion } from '../../region/interface'; import type { IGraphic, IGroup, INode, IPolygon } from '@visactor/vrender-core'; import { transformToGraphic } from '../../util/style'; @@ -24,6 +24,7 @@ import { getSpecInfo } from '../util'; import { brush } from '../../theme/builtin/common/component/brush'; import { isReverse, statePointToData } from '../data-zoom/util'; import type { CartesianAxis } from '../axis/cartesian'; +import type { IRenderOption } from '../../compile/interface'; const IN_BRUSH_STATE = 'inBrush'; const OUT_BRUSH_STATE = 'outOfBrush'; @@ -47,6 +48,8 @@ export class Brush extends BaseComponent i protected _relativeRegions!: IRegion[]; protected _linkedSeries: ISeries[] = []; + protected _operateMask: IPolygon; + private _itemMap: { [regionId: string | number]: IMark[] } = {}; private _linkedItemMap: { [seriesId: string | number]: IMark[] } = {}; @@ -249,6 +252,10 @@ export class Brush extends BaseComponent i brushComponent.children[0].removeAllChild(); } + protected _shouldEnableInteractive() { + return (this.getOption().getCompiler().getOption() as IRenderOption).interactive !== false; + } + protected _createBrushComponent(region: IRegion, componentIndex: number) { const interactiveAttr = this._getBrushInteractiveAttr(region); const brush = new BrushComponent({ @@ -265,38 +272,50 @@ export class Brush extends BaseComponent i brush.addEventListener(BrushEvent.brushActive, (e: any) => { this._initMarkBrushState(componentIndex, OUT_BRUSH_STATE); - this._emitEvent(ChartEvent.brushActive, region); + this._emitEvent(ChartEvent.brushActive, region, e); }); brush.addEventListener(BrushEvent.drawStart, (e: any) => { + if (this._spec.disableDimensionHoverWhenBrushing) { + this._option.globalInstance.disableDimensionHoverEvent(true); + } this._setRegionMarkPickable(region, true); - this._emitEvent(ChartEvent.brushStart, region); + this._emitEvent(ChartEvent.brushStart, region, e); }); brush.addEventListener(BrushEvent.moveStart, (e: any) => { + if (this._spec.disableDimensionHoverWhenBrushing) { + this._option.globalInstance.disableDimensionHoverEvent(true); + } this._setRegionMarkPickable(region, true); - this._emitEvent(ChartEvent.brushStart, region); + this._emitEvent(ChartEvent.brushStart, region, e); }); brush.addEventListener(BrushEvent.drawing, (e: any) => { this._setRegionMarkPickable(region, false); this._handleBrushChange(region, e); - this._emitEvent(ChartEvent.brushChange, region); + this._emitEvent(ChartEvent.brushChange, region, e); }); brush.addEventListener(BrushEvent.moving, (e: any) => { this._setRegionMarkPickable(region, false); this._handleBrushChange(region, e); - this._emitEvent(ChartEvent.brushChange, region); + this._emitEvent(ChartEvent.brushChange, region, e); }); brush.addEventListener(BrushEvent.brushClear, (e: any) => { + if (this._spec.disableDimensionHoverWhenBrushing) { + this._option.globalInstance.disableDimensionHoverEvent(false); + } this._setRegionMarkPickable(region, true); this._initMarkBrushState(componentIndex, ''); - this._emitEvent(ChartEvent.brushClear, region); + this._emitEvent(ChartEvent.brushClear, region, e); }); brush.addEventListener(BrushEvent.drawEnd, (e: any) => { + if (this._spec.disableDimensionHoverWhenBrushing) { + this._option.globalInstance.disableDimensionHoverEvent(false); + } this._setRegionMarkPickable(region, true); const { operateMask } = e.detail as any; const { updateElementsState = true } = this._spec; @@ -305,21 +324,24 @@ export class Brush extends BaseComponent i if (this._spec.onBrushEnd(e) === true) { this.clearGraphic(); this._initMarkBrushState(componentIndex, ''); - this._emitEvent(ChartEvent.brushClear, region); + this._emitEvent(ChartEvent.brushClear, region, e); } else { this._spec.onBrushEnd(e); - this._emitEvent(ChartEvent.brushEnd, region); + this._emitEvent(ChartEvent.brushEnd, region, e); } } else { const inBrushData = this._extendDataInBrush(this._inBrushElementsMap); if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || !updateElementsState) { this._setAxisAndDataZoom(operateMask, region); } - this._emitEvent(ChartEvent.brushEnd, region); + this._emitEvent(ChartEvent.brushEnd, region, e); } }); brush.addEventListener(BrushEvent.moveEnd, (e: any) => { + if (this._spec.disableDimensionHoverWhenBrushing) { + this._option.globalInstance.disableDimensionHoverEvent(false); + } this._setRegionMarkPickable(region, true); const { operateMask } = e.detail as any; const { updateElementsState = true } = this._spec; @@ -327,7 +349,7 @@ export class Brush extends BaseComponent i if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || updateElementsState) { this._setAxisAndDataZoom(operateMask, region); } - this._emitEvent(ChartEvent.brushEnd, region); + this._emitEvent(ChartEvent.brushEnd, region, e); }); } @@ -346,7 +368,8 @@ export class Brush extends BaseComponent i maxX: seriesRegionEndX }, xRange: [seriesRegionStartX, seriesRegionEndX], - yRange: [seriesRegionStartY, seriesRegionEndY] + yRange: [seriesRegionStartY, seriesRegionEndY], + interactive: this._shouldEnableInteractive() } as BrushInteractiveRangeAttr; } @@ -374,6 +397,7 @@ export class Brush extends BaseComponent i /*** start: event dispatch ***/ private _handleBrushChange(region: IRegion, e: any) { const { operateMask } = e.detail as any; + this._operateMask = operateMask; const { updateElementsState = true } = this._spec; if (updateElementsState) { this._reconfigItem(operateMask, region); @@ -403,7 +427,7 @@ export class Brush extends BaseComponent i return data; } - private _emitEvent(eventType: string, region: IRegion) { + private _emitEvent(eventType: string, region: IRegion, e: any) { this.event.emit(eventType, { model: this, value: { @@ -430,7 +454,8 @@ export class Brush extends BaseComponent i // 缩放记录 zoomRecord: this._zoomRecord }, - vchart: this._option?.globalInstance + vchart: this._option?.globalInstance, + event: e }); } /*** end: event dispatch ***/ @@ -767,6 +792,12 @@ export class Brush extends BaseComponent i this._brushComponents = null; } } + clearBrushStateAndMask() { + this._relativeRegions.forEach((region: IRegion, componentIndex: number) => { + this._initMarkBrushState(componentIndex, ''); + this._brushComponents[componentIndex].children[0].removeAllChild(); + }); + } } export const registerBrush = () => { diff --git a/packages/vchart/src/component/brush/interface.ts b/packages/vchart/src/component/brush/interface.ts index dec799be6d..5e3b1475d3 100644 --- a/packages/vchart/src/component/brush/interface.ts +++ b/packages/vchart/src/component/brush/interface.ts @@ -1,4 +1,4 @@ -import type { SymbolType } from '@visactor/vrender-core'; +import type { FederatedPointerEvent, SymbolType } from '@visactor/vrender-core'; import type { IPolygonMarkSpec } from '../../typings'; import type { IComponent } from '../interface'; import type { IDelayType } from '../../typings/event'; @@ -65,6 +65,16 @@ interface IBrushDataBindSpec { * 2) 散点图按照散点中心定位, 如果严格按照中心范围更新，会出现散点超出画布的现象 */ axisRangeExpand?: number; + /** + * 框选前触发事件 + * 返回false, 则阻止后续逻辑 + */ + beforeBrushChange?: (e: FederatedPointerEvent) => void | boolean; + /** + * 是否在框选时禁用维度 hover 事件 + * @default false + */ + disableDimensionHoverWhenBrushing?: boolean; } export interface IBrushTheme { diff --git a/packages/vchart/src/component/crosshair/interface/spec.ts b/packages/vchart/src/component/crosshair/interface/spec.ts index 0e64821eb8..49ccc0291a 100644 --- a/packages/vchart/src/component/crosshair/interface/spec.ts +++ b/packages/vchart/src/component/crosshair/interface/spec.ts @@ -5,6 +5,7 @@ import type { IComponentSpec } from '../../base/interface'; import type { IComponent } from '../../interface'; export interface ICrossHair extends IComponent { + enable: boolean; clearAxisValue: () => void; setAxisValue: (v: StringOrNumber, axis: IAxis) => void; layoutByValue: (enableRemain?: boolean) => void; diff --git a/packages/vchart/src/component/tooltip/interface/common.ts b/packages/vchart/src/component/tooltip/interface/common.ts index c7509fdd87..6b4fb96fdf 100644 --- a/packages/vchart/src/component/tooltip/interface/common.ts +++ b/packages/vchart/src/component/tooltip/interface/common.ts @@ -49,4 +49,5 @@ export interface ITooltip extends IComponent { tooltipHandler?: ITooltipHandler; getVisible: () => boolean; showTooltip: (datum: Datum, options: IShowTooltipOption) => void; + enable?: boolean; } diff --git a/packages/vchart/src/component/tooltip/processor/base.ts b/packages/vchart/src/component/tooltip/processor/base.ts index f473dac2c0..4636aa90bb 100644 --- a/packages/vchart/src/component/tooltip/processor/base.ts +++ b/packages/vchart/src/component/tooltip/processor/base.ts @@ -151,6 +151,9 @@ export abstract class BaseTooltipProcessor { /** 判断是否应该触发 tooltip */ shouldHandleTooltip(params: BaseEventParams, info: TooltipInfo): boolean { + if (!this.component.enable) { + return false; + } if (isNil(info)) { return false; } diff --git a/packages/vchart/src/component/tooltip/tooltip.ts b/packages/vchart/src/component/tooltip/tooltip.ts index c781069792..30fe4ecca1 100644 --- a/packages/vchart/src/component/tooltip/tooltip.ts +++ b/packages/vchart/src/component/tooltip/tooltip.ts @@ -68,9 +68,10 @@ export class Tooltip extends BaseComponent implements ITooltip { * 是否正在浏览tooltip内容 */ private _isEnterTooltip: boolean; - protected declare _spec: ITooltipSpec; + declare protected _spec: ITooltipSpec; tooltipHandler?: ITooltipHandler; + enable?: boolean = true; processor: ITooltipActiveTypeAsKeys< ITooltipProcessor, diff --git a/packages/vchart/src/core/interface.ts b/packages/vchart/src/core/interface.ts index 1e8b35a9d1..018b8480f9 100644 --- a/packages/vchart/src/core/interface.ts +++ b/packages/vchart/src/core/interface.ts @@ -15,7 +15,7 @@ import type { } from '../typings'; import type { IMorphConfig } from '../animation/spec'; import type { IBoundsLike } from '@visactor/vutils'; -import type { EventCallback, EventQuery, EventType, ExtendEventParam } from '../event/interface'; +import type { EventCallback, EventParamsDefinition, EventQuery, EventType, ExtendEventParam } from '../event/interface'; import type { IMark, IMarkDataTransform } from '../mark/interface'; import type { ISeries } from '../series/interface/series'; import type { ITheme } from '../theme/interface'; @@ -451,6 +451,22 @@ export interface IVChart { */ setDimensionIndex: (value: StringOrNumber, options?: DimensionIndexOption) => void; + /** + * 如果传入参数, 则禁用/开启 dimension 交互事件 + * 如果不传入参数, 获取当前是否禁用 dimension 交互事件 + */ + disableDimensionHoverEvent: (disabled?: boolean) => void; + + /** + * 禁用/开启 crosshair + */ + disableCrossHair: (disabled: boolean) => void; + + /** + * 禁用/开启 tooltip + */ + disableTooltip: (disabled: boolean) => void; + // 数据转换相关的 api /** * Convert the data to coordinate position @@ -592,7 +608,10 @@ export interface VRenderComponentOptions { } export interface IStageEventPlugin { - new (taget: IEventTarget, cfg?: T): { + new ( + taget: IEventTarget, + cfg?: T + ): { release: () => void; }; } @@ -603,3 +622,9 @@ export interface GrammarTransformOption { transform: IMarkDataTransform; runType?: 'beforeJoin' | 'afterEncode'; } + +export interface UserEvent { + eType: EventType; + query: EventQuery | EventCallback; + handler?: EventCallback; +} diff --git a/packages/vchart/src/core/vchart.ts b/packages/vchart/src/core/vchart.ts index 13d475aba7..b3081dd4af 100644 --- a/packages/vchart/src/core/vchart.ts +++ b/packages/vchart/src/core/vchart.ts @@ -19,7 +19,6 @@ import type { IComponentConstructor } from '../component/interface'; import { ComponentTypeEnum } from '../component/interface/type'; import type { EventCallback, - EventParamsDefinition, EventQuery, EventType, ExtendEventParam, @@ -52,7 +51,7 @@ import { registerDataSetInstanceParser, registerDataSetInstanceTransform } from import { dataToDataView } from '../data/initialize'; import { copyDataView } from '../data/transforms/copy-data-view'; import type { ITooltipHandler } from '../typings/tooltip'; -import type { Tooltip } from '../component/tooltip'; +import type { ITooltip, Tooltip } from '../component/tooltip'; import type { Datum, IPoint, @@ -93,6 +92,7 @@ import type { IGlobalConfig, IVChart, IVChartRenderOption, + UserEvent, VChartRenderActionSource } from './interface'; import { InstanceManager } from './instance-manager'; @@ -118,6 +118,7 @@ import { registerElementSelect } from '../interaction/triggers/element-select'; import type { IVChartPluginService } from '../plugin/vchart/interface'; import { VChartPluginService } from '../plugin/vchart/plugin-service'; import { RenderStateEnum } from '../constant/animate'; +import type { ICrossHair } from '../component/crosshair'; export class VChart implements IVChart { readonly id = createID(); @@ -324,11 +325,7 @@ export class VChart implements IVChart { get event() { return this._event; } - private _userEvents: { - eType: EventType; - query: EventQuery | EventCallback; - handler?: EventCallback; - }[] = []; + private _userEvents: UserEvent[] = []; private _eventDispatcher: Maybe; private _dataSet!: Maybe; getDataSet() { @@ -369,6 +366,8 @@ export class VChart implements IVChart { private _renderState: RenderStateEnum = RenderStateEnum.render; + protected _disableDimensionHoverEvent: boolean = false; + constructor(spec: ISpec, options: IInitOption) { removeUndefined(options); this._option = { @@ -454,7 +453,7 @@ export class VChart implements IVChart { // 设置全局字体 this._setFontFamilyTheme(this.getTheme('fontFamily') as string); this._initDataSet(this._option.dataSet); - this._autoSize = isTrueBrowseEnv ? spec.autoFit ?? this._option.autoFit ?? true : false; + this._autoSize = isTrueBrowseEnv ? (spec.autoFit ?? this._option.autoFit ?? true) : false; this._bindResizeEvent(); this._bindViewEvent(); this._initChartPlugin(); @@ -1521,7 +1520,7 @@ export class VChart implements IVChart { } const lasAutoSize = this._autoSize; - this._autoSize = isTrueBrowser(this._option.mode) ? this._spec.autoFit ?? this._option.autoFit ?? true : false; + this._autoSize = isTrueBrowser(this._option.mode) ? (this._spec.autoFit ?? this._option.autoFit ?? true) : false; if (this._autoSize !== lasAutoSize) { resize = true; } @@ -1915,6 +1914,23 @@ export class VChart implements IVChart { return this._chart?.setDimensionIndex(value, opt); } + disableDimensionHoverEvent(value?: boolean) { + if (value !== undefined) { + this._disableDimensionHoverEvent = value; + } + return this._disableDimensionHoverEvent; + } + disableCrossHair(value: boolean = true) { + this.getChart() + .getComponentsByKey('crosshair') + .forEach(crosshair => ((crosshair as ICrossHair).enable = !value)); + } + disableTooltip(value: boolean = true) { + this.getChart() + .getComponentsByKey('tooltip') + .forEach(tooltip => ((tooltip as ITooltip).enable = !value)); + } + showCrosshair(cb: (axis: IAxis) => false | string | number) { this._chart?.showCrosshair(cb); } @@ -2259,7 +2275,7 @@ export class VChart implements IVChart { }; } - public runDisappearAnimation() { + runDisappearAnimation() { this._renderState = RenderStateEnum.disappear; this.getStage().eventSystem.pauseTriggerEvent(); this.getStage().applyAnimationState( diff --git a/packages/vchart/src/event/event.ts b/packages/vchart/src/event/event.ts index ca9cff5d49..2a875bc425 100644 --- a/packages/vchart/src/event/event.ts +++ b/packages/vchart/src/event/event.ts @@ -49,7 +49,7 @@ export class Event implements IEvent { if (ComposedEventCtor) { const composedEvent = new ComposedEventCtor(this._eventDispatcher, this._mode) as IComposedEvent; composedEvent.register(eType, handler); - this._composedEventMap.set(callback as EventCallback, { + this._composedEventMap.set(handler.callback as EventCallback, { eventType: eType, event: composedEvent }); diff --git a/packages/vchart/src/event/events/dimension/dimension-hover.ts b/packages/vchart/src/event/events/dimension/dimension-hover.ts index f66926e29d..2e53086039 100644 --- a/packages/vchart/src/event/events/dimension/dimension-hover.ts +++ b/packages/vchart/src/event/events/dimension/dimension-hover.ts @@ -46,7 +46,7 @@ export class DimensionHoverEvent extends DimensionEvent { } private onMouseMove = (params: BaseEventParams) => { - if (!params) { + if (!params || params.chart?.getOption()?.globalInstance?.disableDimensionHoverEvent?.()) { return; } const x = (params.event as any).viewX; @@ -84,7 +84,7 @@ export class DimensionHoverEvent extends DimensionEvent { }; private onMouseOut = (params: BaseEventParams) => { - if (!params) { + if (!params || params.chart?.getOption()?.globalInstance?.disableDimensionHoverEvent?.()) { return; } // 鼠标移出某维度 diff --git a/tools/story-player/package.json b/tools/story-player/package.json index daaaa678be..0c79e71f45 100644 --- a/tools/story-player/package.json +++ b/tools/story-player/package.json @@ -56,10 +56,10 @@ "vite": "3.2.6" }, "dependencies": { - "@visactor/vrender-core": "~1.0.36", - "@visactor/vrender-kits": "~1.0.36", + "@visactor/vrender-core": "1.0.37-alpha.1", + "@visactor/vrender-kits": "1.0.37-alpha.1", "@visactor/vchart": "workspace:2.0.12", - "@visactor/vrender": "~1.0.36", + "@visactor/vrender": "1.0.37-alpha.1", "@visactor/vutils": "~1.0.12" } -} +} \ No newline at end of file