@visactor/vgrammar-core 0.13.6 → 0.13.7-alpha.0

package/es/types/view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types/view.ts"],"names":[],"mappings":"","file":"view.js","sourcesContent":["import type { EventEmitter, IBounds, ILogger } from '@visactor/vutils';\nimport type { EnvType, IStage, IColor, IOption3D, ILayer, IStageParams } from '@visactor/vrender-core';\nimport type { CoordinateType } from '@visactor/vgrammar-coordinate';\nimport type { DataSpec } from './data';\nimport type { SignalFunctionType, SignalSpec } from './signal';\nimport type {\n  IData,\n  ISignal,\n  IScale,\n  IMark,\n  IGrammarBase,\n  ICoordinate,\n  IGlyphMark,\n  IGroupMark,\n  IComponent\n} from './grammar';\nimport type { ScaleSpec, GrammarScaleType } from './scale';\nimport type { MarkSpec, MarkType } from './mark';\nimport type { Hooks } from './hooks';\nimport type { ProjectionSpec } from './projection';\nimport type { BaseEventHandler, EventSpec } from './event';\nimport type { CommonPaddingSpec } from './base';\nimport type { IMorphAnimationConfig } from './morph';\nimport type { IBaseAnimate } from './animate';\nimport type { IRenderer } from './renderer';\nimport type { IAxis, IDatazoom, IGrid, ILabel, ILegend, IPlayer, IScrollbar, ISlider, ITitle } from './component';\nimport type { CoordinateSpec } from './coordinate';\nimport type { ITheme } from './theme';\nimport type { IInteraction, InteractionSpec } from './interaction';\n\nexport interface IViewThemeConfig {\n  labelMonospace?: boolean;\n}\n\n/**\n * 获取state相关配置\n */\nexport interface IViewStateOptions {\n  signals?: (name?: string, operator?: any) => boolean;\n  data?: (name?: string, object?: any) => boolean;\n  recurse?: boolean;\n}\n\nexport interface IEnvironmentOptions {\n  /** 环境参数 */\n  mode?: EnvType;\n  /**\n   * 环境带的配置\n   */\n  modeParams?: any;\n}\n\nexport interface IRendererOptions extends Partial<IStageParams> {\n  /** 非浏览器环境下，如小程序，需要传入经过包装的伪 canvas 实例 */\n  renderCanvas?: string | HTMLCanvasElement;\n  /** vRender stage */\n  stage?: IStage;\n  rendererTitle?: string;\n  /** vRender layer */\n  layer?: ILayer;\n}\n\nexport interface ILayoutOptions {\n  parseMarkBounds?: (bounds: IBounds, mark: IMark) => IBounds;\n  doLayout?: (marks: IMark[], options: ILayoutOptions, view: IView) => void;\n}\n\n/** 事件配置 */\nexport interface IViewEventConfig {\n  /**\n   * preventDefaults相关配置\n   */\n  defaults?: {\n    prevent?: boolean | Record<string, boolean>;\n    allow?: boolean | Record<string, boolean>;\n  };\n  /**\n   * whether permit events of view\n   */\n  view?: boolean | Record<string, boolean>;\n  /** disable all the events */\n  disable?: boolean;\n  /** use gesture events or not  */\n  gesture?: boolean;\n  /** use drag events or not */\n  drag?: boolean;\n}\n\nexport interface srIOption3DType extends IOption3D {\n  enable?: boolean;\n  /* 是否支持3d视角变换 */\n  enableView3dTranform?: boolean;\n}\nexport interface IViewOptions extends IEnvironmentOptions, IRendererOptions, ILayoutOptions {\n  width?: number;\n  height?: number;\n  padding?: CommonPaddingSpec;\n  autoFit?: boolean;\n\n  options3d?: srIOption3DType;\n  /** 外部传入的logger方法 */\n  logger?: ILogger;\n  /**\n   * 0 - None\n   * 1 - Error\n   * 2 - Warn\n   * 3 - Info\n   * 4 - Debug\n   */\n  logLevel?: number;\n\n  /** 生命周期等事件钩子 */\n  hooks?: Hooks;\n\n  /**\n   * 事件相关配置\n   * {\n   *    defaults: {\n   *      prevent: ['mousemove', 'mouseenter']\n   *    }\n   * }\n   */\n  eventConfig?: IViewEventConfig;\n  background?: IColor;\n  disableTheme?: boolean;\n}\n\nexport interface IRunningConfig {\n  /** whether enable reusing of grammar */\n  reuse?: boolean;\n  /** whether enable morph */\n  morph?: boolean;\n  /** force all marks to participate in morphing */\n  morphAll?: boolean;\n  /** morphing animation config */\n  animation?: IMorphAnimationConfig;\n  /** whether apply exit animations for released marks */\n  enableExitAnimation?: boolean;\n}\n\nexport interface IView {\n  readonly renderer: IRenderer;\n  readonly rootMark: IGroupMark;\n  readonly animate: IBaseAnimate;\n  readonly grammars: IRecordedGrammars;\n  readonly logger: ILogger;\n\n  // --- Grammar API ---\n  signal: <T>(value?: T, update?: SignalFunctionType<T>) => ISignal<T>;\n  data: (values?: any[]) => IData;\n  scale: (type: GrammarScaleType) => IScale;\n  coordinate: (type: CoordinateType) => ICoordinate;\n  mark: (\n    type: MarkType,\n    group: IGroupMark | string,\n    markOptions?: { glyphType?: string; componentType?: string; mode?: '2d' | '3d' }\n  ) => IMark;\n  group: (group: IGroupMark | string) => IGroupMark;\n  glyph: (glyphType: string, group: IGroupMark | string) => IGlyphMark;\n  component: (componentType: string, group: IGroupMark | string, mode?: '2d' | '3d') => IComponent;\n  axis: (group: IGroupMark | string, mode?: '2d' | '3d') => IAxis;\n  grid: (group: IGroupMark | string, mode?: '2d' | '3d') => IGrid;\n  legend: (group: IGroupMark | string) => ILegend;\n  slider: (group: IGroupMark | string) => ISlider;\n  label: (group: IGroupMark | string) => ILabel;\n  datazoom: (group: IGroupMark | string) => IDatazoom;\n  player: (group: IGroupMark | string) => IPlayer;\n  title: (group: IGroupMark | string) => ITitle;\n  scrollbar: (group: IGroupMark | string) => IScrollbar;\n\n  interaction: (type: string, spec: Partial<InteractionSpec>) => IInteraction;\n  removeInteraction: (type: string) => this;\n  removeAllInteractions: () => this;\n\n  addGrammar: (grammar: IGrammarBase) => this;\n  removeGrammar: (grammar: string | IGrammarBase) => this;\n  removeAllGrammars: () => this;\n  removeAllGraphicItems: () => this;\n\n  getGrammarById: (id: string) => IGrammarBase | null;\n  getCustomizedById: (id: string) => IGrammarBase | null;\n  getSignalById: <T>(id: string) => ISignal<T> | null;\n  getDataById: (id: string) => IData | null;\n  getScaleById: (id: string) => IScale | null;\n  getCoordinateById: (id: string) => ICoordinate | null;\n  getMarkById: (id: string) => IMark | null;\n  getGrammarsByName: (name: string) => IGrammarBase[];\n  getGrammarsByType: (grammarType: string) => IGrammarBase[];\n  getMarksByType: (markType: string) => IMark[];\n  getMarksByName: (name: string) => IMark[] | null;\n  getMarksBySelector: (selector: string | string[] | IMark | IMark[]) => IMark[] | null;\n\n  commit: (grammar: IGrammarBase) => this;\n\n  // --- Spec API ---\n  parseSpec: (spec: ViewSpec) => this;\n  updateSpec: (spec: ViewSpec) => this;\n\n  // --- Evaluate API ---\n  run: (runningConfig?: IRunningConfig) => this;\n  runBefore: (callback: (view: IView) => void) => this;\n  runAfter: (callback: (view: IView) => void) => this;\n\n  // --- Theme API ---\n  theme: (theme: ITheme | string) => this;\n  getCurrentTheme: () => ITheme;\n  setCurrentTheme: (theme: ITheme | string, render?: boolean) => this;\n\n  // --- Global Config API ---\n  background: (value?: IColor) => IColor;\n  width: (value?: number) => number;\n  height: (value?: number) => number;\n  viewWidth: (value?: number) => number;\n  viewHeight: (value?: number) => number;\n  padding: (p?: number | { left?: number; right?: number; top?: number; bottom?: number }) => {\n    left: number;\n    right: number;\n    top: number;\n    bottom: number;\n  };\n  getViewBox: () => IBounds;\n\n  // --- Event API ---\n  addEventListener: (type: string, handler: BaseEventHandler, options?: any) => this;\n  removeEventListener: (type: string, handler: BaseEventHandler) => this;\n\n  // --- Other API ---\n  emit: <T extends EventEmitter.EventNames<string | symbol>>(\n    event: T,\n    ...args: EventEmitter.EventArgs<string | symbol, T>\n  ) => boolean;\n\n  resize: (width: number, height: number, render?: boolean) => this;\n  traverseMarkTree: (apply: (mark: IMark) => any, filter?: (mark: IMark) => boolean, leafFirst?: boolean) => this;\n\n  getLayoutState: () => string;\n  updateLayoutTag: () => this;\n\n  pauseProgressive: () => boolean;\n  resumeProgressive: () => boolean;\n  restartProgressive: () => boolean;\n\n  release: () => void;\n  getImageBuffer: () => Buffer;\n}\n\nexport interface IViewConstructor {\n  new (options?: IViewOptions, config?: IViewThemeConfig): IView;\n}\n\nexport interface ViewSpec {\n  /** 梳理详细配置 */\n  theme?: string;\n  background?: IColor;\n  width?: number;\n  height?: number;\n  padding?: number | { left?: number; right?: number; top?: number; bottom?: number };\n  signals?: SignalSpec<any>[];\n  projections?: ProjectionSpec[];\n  data?: DataSpec[];\n  scales?: ScaleSpec[];\n  coordinates?: CoordinateSpec[];\n  marks?: MarkSpec[];\n  events?: EventSpec[];\n  interactions?: InteractionSpec[];\n  animation?: boolean;\n}\n\nexport interface IRecordedGrammars {\n  record: (grammar: IGrammarBase) => this;\n  unrecord: (grammar: IGrammarBase) => this;\n\n  size: () => number;\n\n  getSignal: <T>(key: string) => ISignal<T> | null;\n  getData: (key: string) => IData | null;\n  getScale: (key: string) => IScale | null;\n  getCoordinate: (key: string) => ICoordinate | null;\n  getMark: (key: string) => IMark | null;\n  getCustomized: (key: string) => IGrammarBase | null;\n  getGrammar: (key: string) => IGrammarBase | null;\n\n  getAllSignals: () => ISignal<any>[];\n  getAllData: () => IData[];\n  getAllScales: () => IScale[];\n  getAllCoordinates: () => ICoordinate[];\n  getAllMarks: () => IMark[];\n  getAllCustomized: () => IGrammarBase[];\n\n  clear: () => void;\n\n  traverse: (func: (grammar: IGrammarBase) => boolean | void) => void;\n  find: (func: (grammar: IGrammarBase) => boolean) => IGrammarBase | null;\n  filter: (func: (grammar: IGrammarBase) => boolean) => IGrammarBase[];\n\n  release: () => void;\n}\n\nexport interface IMarkTreeNode {\n  mark: IMark;\n  parent: IMarkTreeNode;\n  children: IMarkTreeNode[];\n}\n\nexport interface IRecordedTreeGrammars extends IRecordedGrammars {\n  getAllMarkNodes: () => IMarkTreeNode[];\n}\n"]}
+{"version":3,"sources":["../src/types/view.ts"],"names":[],"mappings":"","file":"view.js","sourcesContent":["import type { EventEmitter, IBounds, ILogger } from '@visactor/vutils';\nimport type { EnvType, IStage, IColor, IOption3D, ILayer, IStageParams } from '@visactor/vrender-core';\nimport type { CoordinateType } from '@visactor/vgrammar-coordinate';\nimport type { DataSpec } from './data';\nimport type { SignalFunctionType, SignalSpec } from './signal';\nimport type {\n  IData,\n  ISignal,\n  IScale,\n  IMark,\n  IGrammarBase,\n  ICoordinate,\n  IGlyphMark,\n  IGroupMark,\n  IComponent\n} from './grammar';\nimport type { ScaleSpec, GrammarScaleType } from './scale';\nimport type { MarkSpec, MarkType } from './mark';\nimport type { Hooks } from './hooks';\nimport type { ProjectionSpec } from './projection';\nimport type { BaseEventHandler, EventSpec } from './event';\nimport type { CommonPaddingSpec } from './base';\nimport type { IMorphAnimationConfig } from './morph';\nimport type { IBaseAnimate } from './animate';\nimport type { IRenderer } from './renderer';\nimport type { IAxis, IDatazoom, IGrid, ILabel, ILegend, IPlayer, IScrollbar, ISlider, ITitle } from './component';\nimport type { CoordinateSpec } from './coordinate';\nimport type { ITheme } from './theme';\nimport type { IInteraction, InteractionSpec } from './interaction';\nimport type { GestureConfig } from '@visactor/vrender-kits';\n\nexport interface IViewThemeConfig {\n  labelMonospace?: boolean;\n}\n\n/**\n * 获取state相关配置\n */\nexport interface IViewStateOptions {\n  signals?: (name?: string, operator?: any) => boolean;\n  data?: (name?: string, object?: any) => boolean;\n  recurse?: boolean;\n}\n\nexport interface IEnvironmentOptions {\n  /** 环境参数 */\n  mode?: EnvType;\n  /**\n   * 环境带的配置\n   */\n  modeParams?: any;\n}\n\nexport interface IRendererOptions extends Partial<IStageParams> {\n  /** 非浏览器环境下，如小程序，需要传入经过包装的伪 canvas 实例 */\n  renderCanvas?: string | HTMLCanvasElement;\n  /** vRender stage */\n  stage?: IStage;\n  rendererTitle?: string;\n  /** vRender layer */\n  layer?: ILayer;\n}\n\nexport interface ILayoutOptions {\n  parseMarkBounds?: (bounds: IBounds, mark: IMark) => IBounds;\n  doLayout?: (marks: IMark[], options: ILayoutOptions, view: IView) => void;\n}\n\n/** 事件配置 */\nexport interface IViewEventConfig {\n  /**\n   * preventDefaults相关配置\n   */\n  defaults?: {\n    prevent?: boolean | Record<string, boolean>;\n    allow?: boolean | Record<string, boolean>;\n  };\n  /**\n   * whether permit events of view\n   */\n  view?: boolean | Record<string, boolean>;\n  /** disable all the events */\n  disable?: boolean;\n  /** use gesture events or not  */\n  gesture?: boolean | GestureConfig;\n  /** use drag events or not */\n  drag?: boolean;\n  /**\n   * @since 0.15.2\n   * @default 200\n   * VRender 参数 ，单位 ms\n   * 多次点击之间的最大时间，默认为 200 ms，用于判断点击次数\n   */\n  clickInterval?: number;\n  /**\n   * @since 0.15.2\n   * @default false\n   * VRender 参数 是否自动阻止事件\n   */\n  autoPreventDefault?: boolean;\n}\n\nexport interface srIOption3DType extends IOption3D {\n  enable?: boolean;\n  /* 是否支持3d视角变换 */\n  enableView3dTranform?: boolean;\n}\nexport interface IViewOptions extends IEnvironmentOptions, IRendererOptions, ILayoutOptions {\n  width?: number;\n  height?: number;\n  padding?: CommonPaddingSpec;\n  autoFit?: boolean;\n\n  options3d?: srIOption3DType;\n  /** 外部传入的logger方法 */\n  logger?: ILogger;\n  /**\n   * 0 - None\n   * 1 - Error\n   * 2 - Warn\n   * 3 - Info\n   * 4 - Debug\n   */\n  logLevel?: number;\n\n  /** 生命周期等事件钩子 */\n  hooks?: Hooks;\n\n  /**\n   * 事件相关配置\n   * {\n   *    defaults: {\n   *      prevent: ['mousemove', 'mouseenter']\n   *    }\n   * }\n   */\n  eventConfig?: IViewEventConfig;\n  background?: IColor;\n  disableTheme?: boolean;\n}\n\nexport interface IRunningConfig {\n  /** whether enable reusing of grammar */\n  reuse?: boolean;\n  /** whether enable morph */\n  morph?: boolean;\n  /** force all marks to participate in morphing */\n  morphAll?: boolean;\n  /** morphing animation config */\n  animation?: IMorphAnimationConfig;\n  /** whether apply exit animations for released marks */\n  enableExitAnimation?: boolean;\n}\n\nexport interface IView {\n  readonly renderer: IRenderer;\n  readonly rootMark: IGroupMark;\n  readonly animate: IBaseAnimate;\n  readonly grammars: IRecordedGrammars;\n  readonly logger: ILogger;\n\n  // --- Grammar API ---\n  signal: <T>(value?: T, update?: SignalFunctionType<T>) => ISignal<T>;\n  data: (values?: any[]) => IData;\n  scale: (type: GrammarScaleType) => IScale;\n  coordinate: (type: CoordinateType) => ICoordinate;\n  mark: (\n    type: MarkType,\n    group: IGroupMark | string,\n    markOptions?: { glyphType?: string; componentType?: string; mode?: '2d' | '3d' }\n  ) => IMark;\n  group: (group: IGroupMark | string) => IGroupMark;\n  glyph: (glyphType: string, group: IGroupMark | string) => IGlyphMark;\n  component: (componentType: string, group: IGroupMark | string, mode?: '2d' | '3d') => IComponent;\n  axis: (group: IGroupMark | string, mode?: '2d' | '3d') => IAxis;\n  grid: (group: IGroupMark | string, mode?: '2d' | '3d') => IGrid;\n  legend: (group: IGroupMark | string) => ILegend;\n  slider: (group: IGroupMark | string) => ISlider;\n  label: (group: IGroupMark | string) => ILabel;\n  datazoom: (group: IGroupMark | string) => IDatazoom;\n  player: (group: IGroupMark | string) => IPlayer;\n  title: (group: IGroupMark | string) => ITitle;\n  scrollbar: (group: IGroupMark | string) => IScrollbar;\n\n  interaction: (type: string, spec: Partial<InteractionSpec>) => IInteraction;\n  removeInteraction: (type: string) => this;\n  removeAllInteractions: () => this;\n\n  addGrammar: (grammar: IGrammarBase) => this;\n  removeGrammar: (grammar: string | IGrammarBase) => this;\n  removeAllGrammars: () => this;\n  removeAllGraphicItems: () => this;\n\n  getGrammarById: (id: string) => IGrammarBase | null;\n  getCustomizedById: (id: string) => IGrammarBase | null;\n  getSignalById: <T>(id: string) => ISignal<T> | null;\n  getDataById: (id: string) => IData | null;\n  getScaleById: (id: string) => IScale | null;\n  getCoordinateById: (id: string) => ICoordinate | null;\n  getMarkById: (id: string) => IMark | null;\n  getGrammarsByName: (name: string) => IGrammarBase[];\n  getGrammarsByType: (grammarType: string) => IGrammarBase[];\n  getMarksByType: (markType: string) => IMark[];\n  getMarksByName: (name: string) => IMark[] | null;\n  getMarksBySelector: (selector: string | string[] | IMark | IMark[]) => IMark[] | null;\n\n  commit: (grammar: IGrammarBase) => this;\n\n  // --- Spec API ---\n  parseSpec: (spec: ViewSpec) => this;\n  updateSpec: (spec: ViewSpec) => this;\n\n  // --- Evaluate API ---\n  run: (runningConfig?: IRunningConfig) => this;\n  runBefore: (callback: (view: IView) => void) => this;\n  runAfter: (callback: (view: IView) => void) => this;\n\n  // --- Theme API ---\n  theme: (theme: ITheme | string) => this;\n  getCurrentTheme: () => ITheme;\n  setCurrentTheme: (theme: ITheme | string, render?: boolean) => this;\n\n  // --- Global Config API ---\n  background: (value?: IColor) => IColor;\n  width: (value?: number) => number;\n  height: (value?: number) => number;\n  viewWidth: (value?: number) => number;\n  viewHeight: (value?: number) => number;\n  padding: (p?: number | { left?: number; right?: number; top?: number; bottom?: number }) => {\n    left: number;\n    right: number;\n    top: number;\n    bottom: number;\n  };\n  getViewBox: () => IBounds;\n\n  // --- Event API ---\n  addEventListener: (type: string, handler: BaseEventHandler, options?: any) => this;\n  removeEventListener: (type: string, handler: BaseEventHandler) => this;\n\n  // --- Other API ---\n  emit: <T extends EventEmitter.EventNames<string | symbol>>(\n    event: T,\n    ...args: EventEmitter.EventArgs<string | symbol, T>\n  ) => boolean;\n\n  resize: (width: number, height: number, render?: boolean) => this;\n  traverseMarkTree: (apply: (mark: IMark) => any, filter?: (mark: IMark) => boolean, leafFirst?: boolean) => this;\n\n  getLayoutState: () => string;\n  updateLayoutTag: () => this;\n\n  pauseProgressive: () => boolean;\n  resumeProgressive: () => boolean;\n  restartProgressive: () => boolean;\n\n  release: () => void;\n  getImageBuffer: () => Buffer;\n}\n\nexport interface IViewConstructor {\n  new (options?: IViewOptions, config?: IViewThemeConfig): IView;\n}\n\nexport interface ViewSpec {\n  /** 梳理详细配置 */\n  theme?: string;\n  background?: IColor;\n  width?: number;\n  height?: number;\n  padding?: number | { left?: number; right?: number; top?: number; bottom?: number };\n  signals?: SignalSpec<any>[];\n  projections?: ProjectionSpec[];\n  data?: DataSpec[];\n  scales?: ScaleSpec[];\n  coordinates?: CoordinateSpec[];\n  marks?: MarkSpec[];\n  events?: EventSpec[];\n  interactions?: InteractionSpec[];\n  animation?: boolean;\n}\n\nexport interface IRecordedGrammars {\n  record: (grammar: IGrammarBase) => this;\n  unrecord: (grammar: IGrammarBase) => this;\n\n  size: () => number;\n\n  getSignal: <T>(key: string) => ISignal<T> | null;\n  getData: (key: string) => IData | null;\n  getScale: (key: string) => IScale | null;\n  getCoordinate: (key: string) => ICoordinate | null;\n  getMark: (key: string) => IMark | null;\n  getCustomized: (key: string) => IGrammarBase | null;\n  getGrammar: (key: string) => IGrammarBase | null;\n\n  getAllSignals: () => ISignal<any>[];\n  getAllData: () => IData[];\n  getAllScales: () => IScale[];\n  getAllCoordinates: () => ICoordinate[];\n  getAllMarks: () => IMark[];\n  getAllCustomized: () => IGrammarBase[];\n\n  clear: () => void;\n\n  traverse: (func: (grammar: IGrammarBase) => boolean | void) => void;\n  find: (func: (grammar: IGrammarBase) => boolean) => IGrammarBase | null;\n  filter: (func: (grammar: IGrammarBase) => boolean) => IGrammarBase[];\n\n  release: () => void;\n}\n\nexport interface IMarkTreeNode {\n  mark: IMark;\n  parent: IMarkTreeNode;\n  children: IMarkTreeNode[];\n}\n\nexport interface IRecordedTreeGrammars extends IRecordedGrammars {\n  getAllMarkNodes: () => IMarkTreeNode[];\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, EventSpec, 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, 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';
@@ -18,8 +18,7 @@ export default class View extends EventEmitter implements IView {
     private _config;
     private _options;
     private _cachedGrammars;
-    private _willMorphMarks;
-    private _morph;
+    private _differ;
     private _eventConfig;
     private _eventListeners;
     private _theme;
@@ -28,7 +27,6 @@ export default class View extends EventEmitter implements IView {
     private _layoutState?;
     private _layoutMarks?;
     private _background?;
-    private _eventCache;
     private _progressiveMarks?;
     private _progressiveRafId?;
     private _observer;
@@ -122,11 +120,10 @@ 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,30 +1,24 @@
-import { EventEmitter, debounce, isObject, isString, getContainerSize, Logger, array, isNil } from "@visactor/vutils";
+import { EventEmitter, debounce, isString, getContainerSize, Logger, array, isNil, isArray } 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";
 
-import { BridgeElementKey } from "../graph/constants";
-
 import CanvasRenderer from "../graph/canvas-renderer";
 
 import getExtendedEvents from "../graph/util/events-extend";
 
-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 { 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 { Signal } from "./signal";
 
 import { BuiltInSignalID, builtInSignals, normalizeMarkTree, normalizeRunningConfig, normalizePadding } from "../parse/view";
 
-import { parseHandler, parseEventSelector, generateFilterByMark, ID_PREFIX, NAME_PREFIX } from "../parse/event";
-
-import { isGrammar, parseReference } from "../parse/util";
+import { isGrammar } from "../parse/util";
 
 import { configureEnvironment } from "../graph/util/env";
 
@@ -32,16 +26,8 @@ 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";
 
-import { ViewAnimate } from "./animate";
-
 import { ComponentEnum, HOOK_EVENT, LayoutState, GrammarMarkType } from "../graph/enums";
 
 import { Text } from "../semantic-marks/text";
@@ -54,6 +40,8 @@ import { Component } from "./component";
 
 import { isMarkType, removeGraphicItem } from "../graph/util/graphic";
 
+import { ViewDiff } from "../graph/view-diff";
+
 export default class View extends EventEmitter {
     static useRegisters(comps) {
         comps.forEach((fn => {
@@ -65,9 +53,8 @@ export default class View extends EventEmitter {
             const size = this._getContainerSize();
             size && this.resize(size.width, size.height);
         }), 100), this.delegateEvent = (event, type) => {
-            var _a;
-            const activeElement = null === (_a = event.target) || void 0 === _a ? void 0 : _a[BridgeElementKey], extendedEvt = getExtendedEvents(this, event, activeElement, type, EVENT_SOURCE_VIEW);
-            this.emit(type, extendedEvt, activeElement);
+            const extendedEvt = getExtendedEvents(this, event, type, EVENT_SOURCE_VIEW);
+            this.emit(type, extendedEvt, event.element);
         }, this.handleProgressiveFrame = () => {
             this._progressiveMarks.length && this._progressiveMarks.forEach((mark => {
                 mark.isDoingProgressive() && mark.evaluateProgressive();
@@ -154,7 +141,8 @@ export default class View extends EventEmitter {
             break;
 
           case GrammarMarkType.glyph:
-            mark = new GlyphMark(this, null == markOptions ? void 0 : markOptions.glyphType, groupMark);
+            const GlyphMark = Factory.getMark(GrammarMarkType.glyph);
+            GlyphMark && (mark = new GlyphMark(this, null == markOptions ? void 0 : markOptions.glyphType, groupMark));
             break;
 
           case GrammarMarkType.component:
@@ -260,7 +248,7 @@ export default class View extends EventEmitter {
         })), this;
     }
     parseSpec(spec) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (this.emit(HOOK_EVENT.BEFORE_PARSE_VIEW), this._spec = spec, normalizeMarkTree(spec), 
         spec.theme ? this.theme(spec.theme) : this.theme(ThemeManager.getDefaultTheme()), 
         spec.width && this.width(spec.width), spec.height && this.height(spec.height), this.padding(null !== (_b = null !== (_a = spec.padding) && void 0 !== _a ? _a : this._options.padding) && void 0 !== _b ? _b : this._theme.padding), 
@@ -288,11 +276,13 @@ 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 => {
-            this.event(eventConfig);
+            var _b;
+            null === (_b = this.event) || void 0 === _b || _b.call(this, 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), 
-        this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before, this;
+        })), !1 === spec.animation ? null === (_g = this.animate) || void 0 === _g || _g.disable() : null === (_h = this.animate) || void 0 === _h || _h.enable(), 
+        this.emit(HOOK_EVENT.AFTER_PARSE_VIEW), this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before, 
+        this;
     }
     updateSpec(spec) {
         return this.removeAllInteractions(), this.removeAllGrammars(), this.parseSpec(spec);
@@ -412,7 +402,7 @@ export default class View extends EventEmitter {
     }
     doLayout() {
         var _a;
-        const doLayout = this._options.doLayout || defaultDoLayout;
+        const doLayout = this._options.doLayout || Factory.getDefaultLayout();
         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));
     }
@@ -435,11 +425,12 @@ export default class View extends EventEmitter {
         return this.evaluate(runningConfig), this;
     }
     doRender(immediately) {
-        this.emit(HOOK_EVENT.BEFORE_DO_RENDER), this.renderer && (this._progressiveMarks || this.animate.animate(), 
-        this.renderer.render(immediately), this.handleRenderEnd()), this.emit(HOOK_EVENT.AFTER_DO_RENDER);
+        this.emit(HOOK_EVENT.BEFORE_DO_RENDER), this.renderer && (!this._progressiveMarks && this.animate ? this.animate.animate() : this.traverseMarkTree((mark => {
+            mark.cleanExitElements();
+        }), null, !0), this.renderer.render(immediately), this.handleRenderEnd()), this.emit(HOOK_EVENT.AFTER_DO_RENDER);
     }
     evaluate(runningConfig) {
-        var _a, _b;
+        var _a, _c;
         const normalizedRunningConfig = normalizeRunningConfig(runningConfig), grammarWillDetach = this._cachedGrammars.size() > 0;
         grammarWillDetach && (this.reuseCachedGrammars(normalizedRunningConfig), this.detachCachedGrammar());
         const hasResize = this._resizeRenderer(), hasUpdate = this._dataflow.hasCommitted();
@@ -448,28 +439,28 @@ export default class View extends EventEmitter {
         this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, 
         this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, 
         this._dataflow.evaluate()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), 
-        this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach((morphMarks => {
-            this._morph.morph(morphMarks.prev, morphMarks.next, normalizedRunningConfig);
-        })), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), 
-        this.doRender(!0), this.doPreProgressive(), this) : this;
+        this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), null === (_c = this.morph) || void 0 === _c || _c.call(this, normalizedRunningConfig), 
+        this.releaseCachedGrammars(normalizedRunningConfig), this.doRender(!0), this.doPreProgressive(), 
+        this) : this;
     }
     reuseCachedGrammars(runningConfig) {
-        if (this._willMorphMarks || (this._willMorphMarks = []), runningConfig.reuse) {
+        if (runningConfig.reuse) {
             const reuseDiffUpdate = diff => {
                 diff.next.reuse(diff.prev), diff.prev.detachAll(), diff.prev.clear(), this._cachedGrammars.unrecord(diff.prev);
             };
-            this._morph.diffGrammar(this._cachedGrammars.getAllSignals(), this.grammars.getAllSignals().filter((signal => !BuiltInSignalID.includes(signal.id())))).update.forEach(reuseDiffUpdate);
-            this._morph.diffGrammar(this._cachedGrammars.getAllData(), this.grammars.getAllData()).update.forEach(reuseDiffUpdate);
-            this._morph.diffGrammar(this._cachedGrammars.getAllScales(), this.grammars.getAllScales()).update.forEach(reuseDiffUpdate);
-            this._morph.diffGrammar(this._cachedGrammars.getAllCoordinates(), this.grammars.getAllCoordinates()).update.forEach(reuseDiffUpdate);
+            this._differ.diffGrammar(this._cachedGrammars.getAllSignals(), this.grammars.getAllSignals().filter((signal => !BuiltInSignalID.includes(signal.id())))).update.forEach(reuseDiffUpdate);
+            this._differ.diffGrammar(this._cachedGrammars.getAllData(), this.grammars.getAllData()).update.forEach(reuseDiffUpdate);
+            this._differ.diffGrammar(this._cachedGrammars.getAllScales(), this.grammars.getAllScales()).update.forEach(reuseDiffUpdate);
+            this._differ.diffGrammar(this._cachedGrammars.getAllCoordinates(), this.grammars.getAllCoordinates()).update.forEach(reuseDiffUpdate);
         }
-        this._morph.diffMark(this._cachedGrammars.getAllMarks(), this.grammars.getAllMarks().filter((mark => "root" !== mark.id())), runningConfig).update.forEach((diff => {
+        this._differ.diffMark(this._cachedGrammars.getAllMarks(), this.grammars.getAllMarks().filter((mark => "root" !== mark.id())), runningConfig).update.forEach((diff => {
+            var _b;
             const matched = 1 === diff.prev.length && 1 === diff.next.length && diff.prev[0].markType === diff.next[0].markType, enableMarkMorphConfig = diff.prev.every((mark => mark.getMorphConfig().morph)) && diff.next.every((mark => mark.getMorphConfig().morph));
-            matched && runningConfig.reuse ? (diff.next[0].reuse(diff.prev[0]), diff.prev[0].detachAll(), 
-            diff.prev[0].clear(), this._cachedGrammars.unrecord(diff.prev[0])) : (runningConfig.morph && enableMarkMorphConfig || runningConfig.morphAll) && this._willMorphMarks.push({
+            this.morph && (runningConfig.morph && enableMarkMorphConfig || runningConfig.morphAll) ? null === (_b = this.addMorphMarks) || void 0 === _b || _b.call(this, {
                 prev: diff.prev,
                 next: diff.next
-            });
+            }) : matched && runningConfig.reuse && (diff.next[0].reuse(diff.prev[0]), diff.prev[0].detachAll(), 
+            diff.prev[0].clear(), this._cachedGrammars.unrecord(diff.prev[0]));
         }));
     }
     detachCachedGrammar() {
@@ -487,10 +478,11 @@ export default class View extends EventEmitter {
         }));
         const markNodes = this._cachedGrammars.getAllMarkNodes();
         markNodes.forEach((node => {
-            node.mark.animate.stop(), runningConfig.enableExitAnimation && this.animate.animateAddition(node.mark);
+            var _a;
+            null === (_a = node.mark.animate) || void 0 === _a || _a.stop(), runningConfig.enableExitAnimation && this.animate && this.animate.animateAddition(node.mark);
         }));
         const releaseUp = node => {
-            if (node.mark.view && 0 === node.mark.animate.getAnimatorCount() && (!node.children || 0 === node.children.length)) {
+            if (node.mark.view && (!node.mark.animate || 0 === node.mark.animate.getAnimatorCount()) && (!node.children || 0 === node.children.length)) {
                 node.mark.release();
                 const parent = node.parent;
                 parent && (node.parent.children = node.parent.children.filter((n => n !== node)), 
@@ -499,9 +491,9 @@ export default class View extends EventEmitter {
         };
         markNodes.forEach((node => {
             const mark = node.mark;
-            0 === mark.animate.getAnimatorCount() ? releaseUp(node) : mark.addEventListener("animationEnd", (() => {
-                0 === mark.animate.getAnimatorCount() && releaseUp(node);
-            }));
+            mark.animate && 0 !== mark.animate.getAnimatorCount() ? mark.addEventListener("animationEnd", (() => {
+                mark.animate && 0 === mark.animate.getAnimatorCount() && releaseUp(node);
+            })) : releaseUp(node);
         })), this._cachedGrammars.clear();
     }
     runAfter(callback) {
@@ -558,7 +550,9 @@ export default class View extends EventEmitter {
         let needDataflow = !1;
         return width !== this.width() && (needDataflow = !0, this.updateSignal(SIGNAL_WIDTH, width)), 
         height !== this.height() && (needDataflow = !0, this.updateSignal(SIGNAL_HEIGHT, height)), 
-        needDataflow && (render ? this.evaluate() : this._dataflow.evaluate()), this;
+        needDataflow && (render ? this.evaluate({
+            morph: !1
+        }) : this._dataflow.evaluate()), this;
     }
     _resizeRenderer() {
         const width = this.width(), height = this.height();
@@ -568,73 +562,6 @@ 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 = []), 
@@ -657,6 +584,17 @@ 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);
@@ -679,15 +617,15 @@ export default class View extends EventEmitter {
         this.renderer = new CanvasRenderer(this), this.renderer.initialize(width, height, this._options, this._eventConfig).background(this._background);
     }
     initialize() {
-        var _a;
+        var _a, _c;
         this.grammars = new RecordedGrammars((grammar => grammar.id()), ((key, grammar) => this.logger.warn(`Grammar id '${key}' has been occupied`, grammar))), 
         this._cachedGrammars = new RecordedTreeGrammars((grammar => grammar.id())), this._options.logger && Logger.setInstance(this._options.logger), 
         this.logger = Logger.getInstance(null !== (_a = this._options.logLevel) && void 0 !== _a ? _a : 0), 
-        this._dataflow = new Dataflow, this.animate = new ViewAnimate(this), this._morph = new Morph, 
-        this._options.hooks && (Object.keys(this._options.hooks).forEach((key => {
+        this._dataflow = new Dataflow, this.animate = null === (_c = this.initAnimate) || void 0 === _c ? void 0 : _c.call(this, this), 
+        this._differ = new ViewDiff, 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 = initializeEventConfig(this._options.eventConfig), 
+        this._eventListeners = [], this._eventConfig = this.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, 
@@ -714,7 +652,7 @@ export default class View extends EventEmitter {
         if (this._progressiveMarks && this._progressiveMarks.some((mark => mark.isDoingProgressive()))) {
             const raf = vglobal.getRequestAnimationFrame();
             this._progressiveRafId = raf(this.handleProgressiveFrame);
-        }
+        } else this._progressiveMarks && this.animate && this._progressiveMarks.every((mark => mark.canAnimateAfterProgressive())) ? this.animate.animate() : this._progressiveMarks && (this._progressiveMarks = null);
     }
     clearProgressive() {
         if (this._progressiveRafId) {
@@ -725,13 +663,14 @@ export default class View extends EventEmitter {
         })), this._progressiveMarks = null);
     }
     release() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.removeAllInteractions(), this.releaseStageEvent(), this._unBindResizeEvent(), 
         this.clearProgressive(), Factory.unregisterRuntimeTransforms(), Logger.setInstance(null), 
-        this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), 
-        this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), 
+        null === (_a = this.animate) || void 0 === _a || _a.stop(), this.grammars.release(), 
+        this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, 
+        null === (_c = null === (_b = this.renderer) || void 0 === _b ? void 0 : _b.release) || void 0 === _c || _c.call(_b), 
         this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), 
-        null === (_c = this._eventListeners) || void 0 === _c || _c.forEach((listener => {
+        null === (_d = this._eventListeners) || void 0 === _d || _d.forEach((listener => {
             listener.source.removeEventListener(listener.type, listener.handler);
         })), this._eventListeners = null;
     }