@visactor/vgrammar-core 0.14.0-alpha.0 → 0.14.0-alpha.2

package/es/types/animate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types/animate.ts"],"names":[],"mappings":"","file":"animate.js","sourcesContent":["import type { IGraphic, ACustomAnimate, EasingType } from '@visactor/vrender-core';\nimport type { IPointLike } from '@visactor/vutils';\nimport type { MarkFunctionCallback, MarkFunctionType } from './mark';\nimport type { IMark } from './grammar';\nimport type { IElement } from './element';\nimport type { FunctionCallback } from './signal';\n\nexport type TypeAnimation<T extends IElement> = (\n  element: T,\n  options: any,\n  animationParameters: IAnimationParameters\n) => { from?: { [channel: string]: any }; to?: { [channel: string]: any } };\n\nexport interface IClipAnimationOptions {\n  clipDimension?: 'x' | 'y' | 'auto' | 'default';\n}\n\nexport interface IGrowCartesianAnimationOptions {\n  orient?: 'positive' | 'negative';\n  overall?: boolean | number;\n  direction?: 'x' | 'y' | 'xy';\n}\n\nexport interface IGrowAngleAnimationOptions {\n  orient?: 'clockwise' | 'anticlockwise';\n  overall?: boolean | number;\n}\n\nexport interface IGrowRadiusAnimationOptions {\n  orient?: 'inside' | 'outside';\n  overall?: boolean | number;\n}\n\nexport interface IGrowPointsAnimationOptions {\n  orient?: 'positive' | 'negative';\n}\n\nexport interface IGrowPointsOverallAnimationOptions extends IGrowPointsAnimationOptions {\n  center?: IPointLike;\n}\n\nexport interface IScaleAnimationOptions {\n  direction?: 'x' | 'y' | 'xy';\n}\n\nexport interface IMoveAnimationOptions {\n  direction?: 'x' | 'y' | 'xy';\n  orient?: 'positive' | 'negative';\n  offset?: number;\n  point?: { x?: number; y?: number } | FunctionCallback<{ x?: number; y?: number }>;\n}\n\nexport interface IRotateAnimationOptions {\n  orient?: 'clockwise' | 'anticlockwise';\n  angle?: number;\n}\n\n/** VGrammar 层提供的图元text上的图形属性，现在暂时会和VRender不一致 */\nexport interface TextItemAttributes {\n  fontSize?: number;\n  lineHeight?: number;\n  font?: string;\n  fontStyle?: string;\n  fontVariant?: string;\n  fontWeight?: string | number;\n  lineBreak?: string;\n  text?: string | string[];\n  limit?: number;\n  align?: string;\n  baseline?: string;\n  ellipsis?: string | boolean;\n  dir?: string;\n}\n\n/** animation */\nexport type MarkFunctionValueType<T> = MarkFunctionCallback<T> | T;\n\nexport type IAnimationConfig = IAnimationTimeline | IAnimationTypeConfig;\n\n/**\n * state动画，暂时只支持简单配置\n */\nexport interface IStateAnimationConfig {\n  duration?: number;\n  easing?: EasingType;\n}\n\n/**\n * 动画 config 简化配置\n */\nexport interface IAnimationTypeConfig {\n  type?: string;\n  channel?: IAnimationChannelAttrs | IAnimationChannelAttributes;\n  custom?: IAnimationChannelInterpolator | IAnimationCustomConstructor;\n  customParameters?: MarkFunctionValueType<any>;\n  easing?: EasingType;\n  delay?: MarkFunctionValueType<number>;\n  delayAfter?: MarkFunctionValueType<number>;\n  duration?: MarkFunctionValueType<number>;\n  oneByOne?: MarkFunctionValueType<boolean | number>;\n  startTime?: MarkFunctionValueType<number>;\n  totalTime?: MarkFunctionValueType<number>;\n  /** loop: true 无限循环; loop: 正整数，表示循环的次数 */\n  loop?: boolean | number;\n  /** 动画 effect 配置项 */\n  options?: MarkFunctionValueType<any>;\n  /** 动画执行相关控制配置项 */\n  controlOptions?: IAnimationControlOptions;\n}\n\n/**\n * 动画 timeline 完整配置，一条时间线内的动画单元只能串行\n * 多个timeline是可以并行的\n * 考虑到同一图元不能在多个timeline上，所以timeline不应该提供数组配置的能力\n */\nexport interface IAnimationTimeline {\n  /** 为了方便动画编排，用户可以设置 id 用于识别时间线 */\n  id?: string;\n  /** 时间切片 */\n  timeSlices: IAnimationTimeSlice | IAnimationTimeSlice[];\n  /** 动画开始的相对时间，可以为负数 */\n  startTime?: MarkFunctionValueType<number>;\n  /** 动画时长 */\n  totalTime?: MarkFunctionValueType<number>;\n  /** 动画依次执行的延迟 */\n  oneByOne?: MarkFunctionValueType<number | boolean>;\n  /** loop: true 无限循环; loop: 正整数，表示循环的次数 */\n  loop?: MarkFunctionValueType<number | boolean>;\n  /** 对图元元素进行划分，和过滤类似，但是不同时间线不能同时作用在相同的元素上 */\n  partitioner?: MarkFunctionCallback<boolean>;\n  /** 对同一时间线上的元素进行排序 */\n  sort?: (datumA: any, datumB: any, elementA: IElement, elementB: IElement, parameters: any) => number;\n  /** 动画执行相关控制配置项 */\n  controlOptions?: IAnimationControlOptions;\n}\n\nexport interface IAnimationTimeSlice {\n  effects: IAnimationEffect | IAnimationEffect[];\n  duration?: MarkFunctionValueType<number>;\n  delay?: MarkFunctionValueType<number>;\n  delayAfter?: MarkFunctionValueType<number>;\n}\n\nexport type IAnimationChannelFunction = (datum: any, element: IElement, parameters: IAnimationParameters) => any;\nexport type IAnimationChannelAttrs = Record<\n  string,\n  {\n    from?: any | IAnimationChannelFunction;\n    to?: any | IAnimationChannelFunction;\n  }\n>;\nexport type IAnimationChannelAttributes = string[];\nexport type IAnimationChannelInterpolator = (\n  ratio: number,\n  from: any,\n  to: any,\n  nextAttributes: any,\n  datum: any,\n  element: IElement,\n  parameters: IAnimationParameters\n) => boolean | void;\n\n// TODO: fix ACustomAnimate<any>\nexport interface IAnimationCustomConstructor {\n  new (from: any, to: any, duration: number, ease: EasingType, parameters?: any): ACustomAnimate<any>;\n}\n\nexport interface IAnimationEffect {\n  type?: string;\n  channel?: IAnimationChannelAttrs | IAnimationChannelAttributes;\n  custom?: IAnimationChannelInterpolator | IAnimationCustomConstructor;\n  customParameters?: MarkFunctionValueType<any>;\n  easing?: EasingType;\n  /** options暂时没有处理 */\n  options?: MarkFunctionValueType<any>;\n}\n\nexport interface IAnimationControlOptions {\n  /** 当动画状态变更时清空动画 */\n  stopWhenStateChange?: boolean;\n  /** 是否立即应用动画初始状态 */\n  immediatelyApply?: boolean;\n}\n\n/**\n * Animation timeline should be parsed into animation units,\n * which record all necessary configs for animator to execute animation.\n *\n * animation unit time:\n * |<--initialDelay-->| |<--loopDelay--><--Slices--><--looDelayAfter-->| |<--loopDuration-->|\n *                      |<-----------------loopDuration--------------->|\n */\nexport interface IAnimationUnit {\n  /**\n   * initial delay time before any animation loop\n   */\n  initialDelay: number;\n  /**\n   * total time for one animation loop\n   */\n  loopDuration: number;\n  /**\n   * delay time before time slices\n   */\n  loopDelay: number;\n  /**\n   * delay time after time slices\n   */\n  loopDelayAfter: number;\n  /**\n   * animating time in one animation loop\n   */\n  loopAnimateDuration: number;\n  loopCount: number;\n  totalTime: number;\n  timeSlices: IAnimationTimeSlice[];\n}\n\nexport interface IAnimationRecord {\n  start: IGraphic;\n  end: IGraphic;\n  changes: any[];\n}\n\nexport interface IAnimationParameters {\n  width: number;\n  height: number;\n  mark: IMark;\n  group: IMark | null;\n  elementIndex: number;\n  elementCount: number;\n  view: any;\n}\n\nexport interface IParsedAnimationConfig {\n  state: string;\n  timeline: IAnimationTimeline;\n  originConfig: IAnimationConfig;\n  id: string;\n}\n\nexport interface IParsedAnimationAttrs {\n  from?: any;\n  to?: any;\n  custom?: IAnimationChannelInterpolator | IAnimationCustomConstructor;\n  customParameters?: any;\n}\n\n// animate structure\n\nexport interface IAnimatorOptions {\n  state: string;\n  timeline: IAnimationTimeline;\n  id: string;\n}\n\nexport interface IAnimator {\n  id: number;\n  element: IElement;\n  animationOptions: IAnimatorOptions;\n  isAnimating: boolean;\n\n  /** execute animation */\n  animate: (animationParameters: IAnimationParameters, parameters: any) => this;\n  /** set animation callback */\n  callback: (callbackFunction: (...args: any[]) => void) => this;\n\n  // animation control\n  stop: (stopState?: 'start' | 'end', invokeCallback?: boolean) => this;\n  pause: () => this;\n  resume: () => this;\n\n  /** set additional initial animation delay */\n  startAt: (startTime: number) => this;\n  /** get total animation execution time */\n  getTotalAnimationTime: () => number;\n\n  getEndAttributes: () => Record<string, any>;\n}\n\nexport interface IAnimateArranger {\n  // animation control api\n  parallel: (arranger: IAnimateArranger) => this;\n  after: (arranger: IAnimateArranger) => this;\n\n  // internal properties\n  afterArranger: IAnimateArranger;\n  parallelArrangers: IAnimateArranger[];\n  animators: IAnimator[];\n  totalTime: number;\n  startTime: number;\n  endTime: number;\n  arrangeTime: () => void;\n}\n\nexport interface IBaseAnimate {\n  // animation control\n  stop: () => this;\n  pause: () => this;\n  resume: () => this;\n\n  // internal animation process api\n  animate: () => this;\n  enable: () => this;\n  disable: () => this;\n  enableAnimationState: (state: string | string[]) => this;\n  disableAnimationState: (state: string | string[]) => this;\n  isAnimating: () => boolean;\n\n  release: () => void;\n}\n\nexport interface IViewAnimate extends IBaseAnimate {\n  animateAddition: (mark: IMark) => this;\n}\n\nexport interface IAnimate extends IBaseAnimate {\n  mark: IMark;\n\n  // additional animation control\n  run: (config: IAnimationConfig | IAnimationConfig[]) => IAnimateArranger;\n  runAnimationByState: (animationState: string) => IAnimateArranger;\n  stopAnimationByState: (animationState: string) => this;\n  pauseAnimationByState: (animationState: string) => this;\n  resumeAnimationByState: (animationState: string) => this;\n  reverse: () => this;\n  restart: () => this;\n  record: () => this;\n  recordEnd: () => this;\n\n  // internal animation process api\n  getAnimationConfigs: (animationState: string) => IParsedAnimationConfig[];\n  updateConfig: (config: Record<string, IAnimationConfig | IAnimationConfig[]>) => void;\n  updateState: (state: MarkFunctionType<string> | null) => void;\n  isElementAnimating: (element: IElement) => boolean;\n  getAnimatorCount: () => number;\n  getElementAnimators: (element: IElement | IElement[], animationState?: string) => IAnimator[];\n  release: () => void;\n}\n"]}
+{"version":3,"sources":["../src/types/animate.ts"],"names":[],"mappings":"","file":"animate.js","sourcesContent":["import type { IGraphic, ACustomAnimate, EasingType } from '@visactor/vrender-core';\nimport type { IPointLike } from '@visactor/vutils';\nimport type { MarkFunctionCallback, MarkFunctionType } from './mark';\nimport type { IMark } from './grammar';\nimport type { IElement } from './element';\nimport type { FunctionCallback } from './signal';\n\nexport type TypeAnimation<T extends IElement> = (\n  element: T,\n  options: any,\n  animationParameters: IAnimationParameters\n) => { from?: { [channel: string]: any }; to?: { [channel: string]: any } };\n\nexport interface IClipAnimationOptions {\n  clipDimension?: 'x' | 'y' | 'auto' | 'default';\n}\n\nexport interface IGrowCartesianAnimationOptions {\n  orient?: 'positive' | 'negative';\n  overall?: boolean | number;\n  direction?: 'x' | 'y' | 'xy';\n}\n\nexport interface IGrowAngleAnimationOptions {\n  orient?: 'clockwise' | 'anticlockwise';\n  overall?: boolean | number;\n}\n\nexport interface IGrowRadiusAnimationOptions {\n  orient?: 'inside' | 'outside';\n  overall?: boolean | number;\n}\n\nexport interface IGrowPointsAnimationOptions {\n  orient?: 'positive' | 'negative';\n}\n\nexport interface IGrowPointsOverallAnimationOptions extends IGrowPointsAnimationOptions {\n  center?: IPointLike;\n}\n\nexport interface IScaleAnimationOptions {\n  direction?: 'x' | 'y' | 'xy';\n}\n\nexport interface IMoveAnimationOptions {\n  direction?: 'x' | 'y' | 'xy';\n  orient?: 'positive' | 'negative';\n  offset?: number;\n  point?: { x?: number; y?: number } | FunctionCallback<{ x?: number; y?: number }>;\n  excludeChannels?: string[];\n}\n\nexport interface IRotateAnimationOptions {\n  orient?: 'clockwise' | 'anticlockwise';\n  angle?: number;\n}\n\n/** VGrammar 层提供的图元text上的图形属性，现在暂时会和VRender不一致 */\nexport interface TextItemAttributes {\n  fontSize?: number;\n  lineHeight?: number;\n  font?: string;\n  fontStyle?: string;\n  fontVariant?: string;\n  fontWeight?: string | number;\n  lineBreak?: string;\n  text?: string | string[];\n  limit?: number;\n  align?: string;\n  baseline?: string;\n  ellipsis?: string | boolean;\n  dir?: string;\n}\n\n/** animation */\nexport type MarkFunctionValueType<T> = MarkFunctionCallback<T> | T;\n\nexport type IAnimationConfig = IAnimationTimeline | IAnimationTypeConfig;\n\n/**\n * state动画，暂时只支持简单配置\n */\nexport interface IStateAnimationConfig {\n  duration?: number;\n  easing?: EasingType;\n}\n\n/**\n * 动画 config 简化配置\n */\nexport interface IAnimationTypeConfig {\n  type?: string;\n  channel?: IAnimationChannelAttrs | IAnimationChannelAttributes;\n  custom?: IAnimationChannelInterpolator | IAnimationCustomConstructor;\n  customParameters?: MarkFunctionValueType<any>;\n  easing?: EasingType;\n  delay?: MarkFunctionValueType<number>;\n  delayAfter?: MarkFunctionValueType<number>;\n  duration?: MarkFunctionValueType<number>;\n  oneByOne?: MarkFunctionValueType<boolean | number>;\n  startTime?: MarkFunctionValueType<number>;\n  totalTime?: MarkFunctionValueType<number>;\n  /** loop: true 无限循环; loop: 正整数，表示循环的次数 */\n  loop?: boolean | number;\n  /** 动画 effect 配置项 */\n  options?: MarkFunctionValueType<any>;\n  /** 动画执行相关控制配置项 */\n  controlOptions?: IAnimationControlOptions;\n}\n\n/**\n * 动画 timeline 完整配置，一条时间线内的动画单元只能串行\n * 多个timeline是可以并行的\n * 考虑到同一图元不能在多个timeline上，所以timeline不应该提供数组配置的能力\n */\nexport interface IAnimationTimeline {\n  /** 为了方便动画编排，用户可以设置 id 用于识别时间线 */\n  id?: string;\n  /** 时间切片 */\n  timeSlices: IAnimationTimeSlice | IAnimationTimeSlice[];\n  /** 动画开始的相对时间，可以为负数 */\n  startTime?: MarkFunctionValueType<number>;\n  /** 动画时长 */\n  totalTime?: MarkFunctionValueType<number>;\n  /** 动画依次执行的延迟 */\n  oneByOne?: MarkFunctionValueType<number | boolean>;\n  /** loop: true 无限循环; loop: 正整数，表示循环的次数 */\n  loop?: MarkFunctionValueType<number | boolean>;\n  /** 对图元元素进行划分，和过滤类似，但是不同时间线不能同时作用在相同的元素上 */\n  partitioner?: MarkFunctionCallback<boolean>;\n  /** 对同一时间线上的元素进行排序 */\n  sort?: (datumA: any, datumB: any, elementA: IElement, elementB: IElement, parameters: any) => number;\n  /** 动画执行相关控制配置项 */\n  controlOptions?: IAnimationControlOptions;\n}\n\nexport interface IAnimationTimeSlice {\n  effects: IAnimationEffect | IAnimationEffect[];\n  duration?: MarkFunctionValueType<number>;\n  delay?: MarkFunctionValueType<number>;\n  delayAfter?: MarkFunctionValueType<number>;\n}\n\nexport type IAnimationChannelFunction = (datum: any, element: IElement, parameters: IAnimationParameters) => any;\nexport type IAnimationChannelAttrs = Record<\n  string,\n  {\n    from?: any | IAnimationChannelFunction;\n    to?: any | IAnimationChannelFunction;\n  }\n>;\nexport type IAnimationChannelAttributes = string[];\nexport type IAnimationChannelInterpolator = (\n  ratio: number,\n  from: any,\n  to: any,\n  nextAttributes: any,\n  datum: any,\n  element: IElement,\n  parameters: IAnimationParameters\n) => boolean | void;\n\n// TODO: fix ACustomAnimate<any>\nexport interface IAnimationCustomConstructor {\n  new (from: any, to: any, duration: number, ease: EasingType, parameters?: any): ACustomAnimate<any>;\n}\n\nexport interface IAnimationEffect {\n  type?: string;\n  channel?: IAnimationChannelAttrs | IAnimationChannelAttributes;\n  custom?: IAnimationChannelInterpolator | IAnimationCustomConstructor;\n  customParameters?: MarkFunctionValueType<any>;\n  easing?: EasingType;\n  /** options暂时没有处理 */\n  options?: MarkFunctionValueType<any>;\n}\n\nexport interface IAnimationControlOptions {\n  /** 当动画状态变更时清空动画 */\n  stopWhenStateChange?: boolean;\n  /** 是否立即应用动画初始状态 */\n  immediatelyApply?: boolean;\n}\n\n/**\n * Animation timeline should be parsed into animation units,\n * which record all necessary configs for animator to execute animation.\n *\n * animation unit time:\n * |<--initialDelay-->| |<--loopDelay--><--Slices--><--looDelayAfter-->| |<--loopDuration-->|\n *                      |<-----------------loopDuration--------------->|\n */\nexport interface IAnimationUnit {\n  /**\n   * initial delay time before any animation loop\n   */\n  initialDelay: number;\n  /**\n   * total time for one animation loop\n   */\n  loopDuration: number;\n  /**\n   * delay time before time slices\n   */\n  loopDelay: number;\n  /**\n   * delay time after time slices\n   */\n  loopDelayAfter: number;\n  /**\n   * animating time in one animation loop\n   */\n  loopAnimateDuration: number;\n  loopCount: number;\n  totalTime: number;\n  timeSlices: IAnimationTimeSlice[];\n}\n\nexport interface IAnimationRecord {\n  start: IGraphic;\n  end: IGraphic;\n  changes: any[];\n}\n\nexport interface IAnimationParameters {\n  width: number;\n  height: number;\n  mark: IMark;\n  group: IMark | null;\n  elementIndex: number;\n  elementCount: number;\n  view: any;\n}\n\nexport interface IParsedAnimationConfig {\n  state: string;\n  timeline: IAnimationTimeline;\n  originConfig: IAnimationConfig;\n  id: string;\n}\n\nexport interface IParsedAnimationAttrs {\n  from?: any;\n  to?: any;\n  custom?: IAnimationChannelInterpolator | IAnimationCustomConstructor;\n  customParameters?: any;\n}\n\n// animate structure\n\nexport interface IAnimatorOptions {\n  state: string;\n  timeline: IAnimationTimeline;\n  id: string;\n}\n\nexport interface IAnimator {\n  id: number;\n  element: IElement;\n  animationOptions: IAnimatorOptions;\n  isAnimating: boolean;\n\n  /** execute animation */\n  animate: (animationParameters: IAnimationParameters, parameters: any) => this;\n  /** set animation callback */\n  callback: (callbackFunction: (...args: any[]) => void) => this;\n\n  // animation control\n  stop: (stopState?: 'start' | 'end', invokeCallback?: boolean) => this;\n  pause: () => this;\n  resume: () => this;\n\n  /** set additional initial animation delay */\n  startAt: (startTime: number) => this;\n  /** get total animation execution time */\n  getTotalAnimationTime: () => number;\n\n  getEndAttributes: () => Record<string, any>;\n}\n\nexport interface IAnimateArranger {\n  // animation control api\n  parallel: (arranger: IAnimateArranger) => this;\n  after: (arranger: IAnimateArranger) => this;\n\n  // internal properties\n  afterArranger: IAnimateArranger;\n  parallelArrangers: IAnimateArranger[];\n  animators: IAnimator[];\n  totalTime: number;\n  startTime: number;\n  endTime: number;\n  arrangeTime: () => void;\n}\n\nexport interface IBaseAnimate {\n  // animation control\n  stop: () => this;\n  pause: () => this;\n  resume: () => this;\n\n  // internal animation process api\n  animate: () => this;\n  enable: () => this;\n  disable: () => this;\n  enableAnimationState: (state: string | string[]) => this;\n  disableAnimationState: (state: string | string[]) => this;\n  isAnimating: () => boolean;\n\n  release: () => void;\n}\n\nexport interface IViewAnimate extends IBaseAnimate {\n  animateAddition: (mark: IMark) => this;\n}\n\nexport interface IAnimate extends IBaseAnimate {\n  mark: IMark;\n\n  // additional animation control\n  run: (config: IAnimationConfig | IAnimationConfig[]) => IAnimateArranger;\n  runAnimationByState: (animationState: string) => IAnimateArranger;\n  stopAnimationByState: (animationState: string) => this;\n  pauseAnimationByState: (animationState: string) => this;\n  resumeAnimationByState: (animationState: string) => this;\n  reverse: () => this;\n  restart: () => this;\n  record: () => this;\n  recordEnd: () => this;\n\n  // internal animation process api\n  getAnimationConfigs: (animationState: string) => IParsedAnimationConfig[];\n  updateConfig: (config: Record<string, IAnimationConfig | IAnimationConfig[]>) => void;\n  updateState: (state: MarkFunctionType<string> | null) => void;\n  isElementAnimating: (element: IElement) => boolean;\n  getAnimatorCount: () => number;\n  getElementAnimators: (element: IElement | IElement[], animationState?: string) => IAnimator[];\n  release: () => void;\n}\n"]}

