@visactor/vchart 1.2.3 → 1.3.0-beta.0

package/esm/component/base/base-component.js

@@ -36,6 +36,8 @@ import { Event_Source_Type } from "../../constant";
 
 import { AnimateManager } from "../../animation/animate-manager";
 
+import { normalizeLayoutPaddingSpec } from "../../util";
+
 export class BaseComponent extends BaseModel {
     getRegions() {
         return this._regions;
@@ -45,14 +47,14 @@ export class BaseComponent extends BaseModel {
     }
     constructor(spec, options) {
         super(spec, options), this.name = "component", this.modelType = "component", this._regions = [], 
-        this._delegateEvent = (component, event, type) => {
+        this._delegateEvent = (component, event, type, item = null, datum = null) => {
             var _a, _b;
             this.event.emit(type, {
                 model: this,
                 node: component,
                 event: event,
-                item: null,
-                datum: null,
+                item: item,
+                datum: datum,
                 source: Event_Source_Type.chart,
                 chart: null === (_b = null === (_a = this._option) || void 0 === _a ? void 0 : _a.globalInstance) || void 0 === _b ? void 0 : _b.getChart()
             }, "model");
@@ -81,14 +83,26 @@ export class BaseComponent extends BaseModel {
     }
     _initTheme(theme) {
         const globalTheme = this._option.getTheme();
-        theme ? super._initTheme(theme) : super._initTheme(getComponentThemeFromGlobalTheme(this.type, globalTheme, this._originalSpec)), 
-        isArray(this._originalSpec) ? this._spec = this._originalSpec.map((spec => merge({}, this._theme, spec))) : this._spec = merge({}, this._theme, this._originalSpec), 
+        theme ? super._initTheme(theme) : super._initTheme(getComponentThemeFromGlobalTheme(this.type, globalTheme, this._originalSpec, this._option.getChart())), 
+        this._shouldMergeThemeToSpec && (isArray(this._originalSpec) ? this._spec = this._originalSpec.map((spec => merge({}, this._theme, spec))) : this._mergeThemeToSpec()), 
         this._preprocessSpec();
+        const {padding: padding, noOuterPadding: noOuterPadding = !0, orient: orient} = this._spec;
+        noOuterPadding && padding && orient && (this._spec.padding = Object.assign(Object.assign({}, normalizeLayoutPaddingSpec(padding)), {
+            [orient]: 0
+        }));
+    }
+    _shouldMergeThemeToSpec() {
+        return !0;
     }
     getContainer() {
         return this._container || (this._container = this._option.globalInstance.getStage().find((node => "root" === node.name), !0)), 
         this._container;
     }
+    updateSpec(spec) {
+        const originalSpec = this._originalSpec, result = super.updateSpec(spec);
+        return originalSpec.regionId === this._spec.regionId && originalSpec.regionIndex === this._spec.regionIndex && originalSpec.seriesId === this._spec.seriesId && originalSpec.seriesIndex === this._spec.seriesIndex || (result.reMake = !0), 
+        result;
+    }
     release() {
         super.release(), this.clear();
     }

package/esm/component/base/base-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/base/base-component.ts"],"names":[],"mappings":"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","file":"base-component.js","sourcesContent":["import type { IGroup, INode } from '@visactor/vrender';\nimport { BaseModel } from '../../model/base-model';\nimport type { IRegion } from '../../region/interface';\nimport type { ComponentTypeEnum, IComponent, IComponentOption } from '../interface';\nimport type { BaseEventParams } from '../../event/interface';\nimport { ComponentPluginService } from '../../plugin/components/plugin-service';\nimport type { IComponentPluginService, IComponentPlugin } from '../../plugin/components/interface';\nimport { isArray, merge } from '@visactor/vutils';\nimport { getComponentThemeFromGlobalTheme } from './util';\nimport type { IGroupMark } from '@visactor/vgrammar';\nimport { Event_Source_Type } from '../../constant';\nimport type { IAnimate } from '../../animation/interface';\nimport { AnimateManager } from '../../animation/animate-manager';\n\nexport abstract class BaseComponent extends BaseModel implements IComponent {\n  name: string = 'component';\n  readonly modelType: string = 'component';\n  pluginService?: IComponentPluginService;\n  protected declare _option: IComponentOption;\n\n  protected _regions: IRegion[] = [];\n  getRegions() {\n    return this._regions;\n  }\n\n  protected _container: IGroup;\n\n  created() {\n    super.created();\n    this.pluginService = new ComponentPluginService(this);\n  }\n\n  animate?: IAnimate;\n\n  constructor(spec: any, options: IComponentOption) {\n    super(spec, options);\n    this._regions = options.getRegionsInIndex();\n    this.layoutBindRegionID = this._regions.map(x => x.id);\n    // 创建组件自己的动画管理器\n    if (this._option.animation) {\n      this.animate = new AnimateManager({\n        getCompiler: options.getCompiler\n      });\n    }\n  }\n\n  abstract changeRegions(regions: IRegion[]): void;\n\n  protected callPlugin(cb: (plugin: IComponentPlugin) => void) {\n    if (this.pluginService) {\n      this.pluginService.getAll().forEach(plugin => cb(plugin));\n    }\n  }\n\n  protected eventPos(markEventParams: BaseEventParams) {\n    return {\n      x: (markEventParams.event as any).viewX - this.getLayoutStartPoint().x,\n      y: (markEventParams.event as any).viewY - this.getLayoutStartPoint().y\n    };\n  }\n\n  async setCurrentTheme(theme: any, noRender?: boolean) {\n    const modifyConfig = () => {\n      // 重新初始化\n      this.reInit(theme);\n\n      return { change: true, reMake: false };\n    };\n\n    if (noRender) {\n      modifyConfig();\n    } else {\n      await this._option.globalInstance.updateCustomConfigAndRerender(modifyConfig);\n    }\n  }\n\n  protected _initTheme(theme?: any) {\n    const globalTheme = this._option.getTheme();\n\n    if (theme) {\n      super._initTheme(theme);\n    } else {\n      super._initTheme(\n        getComponentThemeFromGlobalTheme(this.type as ComponentTypeEnum, globalTheme, this._originalSpec)\n      );\n    }\n\n    // 将 theme merge 到 spec 中\n    if (isArray(this._originalSpec)) {\n      this._spec = this._originalSpec.map(spec => merge({}, this._theme, spec));\n    } else {\n      this._spec = merge({}, this._theme, this._originalSpec);\n    }\n    this._preprocessSpec();\n  }\n\n  protected getContainer() {\n    if (!this._container) {\n      this._container = this._option.globalInstance.getStage().find(node => node.name === 'root', true);\n    }\n\n    return this._container;\n  }\n\n  release() {\n    super.release();\n    this.clear();\n  }\n\n  clear() {\n    this._container = null;\n    this.pluginService?.disposeAll();\n    this.pluginService = null;\n  }\n\n  compile(): void {\n    this.compileSignal();\n    this.compileMarks();\n  }\n\n  compileMarks(group?: string | IGroupMark) {\n    this.getMarks().forEach(m => {\n      m.compile({ group });\n      m.getProduct()?.configure({\n        context: {\n          model: this\n        }\n      });\n    });\n  }\n\n  // 代理组件事件\n  protected _delegateEvent = (component: INode, event: any, type: string) => {\n    this.event.emit(\n      type,\n      {\n        model: this,\n        node: component,\n        event,\n        item: null,\n        datum: null,\n        source: Event_Source_Type.chart,\n        chart: this._option?.globalInstance?.getChart()\n      },\n      'model'\n    );\n  };\n}\n"]}
+{"version":3,"sources":["../src/component/base/base-component.ts"],"names":[],"mappings":"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","file":"base-component.js","sourcesContent":["import type { IGraphic, IGroup } from '@visactor/vrender';\nimport { BaseModel } from '../../model/base-model';\nimport type { IRegion } from '../../region/interface';\nimport type { ComponentTypeEnum, IComponent, IComponentOption } from '../interface';\nimport type { BaseEventParams } from '../../event/interface';\nimport { ComponentPluginService } from '../../plugin/components/plugin-service';\nimport type { IComponentPluginService, IComponentPlugin } from '../../plugin/components/interface';\nimport { isArray, merge } from '@visactor/vutils';\nimport { getComponentThemeFromGlobalTheme } from './util';\nimport type { IGroupMark } from '@visactor/vgrammar';\nimport { Event_Source_Type } from '../../constant';\nimport type { IAnimate } from '../../animation/interface';\nimport { AnimateManager } from '../../animation/animate-manager';\nimport type { Datum, StringOrNumber } from '../../typings';\nimport { normalizeLayoutPaddingSpec } from '../../util';\nimport type { IComponentSpec } from './interface';\n\nexport abstract class BaseComponent<T extends IComponentSpec = IComponentSpec>\n  extends BaseModel<T>\n  implements IComponent\n{\n  name: string = 'component';\n  readonly modelType: string = 'component';\n  pluginService?: IComponentPluginService;\n  protected declare _option: IComponentOption;\n\n  protected _regions: IRegion[] = [];\n  getRegions() {\n    return this._regions;\n  }\n\n  protected _container: IGroup;\n\n  created() {\n    super.created();\n    this.pluginService = new ComponentPluginService(this);\n  }\n\n  animate?: IAnimate;\n\n  constructor(spec: T, options: IComponentOption) {\n    super(spec, options);\n    this._regions = options.getRegionsInIndex();\n    this.layoutBindRegionID = this._regions.map(x => x.id);\n    // 创建组件自己的动画管理器\n    if (this._option.animation) {\n      this.animate = new AnimateManager({\n        getCompiler: options.getCompiler\n      });\n    }\n  }\n\n  abstract changeRegions(regions: IRegion[]): void;\n\n  protected callPlugin(cb: (plugin: IComponentPlugin) => void) {\n    if (this.pluginService) {\n      this.pluginService.getAll().forEach(plugin => cb(plugin));\n    }\n  }\n\n  protected eventPos(markEventParams: BaseEventParams) {\n    return {\n      x: (markEventParams.event as any).viewX - this.getLayoutStartPoint().x,\n      y: (markEventParams.event as any).viewY - this.getLayoutStartPoint().y\n    };\n  }\n\n  async setCurrentTheme(theme: any, noRender?: boolean) {\n    const modifyConfig = () => {\n      // 重新初始化\n      this.reInit(theme);\n\n      return { change: true, reMake: false };\n    };\n\n    if (noRender) {\n      modifyConfig();\n    } else {\n      await this._option.globalInstance.updateCustomConfigAndRerender(modifyConfig);\n    }\n  }\n\n  protected _initTheme(theme?: any) {\n    const globalTheme = this._option.getTheme();\n\n    if (theme) {\n      super._initTheme(theme);\n    } else {\n      super._initTheme(\n        getComponentThemeFromGlobalTheme(\n          this.type as ComponentTypeEnum,\n          globalTheme,\n          this._originalSpec,\n          this._option.getChart()\n        )\n      );\n    }\n\n    // 将 theme merge 到 spec 中\n    if (this._shouldMergeThemeToSpec) {\n      if (isArray(this._originalSpec)) {\n        this._spec = this._originalSpec.map(spec => merge({}, this._theme, spec)) as unknown as T;\n      } else {\n        this._mergeThemeToSpec();\n      }\n    }\n    this._preprocessSpec();\n\n    // 默认忽略外侧 padding\n    const { padding, noOuterPadding = true, orient } = this._spec;\n    if (noOuterPadding && padding && orient) {\n      this._spec.padding = {\n        ...normalizeLayoutPaddingSpec(padding),\n        [orient]: 0\n      };\n    }\n  }\n\n  /** 是否在初始化时将 theme 自动 merge 到 spec */\n  protected _shouldMergeThemeToSpec() {\n    return true;\n  }\n\n  protected getContainer() {\n    if (!this._container) {\n      this._container = this._option.globalInstance.getStage().find(node => node.name === 'root', true);\n    }\n\n    return this._container;\n  }\n\n  /**\n   * updateSpec\n   */\n  updateSpec(spec: any) {\n    const originalSpec = this._originalSpec as {\n      regionId?: StringOrNumber;\n      regionIndex?: number;\n      seriesId?: StringOrNumber;\n      seriesIndex?: number;\n    };\n    const result = super.updateSpec(spec);\n    if (\n      originalSpec.regionId !== this._spec.regionId ||\n      originalSpec.regionIndex !== this._spec.regionIndex ||\n      originalSpec.seriesId !== this._spec.seriesId ||\n      originalSpec.seriesIndex !== this._spec.seriesIndex\n    ) {\n      result.reMake = true;\n    }\n    return result;\n  }\n\n  release() {\n    super.release();\n    this.clear();\n  }\n\n  clear() {\n    this._container = null;\n    this.pluginService?.disposeAll();\n    this.pluginService = null;\n  }\n\n  compile(): void {\n    this.compileSignal();\n    this.compileMarks();\n  }\n\n  compileMarks(group?: string | IGroupMark) {\n    this.getMarks().forEach(m => {\n      m.compile({ group });\n      m.getProduct()?.configure({\n        context: {\n          model: this\n        }\n      });\n    });\n  }\n\n  // 代理组件事件\n  protected _delegateEvent = (component: IGraphic, event: any, type: string, item: any = null, datum: Datum = null) => {\n    this.event.emit(\n      type,\n      {\n        model: this,\n        node: component,\n        event,\n        item: item,\n        datum: datum,\n        source: Event_Source_Type.chart,\n        chart: this._option?.globalInstance?.getChart()\n      },\n      'model'\n    );\n  };\n}\n"]}

package/esm/component/base/interface.d.ts

@@ -0,0 +1,8 @@
+import type { IModelSpec } from '../../model/interface';
+import type { StringOrNumber } from '../../typings';
+export interface IComponentSpec extends IModelSpec {
+    regionIndex?: number | number[];
+    regionId?: StringOrNumber | StringOrNumber[];
+    seriesIndex?: number | number[];
+    seriesId?: StringOrNumber | StringOrNumber[];
+}

package/esm/component/base/interface.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=interface.js.map

package/esm/component/base/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/component/base/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type { IModelSpec } from '../../model/interface';\nimport type { StringOrNumber } from '../../typings';\n\nexport interface IComponentSpec extends IModelSpec {\n  /**\n   * 组件关联的region索引\n   * @default 0\n   */\n  regionIndex?: number | number[];\n  /**\n   * 组件关联的region id\n   */\n  regionId?: StringOrNumber | StringOrNumber[];\n  /**\n   * 组件关联的系列索引\n   */\n  seriesIndex?: number | number[];\n  /**\n   * 组件关联的系列id\n   */\n  seriesId?: StringOrNumber | StringOrNumber[];\n}\n"]}

package/esm/component/base/util.d.ts

@@ -1,3 +1,4 @@
+import type { IChart } from '../../chart/interface';
 import type { ITheme } from '../../theme';
 import { ComponentTypeEnum } from '../interface';
-export declare function getComponentThemeFromGlobalTheme(type: ComponentTypeEnum, theme: ITheme, componentSpec: any): any;
+export declare function getComponentThemeFromGlobalTheme(type: ComponentTypeEnum, theme: ITheme, componentSpec: any, chart: IChart): any;

package/esm/component/base/util.js

@@ -1,13 +1,15 @@
 import { getOrient } from "../axis/cartesian/util";
 
-import { getCartesianAxisTheme, getPolarAxisTheme } from "../axis/utils";
+import { getCartesianAxisTheme, getPolarAxisTheme } from "../axis/util";
+
+import { getCartesianCrosshairTheme, getPolarCrosshairTheme } from "../crosshair/util";
 
 import { ComponentTypeEnum } from "../interface";
 
 import { getLayout } from "../legend/util";
 
-export function getComponentThemeFromGlobalTheme(type, theme, componentSpec) {
-    var _a, _b, _c, _d;
+export function getComponentThemeFromGlobalTheme(type, theme, componentSpec, chart) {
+    var _a, _b, _c;
     switch (type) {
       case ComponentTypeEnum.cartesianBandAxis:
         return getCartesianAxisTheme(getOrient(componentSpec), "band", theme);
@@ -18,6 +20,9 @@ export function getComponentThemeFromGlobalTheme(type, theme, componentSpec) {
       case ComponentTypeEnum.cartesianLogAxis:
         return getCartesianAxisTheme(getOrient(componentSpec), "log", theme);
 
+      case ComponentTypeEnum.cartesianSymlogAxis:
+        return getCartesianAxisTheme(getOrient(componentSpec), "symlog", theme);
+
       case ComponentTypeEnum.cartesianAxis:
       case ComponentTypeEnum.cartesianTimeAxis:
         return getCartesianAxisTheme(getOrient(componentSpec), void 0, theme);
@@ -32,17 +37,19 @@ export function getComponentThemeFromGlobalTheme(type, theme, componentSpec) {
         return getPolarAxisTheme(componentSpec.orient, void 0, theme);
 
       case ComponentTypeEnum.cartesianCrosshair:
+        return getCartesianCrosshairTheme(theme, chart);
+
       case ComponentTypeEnum.polarCrosshair:
-        return null === (_a = theme.component) || void 0 === _a ? void 0 : _a.crosshair;
+        return getPolarCrosshairTheme(theme, chart);
 
       case ComponentTypeEnum.colorLegend:
-        return null === (_b = theme.component) || void 0 === _b ? void 0 : _b.colorLegend[getLayout(componentSpec)];
+        return null === (_a = theme.component) || void 0 === _a ? void 0 : _a.colorLegend[getLayout(componentSpec)];
 
       case ComponentTypeEnum.sizeLegend:
-        return null === (_c = theme.component) || void 0 === _c ? void 0 : _c.sizeLegend[getLayout(componentSpec)];
+        return null === (_b = theme.component) || void 0 === _b ? void 0 : _b.sizeLegend[getLayout(componentSpec)];
 
       default:
-        return null === (_d = theme.component) || void 0 === _d ? void 0 : _d[type];
+        return null === (_c = theme.component) || void 0 === _c ? void 0 : _c[type];
     }
 }
 //# sourceMappingURL=util.js.map

package/esm/component/base/util.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/base/util.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,UAAU,gCAAgC,CAAC,IAAuB,EAAE,KAAa,EAAE,aAAkB;;IACzG,QAAQ,IAAI,EAAE;QACZ,KAAK,iBAAiB,CAAC,iBAAiB;YACtC,OAAO,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QACxE,KAAK,iBAAiB,CAAC,mBAAmB;YACxC,OAAO,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC1E,KAAK,iBAAiB,CAAC,gBAAgB;YACrC,OAAO,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACvE,KAAK,iBAAiB,CAAC,aAAa,CAAC;QACrC,KAAK,iBAAiB,CAAC,iBAAiB;YACtC,OAAO,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;QAC3E,KAAK,iBAAiB,CAAC,aAAa;YAClC,OAAO,iBAAiB,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAChE,KAAK,iBAAiB,CAAC,eAAe;YACpC,OAAO,iBAAiB,CAAC,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAClE,KAAK,iBAAiB,CAAC,SAAS;YAC9B,OAAO,iBAAiB,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;QACnE,KAAK,iBAAiB,CAAC,kBAAkB,CAAC;QAC1C,KAAK,iBAAiB,CAAC,cAAc;YACnC,OAAO,MAAA,KAAK,CAAC,SAAS,0CAAE,SAAS,CAAC;QACpC,KAAK,iBAAiB,CAAC,WAAW;YAChC,OAAO,MAAA,KAAK,CAAC,SAAS,0CAAE,WAAW,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;QAChE,KAAK,iBAAiB,CAAC,UAAU;YAC/B,OAAO,MAAA,KAAK,CAAC,SAAS,0CAAE,UAAU,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;QAC/D;YACE,OAAO,MAAA,KAAK,CAAC,SAAS,0CAAG,IAAI,CAAC,CAAC;KAClC;AACH,CAAC","file":"util.js","sourcesContent":["import type { ITheme } from '../../theme';\nimport { getOrient } from '../axis/cartesian/util';\nimport { getCartesianAxisTheme, getPolarAxisTheme } from '../axis/utils';\nimport { ComponentTypeEnum } from '../interface';\nimport { getLayout } from '../legend/util';\n\nexport function getComponentThemeFromGlobalTheme(type: ComponentTypeEnum, theme: ITheme, componentSpec: any) {\n  switch (type) {\n    case ComponentTypeEnum.cartesianBandAxis:\n      return getCartesianAxisTheme(getOrient(componentSpec), 'band', theme);\n    case ComponentTypeEnum.cartesianLinearAxis:\n      return getCartesianAxisTheme(getOrient(componentSpec), 'linear', theme);\n    case ComponentTypeEnum.cartesianLogAxis:\n      return getCartesianAxisTheme(getOrient(componentSpec), 'log', theme);\n    case ComponentTypeEnum.cartesianAxis:\n    case ComponentTypeEnum.cartesianTimeAxis:\n      return getCartesianAxisTheme(getOrient(componentSpec), undefined, theme);\n    case ComponentTypeEnum.polarBandAxis:\n      return getPolarAxisTheme(componentSpec.orient, 'band', theme);\n    case ComponentTypeEnum.polarLinearAxis:\n      return getPolarAxisTheme(componentSpec.orient, 'linear', theme);\n    case ComponentTypeEnum.polarAxis:\n      return getPolarAxisTheme(componentSpec.orient, undefined, theme);\n    case ComponentTypeEnum.cartesianCrosshair:\n    case ComponentTypeEnum.polarCrosshair:\n      return theme.component?.crosshair;\n    case ComponentTypeEnum.colorLegend:\n      return theme.component?.colorLegend[getLayout(componentSpec)];\n    case ComponentTypeEnum.sizeLegend:\n      return theme.component?.sizeLegend[getLayout(componentSpec)];\n    default:\n      return theme.component?.[type];\n  }\n}\n"]}
+{"version":3,"sources":["../src/component/base/util.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,UAAU,gCAAgC,CAC9C,IAAuB,EACvB,KAAa,EACb,aAAkB,EAClB,KAAa;;IAEb,QAAQ,IAAI,EAAE;QACZ,KAAK,iBAAiB,CAAC,iBAAiB;YACtC,OAAO,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QACxE,KAAK,iBAAiB,CAAC,mBAAmB;YACxC,OAAO,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC1E,KAAK,iBAAiB,CAAC,gBAAgB;YACrC,OAAO,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACvE,KAAK,iBAAiB,CAAC,mBAAmB;YACxC,OAAO,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC1E,KAAK,iBAAiB,CAAC,aAAa,CAAC;QACrC,KAAK,iBAAiB,CAAC,iBAAiB;YACtC,OAAO,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;QAC3E,KAAK,iBAAiB,CAAC,aAAa;YAClC,OAAO,iBAAiB,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAChE,KAAK,iBAAiB,CAAC,eAAe;YACpC,OAAO,iBAAiB,CAAC,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAClE,KAAK,iBAAiB,CAAC,SAAS;YAC9B,OAAO,iBAAiB,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;QACnE,KAAK,iBAAiB,CAAC,kBAAkB;YACvC,OAAO,0BAA0B,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAClD,KAAK,iBAAiB,CAAC,cAAc;YACnC,OAAO,sBAAsB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC9C,KAAK,iBAAiB,CAAC,WAAW;YAChC,OAAO,MAAA,KAAK,CAAC,SAAS,0CAAE,WAAW,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;QAChE,KAAK,iBAAiB,CAAC,UAAU;YAC/B,OAAO,MAAA,KAAK,CAAC,SAAS,0CAAE,UAAU,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;QAC/D;YACE,OAAO,MAAA,KAAK,CAAC,SAAS,0CAAG,IAAI,CAAC,CAAC;KAClC;AACH,CAAC","file":"util.js","sourcesContent":["import type { IChart } from '../../chart/interface';\nimport type { ITheme } from '../../theme';\nimport { getOrient } from '../axis/cartesian/util';\nimport { getCartesianAxisTheme, getPolarAxisTheme } from '../axis/util';\nimport { getCartesianCrosshairTheme, getPolarCrosshairTheme } from '../crosshair/util';\nimport { ComponentTypeEnum } from '../interface';\nimport { getLayout } from '../legend/util';\n\nexport function getComponentThemeFromGlobalTheme(\n  type: ComponentTypeEnum,\n  theme: ITheme,\n  componentSpec: any,\n  chart: IChart\n) {\n  switch (type) {\n    case ComponentTypeEnum.cartesianBandAxis:\n      return getCartesianAxisTheme(getOrient(componentSpec), 'band', theme);\n    case ComponentTypeEnum.cartesianLinearAxis:\n      return getCartesianAxisTheme(getOrient(componentSpec), 'linear', theme);\n    case ComponentTypeEnum.cartesianLogAxis:\n      return getCartesianAxisTheme(getOrient(componentSpec), 'log', theme);\n    case ComponentTypeEnum.cartesianSymlogAxis:\n      return getCartesianAxisTheme(getOrient(componentSpec), 'symlog', theme);\n    case ComponentTypeEnum.cartesianAxis:\n    case ComponentTypeEnum.cartesianTimeAxis:\n      return getCartesianAxisTheme(getOrient(componentSpec), undefined, theme);\n    case ComponentTypeEnum.polarBandAxis:\n      return getPolarAxisTheme(componentSpec.orient, 'band', theme);\n    case ComponentTypeEnum.polarLinearAxis:\n      return getPolarAxisTheme(componentSpec.orient, 'linear', theme);\n    case ComponentTypeEnum.polarAxis:\n      return getPolarAxisTheme(componentSpec.orient, undefined, theme);\n    case ComponentTypeEnum.cartesianCrosshair:\n      return getCartesianCrosshairTheme(theme, chart);\n    case ComponentTypeEnum.polarCrosshair:\n      return getPolarCrosshairTheme(theme, chart);\n    case ComponentTypeEnum.colorLegend:\n      return theme.component?.colorLegend[getLayout(componentSpec)];\n    case ComponentTypeEnum.sizeLegend:\n      return theme.component?.sizeLegend[getLayout(componentSpec)];\n    default:\n      return theme.component?.[type];\n  }\n}\n"]}

package/esm/component/brush/brush.d.ts

@@ -7,8 +7,8 @@ import type { IModelRenderOption } from '../../model/interface';
 import type { IRegion } from '../../region/interface';
 import type { ISeries } from '../../series/interface';
 import type { IElement } from '@visactor/vgrammar';
-import type { BrushInteractiveRangeAttr, IBrush } from './interface';
-export declare class Brush extends BaseComponent implements IBrush {
+import type { BrushInteractiveRangeAttr, IBrush, IBrushSpec } from './interface';
+export declare class Brush extends BaseComponent<IBrushSpec> implements IBrush {
     layoutType: LayoutItem['layoutType'];
     static type: ComponentTypeEnum;
     type: ComponentTypeEnum;
@@ -37,7 +37,7 @@ export declare class Brush extends BaseComponent implements IBrush {
         [elementKey: string]: IElement;
     };
     private _needInitOutState;
-    private _isFristState;
+    private _isFirstState;
     private _cacheInteractiveRangeAttrs;
     static createComponent(spec: any, options: IComponentOption): Brush[];
     created(): void;
@@ -50,7 +50,8 @@ export declare class Brush extends BaseComponent implements IBrush {
         [elementKey: string]: IElement;
     }): any[];
     protected _getBrushInteractiveAttr(region: IRegion): BrushInteractiveRangeAttr;
-    protected _createOrUpdateBrushComponent(region: IRegion, componentIndex: number): void;
+    protected _updateBrushComponent(region: IRegion, componentIndex: number): void;
+    protected _createBrushComponent(region: IRegion, componentIndex: number): void;
     private _transformBrushedMarkAttr;
     private _reconfigItem;
     private _reconfigLinkedItem;
@@ -62,5 +63,14 @@ export declare class Brush extends BaseComponent implements IBrush {
     protected initEvent(): void;
     onRender(ctx: IModelRenderOption): void;
     changeRegions(regions: IRegion[]): void;
+    updateSpec(spec: any): {
+        change: boolean;
+        reMake: boolean;
+        reMakeData: boolean;
+        reRender: boolean;
+        reSize: boolean;
+        reCompile: boolean;
+    };
     onLayoutEnd(ctx: any): void;
+    clear(): void;
 }

package/esm/component/brush/brush.js

@@ -15,10 +15,10 @@ import { isEqual } from "@visactor/vutils";
 export class Brush extends BaseComponent {
     constructor() {
         super(...arguments), this.layoutType = "absolute", this.type = ComponentTypeEnum.brush, 
-        this.name = ComponentTypeEnum.brush, this.layoutZIndex = LayoutZIndex.Brush, this._brushComponents = [], 
-        this._linkedSeries = [], this._itemMap = {}, this._linkedItemMap = {}, this._inBrushElementsMap = {}, 
-        this._outOfBrushElementsMap = {}, this._linkedInBrushElementsMap = {}, this._linkedOutOfBrushElementsMap = {}, 
-        this._needInitOutState = !0, this._isFristState = !0, this._cacheInteractiveRangeAttrs = [];
+        this.name = ComponentTypeEnum.brush, this.layoutZIndex = LayoutZIndex.Brush, this._linkedSeries = [], 
+        this._itemMap = {}, this._linkedItemMap = {}, this._inBrushElementsMap = {}, this._outOfBrushElementsMap = {}, 
+        this._linkedInBrushElementsMap = {}, this._linkedOutOfBrushElementsMap = {}, this._needInitOutState = !0, 
+        this._isFirstState = !0, this._cacheInteractiveRangeAttrs = [];
     }
     static createComponent(spec, options) {
         const brushSpec = spec.brush || options.defaultSpec;
@@ -53,49 +53,45 @@ export class Brush extends BaseComponent {
             yRange: [ seriesRegionStartY, seriesRegionEndY ]
         };
     }
-    _createOrUpdateBrushComponent(region, componentIndex) {
+    _updateBrushComponent(region, componentIndex) {
+        const interactiveAttr = this._getBrushInteractiveAttr(region), brushComponent = this._brushComponents[componentIndex];
+        brushComponent.setAttributes(interactiveAttr), this._initMarkBrushState(componentIndex, ""), 
+        brushComponent.children[0].removeAllChild(), this._needInitOutState = !0;
+    }
+    _createBrushComponent(region, componentIndex) {
         var _a, _b;
-        const interactiveAttr = this._getBrushInteractiveAttr(region);
-        if (this._brushComponents.length === this._relativeRegions.length) {
-            if (!isEqual(this._cacheInteractiveRangeAttrs[componentIndex], interactiveAttr)) {
-                const brushComponent = this._brushComponents[componentIndex];
-                brushComponent.setAttributes(interactiveAttr), this._initMarkBrushState(componentIndex, ""), 
-                brushComponent.children[0].removeAllChild(), this._needInitOutState = !0;
-            }
-        } else {
-            const brush = new BrushComponent(Object.assign(Object.assign({
-                zIndex: this.layoutZIndex,
-                brushStyle: transformToGraphic(null === (_a = this._spec) || void 0 === _a ? void 0 : _a.style)
-            }, interactiveAttr), this._spec));
-            brush.id = null !== (_b = this._spec.id) && void 0 !== _b ? _b : `brush-${this.id}`, 
-            this.getContainer().add(brush);
-            const {brushMode: brushMode = "single"} = this._spec;
-            this._brushComponents.push(brush), this._cacheInteractiveRangeAttrs.push(interactiveAttr), 
-            brush.setUpdateDragMaskCallback((operateParams => {
-                const {operateType: operateType, operateMask: operateMask} = operateParams;
-                (this._isFristState || this._needInitOutState && "single" === brushMode && operateType === IOperateType.drawing) && this._initMarkBrushState(componentIndex, "outOfBrush"), 
-                operateType === IOperateType.drawing && (this._needInitOutState = !1), operateType === IOperateType.drawEnd && (this._needInitOutState = !0), 
-                operateType === IOperateType.brushClear && (this._initMarkBrushState(componentIndex, ""), 
-                this._needInitOutState = !0), this._reconfigItem(operateMask, region), this._reconfigLinkedItem(operateMask, region);
-                let eventType = ChartEvent.brushChange;
-                eventType = operateType === IOperateType.drawStart || operateType === IOperateType.moveStart ? ChartEvent.brushStart : operateType === IOperateType.drawEnd || operateType === IOperateType.moveEnd ? ChartEvent.brushEnd : ChartEvent.brushChange, 
-                this.event.emit(eventType, {
-                    model: this,
-                    value: {
-                        operateType: operateType,
-                        operateRegion: region,
-                        inBrushData: this._extendDataInBrush(this._inBrushElementsMap),
-                        outOfBrushData: this._extendDatumOutOfBrush(this._outOfBrushElementsMap),
-                        linkInBrushData: this._extendDataInBrush(this._linkedInBrushElementsMap),
-                        linkOutOfBrushData: this._extendDatumOutOfBrush(this._linkedOutOfBrushElementsMap),
-                        inBrushElementsMap: this._inBrushElementsMap,
-                        outOfBrushElementsMap: this._outOfBrushElementsMap,
-                        linkedInBrushElementsMap: this._linkedInBrushElementsMap,
-                        linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap
-                    }
-                });
-            }));
-        }
+        const interactiveAttr = this._getBrushInteractiveAttr(region), brush = new BrushComponent(Object.assign(Object.assign({
+            zIndex: this.layoutZIndex,
+            brushStyle: transformToGraphic(null === (_a = this._spec) || void 0 === _a ? void 0 : _a.style)
+        }, interactiveAttr), this._spec));
+        brush.id = null !== (_b = this._spec.id) && void 0 !== _b ? _b : `brush-${this.id}`, 
+        this.getContainer().add(brush);
+        const {brushMode: brushMode = "single"} = this._spec;
+        this._brushComponents.push(brush), this._cacheInteractiveRangeAttrs.push(interactiveAttr), 
+        brush.setUpdateDragMaskCallback((operateParams => {
+            const {operateType: operateType, operateMask: operateMask} = operateParams;
+            (this._isFirstState || this._needInitOutState && "single" === brushMode && operateType === IOperateType.drawing) && this._initMarkBrushState(componentIndex, "outOfBrush"), 
+            operateType === IOperateType.drawing && (this._needInitOutState = !1), operateType === IOperateType.drawEnd && (this._needInitOutState = !0), 
+            operateType === IOperateType.brushClear && (this._initMarkBrushState(componentIndex, ""), 
+            this._needInitOutState = !0), this._reconfigItem(operateMask, region), this._reconfigLinkedItem(operateMask, region);
+            let eventType = ChartEvent.brushChange;
+            eventType = operateType === IOperateType.drawStart || operateType === IOperateType.moveStart ? ChartEvent.brushStart : operateType === IOperateType.drawEnd || operateType === IOperateType.moveEnd ? ChartEvent.brushEnd : ChartEvent.brushChange, 
+            this.event.emit(eventType, {
+                model: this,
+                value: {
+                    operateType: operateType,
+                    operateRegion: region,
+                    inBrushData: this._extendDataInBrush(this._inBrushElementsMap),
+                    outOfBrushData: this._extendDatumOutOfBrush(this._outOfBrushElementsMap),
+                    linkInBrushData: this._extendDataInBrush(this._linkedInBrushElementsMap),
+                    linkOutOfBrushData: this._extendDatumOutOfBrush(this._linkedOutOfBrushElementsMap),
+                    inBrushElementsMap: this._inBrushElementsMap,
+                    outOfBrushElementsMap: this._outOfBrushElementsMap,
+                    linkedInBrushElementsMap: this._linkedInBrushElementsMap,
+                    linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap
+                }
+            });
+        }));
     }
     _transformBrushedMarkAttr(brushedStyle) {
         const styleResult = {};
@@ -111,12 +107,13 @@ export class Brush extends BaseComponent {
             if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) return;
             grammarMark.elements.forEach((el => {
                 var _a, _b, _c;
-                const graphicItem = el.getGraphicItem();
-                (null === (_a = this._outOfBrushElementsMap) || void 0 === _a ? void 0 : _a[el.key]) && this._isBrushContainItem(operateMask, graphicItem) ? (graphicItem.addState("inBrush"), 
+                const graphicItem = el.getGraphicItem(), elementKey = mark.id + "_" + el.key;
+                (null === (_a = this._outOfBrushElementsMap) || void 0 === _a ? void 0 : _a[elementKey]) && this._isBrushContainItem(operateMask, graphicItem) ? (graphicItem.addState("inBrush"), 
                 this._inBrushElementsMap[null == operateMask ? void 0 : operateMask.name] || (this._inBrushElementsMap[null == operateMask ? void 0 : operateMask.name] = {}), 
-                this._inBrushElementsMap[null == operateMask ? void 0 : operateMask.name][el.key] = el, 
-                delete this._outOfBrushElementsMap[el.key]) : (null === (_c = null === (_b = this._inBrushElementsMap) || void 0 === _b ? void 0 : _b[null == operateMask ? void 0 : operateMask.name]) || void 0 === _c ? void 0 : _c[el.key]) && !this._isBrushContainItem(operateMask, graphicItem) && (graphicItem.removeState("inBrush"), 
-                graphicItem.addState("outOfBrush"), this._outOfBrushElementsMap[el.key] = el, delete this._inBrushElementsMap[operateMask.name][el.key]);
+                this._inBrushElementsMap[null == operateMask ? void 0 : operateMask.name][elementKey] = el, 
+                delete this._outOfBrushElementsMap[elementKey]) : (null === (_c = null === (_b = this._inBrushElementsMap) || void 0 === _b ? void 0 : _b[null == operateMask ? void 0 : operateMask.name]) || void 0 === _c ? void 0 : _c[elementKey]) && !this._isBrushContainItem(operateMask, graphicItem) && (graphicItem.removeState("inBrush"), 
+                graphicItem.addState("outOfBrush"), this._outOfBrushElementsMap[elementKey] = el, 
+                delete this._inBrushElementsMap[operateMask.name][elementKey]);
             }));
         }));
     }
@@ -130,16 +127,16 @@ export class Brush extends BaseComponent {
                     if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) return;
                     grammarMark.elements.forEach((el => {
                         var _a, _b, _c;
-                        const graphicItem = el.getGraphicItem();
-                        (null === (_a = this._linkedOutOfBrushElementsMap) || void 0 === _a ? void 0 : _a[el.key]) && this._isBrushContainItem(operateMask, graphicItem, {
+                        const graphicItem = el.getGraphicItem(), elementKey = mark.id + "_" + el.key;
+                        (null === (_a = this._linkedOutOfBrushElementsMap) || void 0 === _a ? void 0 : _a[elementKey]) && this._isBrushContainItem(operateMask, graphicItem, {
                             dx: regionOffsetX,
                             dy: regionOffsetY
                         }) ? (graphicItem.addState("inBrush"), this._linkedInBrushElementsMap[null == operateMask ? void 0 : operateMask.name] || (this._linkedInBrushElementsMap[null == operateMask ? void 0 : operateMask.name] = {}), 
-                        this._linkedInBrushElementsMap[null == operateMask ? void 0 : operateMask.name][el.key] = el, 
-                        delete this._linkedOutOfBrushElementsMap[el.key]) : (null === (_c = null === (_b = this._linkedInBrushElementsMap) || void 0 === _b ? void 0 : _b[null == operateMask ? void 0 : operateMask.name]) || void 0 === _c ? void 0 : _c[el.key]) && !this._isBrushContainItem(operateMask, graphicItem, {
+                        this._linkedInBrushElementsMap[null == operateMask ? void 0 : operateMask.name][elementKey] = el, 
+                        delete this._linkedOutOfBrushElementsMap[elementKey]) : (null === (_c = null === (_b = this._linkedInBrushElementsMap) || void 0 === _b ? void 0 : _b[null == operateMask ? void 0 : operateMask.name]) || void 0 === _c ? void 0 : _c[elementKey]) && !this._isBrushContainItem(operateMask, graphicItem, {
                             dx: regionOffsetX,
                             dy: regionOffsetY
-                        }) && (graphicItem.removeState("inBrush"), graphicItem.addState("outOfBrush"), this._linkedOutOfBrushElementsMap[el.key] = el);
+                        }) && (graphicItem.removeState("inBrush"), graphicItem.addState("outOfBrush"), this._linkedOutOfBrushElementsMap[elementKey] = el);
                     }));
                 }));
             }
@@ -183,7 +180,7 @@ export class Brush extends BaseComponent {
         this._relativeRegions.forEach((r => {
             const allMarks = [];
             r.getSeries().forEach((s => {
-                (seriesUserId && array(seriesUserId).includes(s.userId) || seriesIndex && array(seriesIndex).includes(s.getSpecIndex()) || !seriesIndex && !seriesUserId) && allMarks.push(...s.getMarksWithoutRoot()), 
+                (seriesUserId && array(seriesUserId).includes(s.userId.toString()) || seriesIndex && array(seriesIndex).includes(s.getSpecIndex()) || !seriesIndex && !seriesUserId) && allMarks.push(...s.getMarksWithoutRoot()), 
                 this._itemMap[r.id] = allMarks;
             }));
         })), this._linkedSeries.forEach((s => {
@@ -202,22 +199,37 @@ export class Brush extends BaseComponent {
                 const grammarMark = mark.getProduct();
                 if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) return;
                 grammarMark.elements.forEach((el => {
-                    const graphicItem = el.getGraphicItem();
+                    const graphicItem = el.getGraphicItem(), elementKey = mark.id + "_" + el.key;
                     graphicItem.stateProxy = stateName => "inBrush" === stateName ? inBrushMarkAttr : "outOfBrush" === stateName ? outOfBrushMarkAttr : void 0, 
-                    graphicItem.addState(stateName), this._outOfBrushElementsMap[el.key] = el, this._linkedOutOfBrushElementsMap[el.key] = el;
+                    graphicItem.addState(stateName), this._outOfBrushElementsMap[elementKey] = el, this._linkedOutOfBrushElementsMap[elementKey] = el;
                 }));
             }));
-        })), this._isFristState = !1;
+        })), this._isFirstState = !1;
     }
     initEvent() {}
     onRender(ctx) {}
     changeRegions(regions) {}
+    updateSpec(spec) {
+        this._brushComponents && this._relativeRegions.forEach(((region, index) => {
+            this._updateBrushComponent(region, index);
+        }));
+        const originalSpec = this._spec, result = super.updateSpec(spec);
+        return isEqual(originalSpec, this._spec) || (result.reRender = !0, result.reMake = !0), 
+        result;
+    }
     onLayoutEnd(ctx) {
         var _a;
         super.onLayoutEnd(ctx);
-        (null === (_a = this._spec.visible) || void 0 === _a || _a) && this._relativeRegions.forEach(((region, index) => {
-            this._createOrUpdateBrushComponent(region, index);
-        }));
+        (null === (_a = this._spec.visible) || void 0 === _a || _a) && (this._brushComponents ? this._relativeRegions.forEach(((region, index) => {
+            this._updateBrushComponent(region, index);
+        })) : (this._brushComponents = [], this._relativeRegions.forEach(((region, index) => {
+            this._createBrushComponent(region, index);
+        }))));
+    }
+    clear() {
+        this._brushComponents && (this._container.removeChild(this._brushComponents), this._brushComponents.forEach((brush => {
+            brush.releaseBrushEvents();
+        })), this._brushComponents = null), super.clear();
     }
 }