package/es/types/element.d.ts

@@ -69,7 +69,7 @@ export interface IElement {
     setItemAttributes: (attributes: {
         [channel: string]: any;
     } | any[]) => void;
-    updateData: (groupKey: string, data: any[], keyGenerator: MarkKeySpec) => void;
+    updateData: (groupKey: string, data: any[], keyGenerator: MarkKeySpec, view: any) => void;
     state: (markState: MarkFunctionType<string | string[]>, parameters?: any) => void;
     encodeItems: (items: MarkElementItem[], encoders: BaseEncodeSpec, isReentered?: boolean, parameters?: any) => void;
     encodeGraphic: (attributes?: any) => void;
@@ -85,6 +85,10 @@ export interface IElement {
     getNextGraphicAttributes: () => {
         [key: string]: any;
     };
+    getFinalAnimationAttribute: (channel: string) => any;
+    getFinalAnimationAttributes: () => {
+        [key: string]: any;
+    };
     clearChangedGraphicAttributes: () => void;
     clearGraphicAttributes: () => void;
     getStates: () => string[];

package/es/types/element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types/element.ts"],"names":[],"mappings":"","file":"element.js","sourcesContent":["import type {\n  IArc,\n  IArc3d,\n  IArea,\n  ICircle,\n  IGlyph,\n  IGraphic,\n  IGroup,\n  IImage,\n  ILine,\n  IPath,\n  IPolygon,\n  IPyramid3d,\n  IRect,\n  IRect3d,\n  IRichText,\n  ISymbol,\n  IText\n} from '@visactor/vrender-core';\nimport type { DiffState } from '../graph/enums';\nimport type { IMark, IGlyphMark } from './grammar';\nimport type {\n  BaseEncodeSpec,\n  BaseSingleEncodeSpec,\n  IMarkConfig,\n  MarkFunctionType,\n  MarkKeySpec,\n  MarkType\n} from './mark';\n\nexport interface ElementGraphicMap {\n  circle: ICircle;\n  arc: IArc;\n  area: IArea;\n  image: IImage;\n  line: ILine;\n  path: IPath;\n  rule: ILine;\n  shape: IPath;\n  symbol: ISymbol;\n  text: IText;\n  richtext: IRichText;\n  polygon: IPolygon;\n  cell: ISymbol;\n  interval: IGraphic;\n  rect: IRect;\n  rect3d: IRect3d;\n  arc3d: IArc3d;\n  pyramid3d: IPyramid3d;\n  group: IGroup;\n  glyph: IGlyph;\n  linkPath: IGlyph;\n  treePath: IGlyph;\n  wave: IGlyph;\n  ripplePoint: IGlyph;\n  barBoxplot: IGlyph;\n  boxPlot: IGlyph;\n  component: IGroup;\n  axis: IGroup;\n  legend: IGroup;\n  corsshair: IGroup;\n  slider: IGroup;\n  datazoom: IGroup;\n  label: IGroup;\n  player: IGroup;\n}\n\nexport type GetGraphicByType<T> = T extends keyof ElementGraphicMap ? ElementGraphicMap[T] : IGraphic;\n\n/**\n * 保存graphicItem状态\n */\nexport interface MarkElementItem {\n  /** 唯一key */\n  key: string;\n  /** 原始数据 */\n  datum: any;\n  /** VGrammar view */\n  view: any;\n  /** 当前渲染帧下graphicItem对应的最新属性 */\n  nextAttrs?: any;\n  /** 是否初始化过，用于解决collection mark对应的item，可能跳过enter状态的问题 */\n  // hasEntered: boolean;\n}\nexport interface IElement {\n  mark: IMark;\n  isReserved: boolean;\n  diffState: DiffState;\n  key: string;\n  groupKey?: string;\n  data?: any[];\n  /**\n   * 不推荐使用，但是collection图元暂时可能回涉及到相关修改\n   */\n  items: MarkElementItem[];\n\n  initGraphicItem: (attrs?: any) => void;\n  updateGraphicItem: () => void;\n\n  getDatum: () => any;\n  getBounds: () => any;\n  getGraphicItem: () => IGraphic;\n  removeGraphicItem: () => void;\n  resetGraphicItem: () => void;\n\n  /**\n   * 获取 graphic 视觉通道属性\n   * @param channel 视觉通道\n   * @param prev 是否从之前的 graphic 属性上获取，默认为 false\n   * @returns 视觉通道值\n   */\n  getGraphicAttribute: (channel: string, prev?: boolean) => any;\n  /**\n   * 设置 graphic 视觉通道属性\n   * @param channel 视觉通道\n   * @param value 视觉通道属性\n   * @param final 是否更新 graphic 最终变更的视觉通道结果，默认为 false\n   */\n  setGraphicAttribute: (channel: string, value: any, final?: boolean) => void;\n  /**\n   * 设置一系列 graphic 视觉通道属性\n   * @param attributes 视觉通道键值对\n   * @param final 是否更新 graphic 最终变更的视觉通道结果，默认为 false\n   */\n  setGraphicAttributes: (attributes: { [channel: string]: any }, final?: boolean) => void;\n\n  /**\n   * 【慎重使用】获取 VGrammar 自身的视觉通道属性\n   * 只有在 'afterEncodeItems' 时机的mark transform中才能调用\n   */\n  getItemAttribute: (channel?: string) => any;\n  /**\n   * 【慎重使用】设置 VGrammar 自身的视觉通道\n   * 只有在 'afterEncodeItems' 时机的mark transform中才能调用\n   * @param attributes\n   * @returns\n   */\n  setItemAttributes: (attributes: { [channel: string]: any } | any[]) => void;\n\n  // element 执行流程相关接口\n  updateData: (groupKey: string, data: any[], keyGenerator: MarkKeySpec) => void;\n  state: (markState: MarkFunctionType<string | string[]>, parameters?: any) => void;\n  encodeItems: (items: MarkElementItem[], encoders: BaseEncodeSpec, isReentered?: boolean, parameters?: any) => void;\n  encodeGraphic: (attributes?: any) => void;\n  transformElementItems: (items: MarkElementItem[], markType: MarkType, computePoints?: boolean) => Record<string, any>;\n  remove: () => void;\n  release: () => void;\n\n  // 动画相关接口\n\n  getFinalGraphicAttributes: () => { [key: string]: any };\n  getPrevGraphicAttributes: () => { [key: string]: any };\n  getNextGraphicAttributes: () => { [key: string]: any };\n  clearChangedGraphicAttributes: () => void;\n  clearGraphicAttributes: () => void;\n\n  // state相关接口\n  getStates: () => string[];\n  hasState: (state: string) => boolean;\n  clearStates: (noAnimation?: boolean) => void;\n  addState: (state: string | string[], attrs?: any) => boolean;\n  removeState: (state: string | string[]) => boolean;\n  useStates: (states: string[], noAnimation?: boolean) => boolean;\n  updateStates: (states: Record<string, boolean | BaseSingleEncodeSpec>) => any;\n}\n\nexport interface IGlyphElement<P = any> extends IElement {\n  mark: IGlyphMark;\n\n  getGlyphGraphicItems: () => { [markName: string]: any };\n\n  getGraphicAttribute: (channel: string, prev?: boolean, markName?: any) => any;\n  setGraphicAttribute: (channel: string, value: any, final?: boolean, markName?: any) => void;\n  setGraphicAttributes: (attributes: { [channel: string]: any }, final?: boolean, markName?: any) => void;\n\n  getFinalGraphicAttributes: (markName?: string) => { [key: string]: any };\n  getPrevGraphicAttributes: (markName?: string) => { [key: string]: any };\n  getNextGraphicAttributes: (markName?: string) => { [key: string]: any };\n\n  encodeCustom: (nextAttrs?: any) => { [markName: string]: any };\n}\n"]}
+{"version":3,"sources":["../src/types/element.ts"],"names":[],"mappings":"","file":"element.js","sourcesContent":["import type {\n  IArc,\n  IArc3d,\n  IArea,\n  ICircle,\n  IGlyph,\n  IGraphic,\n  IGroup,\n  IImage,\n  ILine,\n  IPath,\n  IPolygon,\n  IPyramid3d,\n  IRect,\n  IRect3d,\n  IRichText,\n  ISymbol,\n  IText\n} from '@visactor/vrender-core';\nimport type { DiffState } from '../graph/enums';\nimport type { IMark, IGlyphMark } from './grammar';\nimport type {\n  BaseEncodeSpec,\n  BaseSingleEncodeSpec,\n  IMarkConfig,\n  MarkFunctionType,\n  MarkKeySpec,\n  MarkType\n} from './mark';\n\nexport interface ElementGraphicMap {\n  circle: ICircle;\n  arc: IArc;\n  area: IArea;\n  image: IImage;\n  line: ILine;\n  path: IPath;\n  rule: ILine;\n  shape: IPath;\n  symbol: ISymbol;\n  text: IText;\n  richtext: IRichText;\n  polygon: IPolygon;\n  cell: ISymbol;\n  interval: IGraphic;\n  rect: IRect;\n  rect3d: IRect3d;\n  arc3d: IArc3d;\n  pyramid3d: IPyramid3d;\n  group: IGroup;\n  glyph: IGlyph;\n  linkPath: IGlyph;\n  treePath: IGlyph;\n  wave: IGlyph;\n  ripplePoint: IGlyph;\n  barBoxplot: IGlyph;\n  boxPlot: IGlyph;\n  component: IGroup;\n  axis: IGroup;\n  legend: IGroup;\n  corsshair: IGroup;\n  slider: IGroup;\n  datazoom: IGroup;\n  label: IGroup;\n  player: IGroup;\n}\n\nexport type GetGraphicByType<T> = T extends keyof ElementGraphicMap ? ElementGraphicMap[T] : IGraphic;\n\n/**\n * 保存graphicItem状态\n */\nexport interface MarkElementItem {\n  /** 唯一key */\n  key: string;\n  /** 原始数据 */\n  datum: any;\n  /** VGrammar view */\n  view: any;\n  /** 当前渲染帧下graphicItem对应的最新属性 */\n  nextAttrs?: any;\n  /** 是否初始化过，用于解决collection mark对应的item，可能跳过enter状态的问题 */\n  // hasEntered: boolean;\n}\nexport interface IElement {\n  mark: IMark;\n  isReserved: boolean;\n  diffState: DiffState;\n  key: string;\n  groupKey?: string;\n  data?: any[];\n  /**\n   * 不推荐使用，但是collection图元暂时可能回涉及到相关修改\n   */\n  items: MarkElementItem[];\n\n  initGraphicItem: (attrs?: any) => void;\n  updateGraphicItem: () => void;\n\n  getDatum: () => any;\n  getBounds: () => any;\n  getGraphicItem: () => IGraphic;\n  removeGraphicItem: () => void;\n  resetGraphicItem: () => void;\n\n  /**\n   * 获取 graphic 视觉通道属性\n   * @param channel 视觉通道\n   * @param prev 是否从之前的 graphic 属性上获取，默认为 false\n   * @returns 视觉通道值\n   */\n  getGraphicAttribute: (channel: string, prev?: boolean) => any;\n  /**\n   * 设置 graphic 视觉通道属性\n   * @param channel 视觉通道\n   * @param value 视觉通道属性\n   * @param final 是否更新 graphic 最终变更的视觉通道结果，默认为 false\n   */\n  setGraphicAttribute: (channel: string, value: any, final?: boolean) => void;\n  /**\n   * 设置一系列 graphic 视觉通道属性\n   * @param attributes 视觉通道键值对\n   * @param final 是否更新 graphic 最终变更的视觉通道结果，默认为 false\n   */\n  setGraphicAttributes: (attributes: { [channel: string]: any }, final?: boolean) => void;\n\n  /**\n   * 【慎重使用】获取 VGrammar 自身的视觉通道属性\n   * 只有在 'afterEncodeItems' 时机的mark transform中才能调用\n   */\n  getItemAttribute: (channel?: string) => any;\n  /**\n   * 【慎重使用】设置 VGrammar 自身的视觉通道\n   * 只有在 'afterEncodeItems' 时机的mark transform中才能调用\n   * @param attributes\n   * @returns\n   */\n  setItemAttributes: (attributes: { [channel: string]: any } | any[]) => void;\n\n  // element 执行流程相关接口\n  updateData: (groupKey: string, data: any[], keyGenerator: MarkKeySpec, view: any) => void;\n  state: (markState: MarkFunctionType<string | string[]>, parameters?: any) => void;\n  encodeItems: (items: MarkElementItem[], encoders: BaseEncodeSpec, isReentered?: boolean, parameters?: any) => void;\n  encodeGraphic: (attributes?: any) => void;\n  transformElementItems: (items: MarkElementItem[], markType: MarkType, computePoints?: boolean) => Record<string, any>;\n  remove: () => void;\n  release: () => void;\n\n  // 动画相关接口\n\n  getFinalGraphicAttributes: () => { [key: string]: any };\n  getPrevGraphicAttributes: () => { [key: string]: any };\n  getNextGraphicAttributes: () => { [key: string]: any };\n  getFinalAnimationAttribute: (channel: string) => any;\n  getFinalAnimationAttributes: () => { [key: string]: any };\n  clearChangedGraphicAttributes: () => void;\n  clearGraphicAttributes: () => void;\n\n  // state相关接口\n  getStates: () => string[];\n  hasState: (state: string) => boolean;\n  clearStates: (noAnimation?: boolean) => void;\n  addState: (state: string | string[], attrs?: any) => boolean;\n  removeState: (state: string | string[]) => boolean;\n  useStates: (states: string[], noAnimation?: boolean) => boolean;\n  updateStates: (states: Record<string, boolean | BaseSingleEncodeSpec>) => any;\n}\n\nexport interface IGlyphElement<P = any> extends IElement {\n  mark: IGlyphMark;\n\n  getGlyphGraphicItems: () => { [markName: string]: any };\n\n  getGraphicAttribute: (channel: string, prev?: boolean, markName?: any) => any;\n  setGraphicAttribute: (channel: string, value: any, final?: boolean, markName?: any) => void;\n  setGraphicAttributes: (attributes: { [channel: string]: any }, final?: boolean, markName?: any) => void;\n\n  getFinalGraphicAttributes: (markName?: string) => { [key: string]: any };\n  getPrevGraphicAttributes: (markName?: string) => { [key: string]: any };\n  getNextGraphicAttributes: (markName?: string) => { [key: string]: any };\n\n  encodeCustom: (nextAttrs?: any) => { [markName: string]: any };\n}\n"]}

package/es/types/renderer.d.ts

@@ -1,5 +1,5 @@
 import type { IBoundsLike } from '@visactor/vutils';
-import type { IColor, IEventTarget, Stage } from '@visactor/vrender-core';
+import type { IColor, Stage } from '@visactor/vrender-core';
 import type { IViewEventConfig, IViewOptions } from './view';
 export interface IRenderer {
     initialize: (width: number, height: number, options: IViewOptions, eventConfig: IViewEventConfig) => this;
@@ -18,8 +18,3 @@ export interface IRenderer {
     toCanvas: () => HTMLCanvasElement;
     release: () => void;
 }
-export interface IStageEventPlugin<T> {
-    new (taget: IEventTarget, cfg?: T): {
-        release: () => void;
-    };
-}

package/es/types/renderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types/renderer.ts"],"names":[],"mappings":"","file":"renderer.js","sourcesContent":["import type { IBoundsLike } from '@visactor/vutils';\nimport type { IColor, IEventTarget, Stage } from '@visactor/vrender-core';\nimport type { IViewEventConfig, IViewOptions } from './view';\n\nexport interface IRenderer {\n  initialize: (width: number, height: number, options: IViewOptions, eventConfig: IViewEventConfig) => this;\n\n  render: (immediately?: boolean) => this;\n  renderNextFrame: () => this;\n  resize: (width: number, height: number) => this;\n  shouldResize: (width: number, height: number) => boolean;\n  combineIncrementalLayers: () => this;\n  preventRender: (tag: boolean) => void;\n\n  setDpr: (resolution: number, redraw: boolean) => this;\n  background: (color: IColor) => this;\n  setViewBox: (viewBox: IBoundsLike, rerender: boolean) => this;\n\n  stage: () => Stage;\n  canvas: () => HTMLCanvasElement;\n  context: () => CanvasRenderingContext2D;\n\n  toCanvas: () => HTMLCanvasElement;\n  // toImageData: () => Promise<ImageData | undefined>;\n\n  release: () => void;\n}\n\nexport interface IStageEventPlugin<T> {\n  new (taget: IEventTarget, cfg?: T): {\n    release: () => void;\n  };\n}\n"]}
+{"version":3,"sources":["../src/types/renderer.ts"],"names":[],"mappings":"","file":"renderer.js","sourcesContent":["import type { IBoundsLike } from '@visactor/vutils';\nimport type { IColor, Stage } from '@visactor/vrender-core';\nimport type { IViewEventConfig, IViewOptions } from './view';\n\nexport interface IRenderer {\n  initialize: (width: number, height: number, options: IViewOptions, eventConfig: IViewEventConfig) => this;\n\n  render: (immediately?: boolean) => this;\n  renderNextFrame: () => this;\n  resize: (width: number, height: number) => this;\n  shouldResize: (width: number, height: number) => boolean;\n  combineIncrementalLayers: () => this;\n  preventRender: (tag: boolean) => void;\n\n  setDpr: (resolution: number, redraw: boolean) => this;\n  background: (color: IColor) => this;\n  setViewBox: (viewBox: IBoundsLike, rerender: boolean) => this;\n\n  stage: () => Stage;\n  canvas: () => HTMLCanvasElement;\n  context: () => CanvasRenderingContext2D;\n\n  toCanvas: () => HTMLCanvasElement;\n  // toImageData: () => Promise<ImageData | undefined>;\n\n  release: () => void;\n}\n"]}

package/es/view/View.d.ts

@@ -2,7 +2,7 @@ import type { IBounds, ILogger } from '@visactor/vutils';
 import { EventEmitter } from '@visactor/vutils';
 import type { IColor } from '@visactor/vrender-core';
 import type { CoordinateType } from '@visactor/vgrammar-coordinate';
-import type { IData, ISignal, ViewSpec, IView, IViewOptions, IViewThemeConfig, Hooks, IMark, MarkType, GrammarScaleType, SignalFunctionType, IScale, IGrammarBase, IGroupMark, IGlyphMark, ICoordinate, BaseEventHandler, IRecordedGrammars, IComponent, IRunningConfig, IViewAnimate, ITheme, InteractionSpec, IInteraction } from '../types/';
+import type { IData, ISignal, ViewSpec, IView, IViewOptions, IViewThemeConfig, Hooks, IMark, EventSpec, MarkType, GrammarScaleType, SignalFunctionType, IScale, IGrammarBase, IGroupMark, IGlyphMark, ICoordinate, BaseEventHandler, IRecordedGrammars, IComponent, IRunningConfig, IViewAnimate, ITheme, InteractionSpec, IInteraction } from '../types/';
 import type { IRenderer } from '../types/renderer';
 import { LayoutState } from '../graph/enums';
 import type { IAxis, IDatazoom, IGrid, ILabel, ILegend, IPlayer, IScrollbar, ISlider, ITitle } from '../types/component';
@@ -28,6 +28,7 @@ export default class View extends EventEmitter implements IView {
     private _layoutState?;
     private _layoutMarks?;
     private _background?;
+    private _eventCache;
     private _progressiveMarks?;
     private _progressiveRafId?;
     private _observer;
@@ -121,10 +122,11 @@ export default class View extends EventEmitter implements IView {
     private _onResize;
     resize(width: number, height: number, render?: boolean): this;
     private _resizeRenderer;
+    private bindEvents;
+    event(eventSpec: EventSpec): void;
     interaction(type: string, spec: Partial<InteractionSpec>): IInteraction<any>;
     removeInteraction(type: string | IInteraction, id?: string): this;
     removeAllInteractions(): this;
-    initializeEventConfig(config: any): any;
     private initEvent;
     private releaseStageEvent;
     private delegateEvent;

package/es/view/View.js

@@ -1,9 +1,11 @@
-import { EventEmitter, debounce, isString, getContainerSize, Logger, array, isNil, isArray } from "@visactor/vutils";
+import { EventEmitter, debounce, isObject, isString, getContainerSize, Logger, array, isNil } from "@visactor/vutils";
 
 import { vglobal } from "@visactor/vrender-core";
 
 import { Data } from "./data";
 
+import { initializeEventConfig, permit, prevent } from "./events";
+
 import Dataflow from "./dataflow";
 
 import { traverseMarkTree } from "../graph/mark-tree";
@@ -14,13 +16,15 @@ import CanvasRenderer from "../graph/canvas-renderer";
 
 import getExtendedEvents from "../graph/util/events-extend";
 
-import { BROWSER, SIGNAL_WIDTH, SIGNAL_HEIGHT, SIGNAL_PADDING, SIGNAL_AUTOFIT, SIGNAL_VIEW_WIDTH, SIGNAL_VIEW_HEIGHT, EVENT_SOURCE_VIEW, SIGNAL_VIEW_BOX, ID_PREFIX, NAME_PREFIX, EVENT_SOURCE_WINDOW } from "./constants";
+import { BROWSER, NO_TRAP, SIGNAL_WIDTH, SIGNAL_HEIGHT, SIGNAL_PADDING, SIGNAL_AUTOFIT, SIGNAL_VIEW_WIDTH, SIGNAL_VIEW_HEIGHT, EVENT_SOURCE_VIEW, EVENT_SOURCE_WINDOW, SIGNAL_VIEW_BOX } from "./constants";
 
 import { Signal } from "./signal";
 
 import { BuiltInSignalID, builtInSignals, normalizeMarkTree, normalizeRunningConfig, normalizePadding } from "../parse/view";
 
-import { isGrammar } from "../parse/util";
+import { parseHandler, parseEventSelector, generateFilterByMark, ID_PREFIX, NAME_PREFIX } from "../parse/event";
+
+import { isGrammar, parseReference } from "../parse/util";
 
 import { configureEnvironment } from "../graph/util/env";
 
@@ -28,6 +32,10 @@ import { GroupMark } from "./group";
 
 import { Mark } from "./mark";
 
+import { defaultDoLayout } from "../graph/layout/layout";
+
+import { GlyphMark } from "./glyph";
+
 import { Morph } from "../graph/animation/morph";
 
 import { RecordedGrammars, RecordedTreeGrammars } from "./grammar-record";
@@ -146,8 +154,7 @@ export default class View extends EventEmitter {
             break;
 
           case GrammarMarkType.glyph:
-            const GlyphMark = Factory.getMark(GrammarMarkType.glyph);
-            GlyphMark && (mark = new GlyphMark(this, null == markOptions ? void 0 : markOptions.glyphType, groupMark));
+            mark = new GlyphMark(this, null == markOptions ? void 0 : markOptions.glyphType, groupMark);
             break;
 
           case GrammarMarkType.component:
@@ -281,8 +288,7 @@ export default class View extends EventEmitter {
         })), spec.marks && spec.marks.length && spec.marks.forEach((mark => {
             this.parseMarkSpec(mark);
         })), spec.events && spec.events.length && spec.events.forEach((eventConfig => {
-            var _b;
-            null === (_b = this.event) || void 0 === _b || _b.call(this, eventConfig);
+            this.event(eventConfig);
         })), spec.interactions && spec.interactions.length && spec.interactions.forEach((interaction => {
             this.interaction(interaction.type, interaction);
         })), !1 === spec.animation ? this.animate.disable() : this.animate.enable(), this.emit(HOOK_EVENT.AFTER_PARSE_VIEW), 
@@ -406,7 +412,7 @@ export default class View extends EventEmitter {
     }
     doLayout() {
         var _a;
-        const doLayout = this._options.doLayout || Factory.getDefaultLayout();
+        const doLayout = this._options.doLayout || defaultDoLayout;
         doLayout && (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && (this.emit(HOOK_EVENT.BEFORE_DO_LAYOUT), 
         doLayout(this._layoutMarks, this._options, this), this.emit(HOOK_EVENT.AFTER_DO_LAYOUT));
     }
@@ -562,6 +568,73 @@ export default class View extends EventEmitter {
             height: height
         }), !0);
     }
+    bindEvents(eventSpec) {
+        if (this._eventConfig.disable) return;
+        const {type: evtType, filter: filter, callback: callback, throttle: throttle, debounce: debounce, consume: consume, target: target, dependency: dependency} = eventSpec, eventSelector = parseEventSelector(evtType);
+        if (!eventSelector) return;
+        const {source: source, type: type} = eventSelector, markFilter = generateFilterByMark(eventSelector), validateSignals = (Array.isArray(target) && target.length ? target.map((entry => ({
+            signal: this.getSignalById(entry.target),
+            callback: entry.callback
+        }))) : [ {
+            signal: isString(target) ? this.getSignalById(target) : null,
+            callback: callback
+        } ]).filter((entry => entry.signal || entry.callback)), refs = parseReference(dependency, this), send = parseHandler(((evt, element) => {
+            const needPreventDefault = source === EVENT_SOURCE_VIEW && prevent(this._eventConfig, type) || consume && (void 0 === evt.cancelable || evt.cancelable);
+            source === EVENT_SOURCE_WINDOW && (evt = getExtendedEvents(this, evt, element, type, EVENT_SOURCE_WINDOW));
+            let hasCommitted = !1;
+            if ((!filter || filter(evt)) && (!markFilter || markFilter(element)) && validateSignals.length) {
+                const params = refs.reduce(((params, ref) => (params[ref.id()] = ref.output(), params)), {});
+                validateSignals.forEach((entry => {
+                    if (entry.callback && entry.signal) {
+                        entry.signal.set(entry.callback(evt, params)) && (this.commit(entry.signal), hasCommitted = !0);
+                    } else entry.callback ? entry.callback(evt, params) : (this.commit(entry.signal), 
+                    hasCommitted = !0);
+                }));
+            }
+            needPreventDefault && evt.preventDefault(), consume && evt.stopPropagation(), hasCommitted && this.run();
+        }), {
+            throttle: throttle,
+            debounce: debounce
+        });
+        if (source === EVENT_SOURCE_VIEW) {
+            if (permit(this._eventConfig, EVENT_SOURCE_VIEW, type)) return this.addEventListener(type, send, NO_TRAP), 
+            () => {
+                this.removeEventListener(type, send);
+            };
+        } else if (source === EVENT_SOURCE_WINDOW) return vglobal.addEventListener(type, send), 
+        this._eventListeners.push({
+            type: type,
+            source: vglobal,
+            handler: send
+        }), () => {
+            vglobal.removeEventListener(type, send);
+            const index = this._eventListeners.findIndex((entry => entry.type === type && entry.source === vglobal && entry.handler === send));
+            index >= 0 && this._eventListeners.splice(index, 1);
+        };
+    }
+    event(eventSpec) {
+        if ("between" in eventSpec) {
+            const [starEvent, endEvent] = eventSpec.between, id = `${starEvent.type}-${eventSpec.type}-${endEvent.type}`;
+            let unbindEndEvent;
+            this.bindEvents(Object.assign({}, starEvent, {
+                callback: () => {
+                    if (this._eventCache || (this._eventCache = {}), !this._eventCache[id]) {
+                        const unbindEvent = this.bindEvents(eventSpec);
+                        this._eventCache[id] = unbindEvent;
+                    }
+                    unbindEndEvent || (unbindEndEvent = this.bindEvents(Object.assign({}, endEvent, {
+                        callback: () => {
+                            this._eventCache[id] && (this._eventCache[id](), this._eventCache[id] = null);
+                        }
+                    })));
+                }
+            }));
+        } else "merge" in eventSpec ? eventSpec.merge.forEach((entry => {
+            const singleEvent = Object.assign({}, eventSpec);
+            isString(entry) ? singleEvent.type = entry : isObject(entry) && Object.assign(singleEvent, entry), 
+            singleEvent.debounce = 50, this.bindEvents(singleEvent);
+        })) : this.bindEvents(eventSpec);
+    }
     interaction(type, spec) {
         const interaction = Factory.createInteraction(type, this, spec);
         return interaction && (interaction.bind(), this._boundInteractions || (this._boundInteractions = []), 
@@ -584,17 +657,6 @@ export default class View extends EventEmitter {
             instance.unbind();
         })), this._boundInteractions = null), this;
     }
-    initializeEventConfig(config) {
-        const eventsConfig = Object.assign({
-            defaults: {}
-        }, config), unpack = (obj, keys) => {
-            keys.forEach((k => {
-                isArray(obj[k]) && (obj[k] = obj[k].reduce(((set, key) => (set[key] = !0, set)), {}));
-            }));
-        };
-        return unpack(eventsConfig.defaults, [ "prevent", "allow" ]), unpack(eventsConfig, [ EVENT_SOURCE_VIEW, EVENT_SOURCE_WINDOW ]), 
-        eventsConfig;
-    }
     initEvent() {
         const stage = this.renderer.stage();
         stage && stage.on("*", this.delegateEvent);
@@ -625,7 +687,7 @@ export default class View extends EventEmitter {
         this._options.hooks && (Object.keys(this._options.hooks).forEach((key => {
             this.on(key, this._options.hooks[key]);
         })), this.hooks = this._options.hooks), this.container = null, this.renderer = null, 
-        this._eventListeners = [], this._eventConfig = this.initializeEventConfig(this._options.eventConfig), 
+        this._eventListeners = [], this._eventConfig = initializeEventConfig(this._options.eventConfig), 
         this._theme = this._options.disableTheme ? null : ThemeManager.getDefaultTheme(), 
         this.parseBuiltIn(), configureEnvironment(this._options), this.initializeRenderer(), 
         this._eventConfig.disable || this.initEvent(), this._bindResizeEvent(), this._needBuildLayoutTree = !0,