@visactor/vgrammar-core 0.7.7 → 0.8.0

package/cjs/types/renderer.d.ts

@@ -1,5 +1,5 @@
 import type { IBoundsLike } from '@visactor/vutils';
-import type { IColor, Stage } from '@visactor/vrender';
+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;

package/cjs/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, Stage } from '@visactor/vrender';\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\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"]}
+{"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\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/cjs/types/theme.d.ts

@@ -1,4 +1,4 @@
-import type { IColor } from '@visactor/vrender';
+import type { IColor } from '@visactor/vrender-core';
 import type { ArcLabelAttrs, BaseLabelAttrs, CircleAxisAttributes, CircleAxisGridAttributes, CircleCrosshairAttrs, ColorLegendAttributes, ContinuousPlayerAttributes, DataLabelAttrs, DataZoomAttributes, DiscreteLegendAttrs, DiscretePlayerAttributes, LineAxisAttributes, LineAxisGridAttributes, LineCrosshairAttrs, LineLabelAttrs, PolygonCrosshairAttrs, RectCrosshairAttrs, RectLabelAttrs, ScrollBarAttributes, SectorCrosshairAttrs, SizeLegendAttributes, SliderAttributes, SymbolLabelAttrs, TitleAttrs, TooltipAttributes } from '@visactor/vrender-components';
 import type { IPadding } from '@visactor/vutils';
 import type { RecursivePartial } from './base';

package/cjs/types/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types/theme.ts"],"names":[],"mappings":"","file":"theme.js","sourcesContent":["import type { IColor } from '@visactor/vrender';\nimport type {\n  ArcLabelAttrs,\n  BaseLabelAttrs,\n  CircleAxisAttributes,\n  CircleAxisGridAttributes,\n  CircleCrosshairAttrs,\n  ColorLegendAttributes,\n  ContinuousPlayerAttributes,\n  DataLabelAttrs,\n  DataZoomAttributes,\n  DiscreteLegendAttrs,\n  DiscretePlayerAttributes,\n  LineAxisAttributes,\n  LineAxisGridAttributes,\n  LineCrosshairAttrs,\n  LineLabelAttrs,\n  PolygonCrosshairAttrs,\n  RectCrosshairAttrs,\n  RectLabelAttrs,\n  ScrollBarAttributes,\n  SectorCrosshairAttrs,\n  SizeLegendAttributes,\n  SliderAttributes,\n  SymbolLabelAttrs,\n  TitleAttrs,\n  TooltipAttributes\n} from '@visactor/vrender-components';\nimport type { IPadding } from '@visactor/vutils';\nimport type { RecursivePartial } from './base';\nimport type { BasicEncoderSpecMap } from './mark';\n\n// glyph mark includes multiple types, not support theme for glyph for now\nexport type IMarkTheme = Partial<Omit<BasicEncoderSpecMap, 'glyph'>>;\n\nexport interface IComponentTheme {\n  axis?: RecursivePartial<LineAxisAttributes>;\n  circleAxis?: RecursivePartial<CircleAxisAttributes>;\n\n  grid?: RecursivePartial<LineAxisGridAttributes>;\n  circleGrid?: RecursivePartial<CircleAxisGridAttributes>;\n\n  discreteLegend?: RecursivePartial<DiscreteLegendAttrs>;\n  colorLegend?: RecursivePartial<ColorLegendAttributes>;\n  sizeLegend?: RecursivePartial<SizeLegendAttributes>;\n\n  lineCrosshair?: RecursivePartial<LineCrosshairAttrs>;\n  rectCrosshair?: RecursivePartial<RectCrosshairAttrs>;\n  sectorCrosshair?: RecursivePartial<SectorCrosshairAttrs>;\n  circleCrosshair?: RecursivePartial<CircleCrosshairAttrs>;\n  polygonCrosshair?: RecursivePartial<PolygonCrosshairAttrs>;\n\n  slider?: RecursivePartial<SliderAttributes>;\n\n  dataLabel?: RecursivePartial<DataLabelAttrs>;\n  lineLabel?: RecursivePartial<LineLabelAttrs>;\n  rectLabel?: RecursivePartial<RectLabelAttrs>;\n  arcLabel?: RecursivePartial<ArcLabelAttrs>;\n  symbolLabel?: RecursivePartial<SymbolLabelAttrs>;\n  pointLabel?: RecursivePartial<BaseLabelAttrs>;\n\n  datazoom?: RecursivePartial<DataZoomAttributes>;\n\n  continuousPlayer?: RecursivePartial<ContinuousPlayerAttributes>;\n  discretePlayer?: RecursivePartial<DiscretePlayerAttributes>;\n\n  tooltip?: RecursivePartial<TooltipAttributes>;\n\n  title?: RecursivePartial<TitleAttrs>;\n\n  scrollbar?: RecursivePartial<ScrollBarAttributes>;\n}\n\nexport interface ITheme {\n  name?: string;\n  background?: IColor;\n  padding?: IPadding | number;\n  palette?: Record<string, IColor[]>;\n  marks?: IMarkTheme;\n  components?: IComponentTheme;\n}\n"]}
+{"version":3,"sources":["../src/types/theme.ts"],"names":[],"mappings":"","file":"theme.js","sourcesContent":["import type { IColor } from '@visactor/vrender-core';\nimport type {\n  ArcLabelAttrs,\n  BaseLabelAttrs,\n  CircleAxisAttributes,\n  CircleAxisGridAttributes,\n  CircleCrosshairAttrs,\n  ColorLegendAttributes,\n  ContinuousPlayerAttributes,\n  DataLabelAttrs,\n  DataZoomAttributes,\n  DiscreteLegendAttrs,\n  DiscretePlayerAttributes,\n  LineAxisAttributes,\n  LineAxisGridAttributes,\n  LineCrosshairAttrs,\n  LineLabelAttrs,\n  PolygonCrosshairAttrs,\n  RectCrosshairAttrs,\n  RectLabelAttrs,\n  ScrollBarAttributes,\n  SectorCrosshairAttrs,\n  SizeLegendAttributes,\n  SliderAttributes,\n  SymbolLabelAttrs,\n  TitleAttrs,\n  TooltipAttributes\n} from '@visactor/vrender-components';\nimport type { IPadding } from '@visactor/vutils';\nimport type { RecursivePartial } from './base';\nimport type { BasicEncoderSpecMap } from './mark';\n\n// glyph mark includes multiple types, not support theme for glyph for now\nexport type IMarkTheme = Partial<Omit<BasicEncoderSpecMap, 'glyph'>>;\n\nexport interface IComponentTheme {\n  axis?: RecursivePartial<LineAxisAttributes>;\n  circleAxis?: RecursivePartial<CircleAxisAttributes>;\n\n  grid?: RecursivePartial<LineAxisGridAttributes>;\n  circleGrid?: RecursivePartial<CircleAxisGridAttributes>;\n\n  discreteLegend?: RecursivePartial<DiscreteLegendAttrs>;\n  colorLegend?: RecursivePartial<ColorLegendAttributes>;\n  sizeLegend?: RecursivePartial<SizeLegendAttributes>;\n\n  lineCrosshair?: RecursivePartial<LineCrosshairAttrs>;\n  rectCrosshair?: RecursivePartial<RectCrosshairAttrs>;\n  sectorCrosshair?: RecursivePartial<SectorCrosshairAttrs>;\n  circleCrosshair?: RecursivePartial<CircleCrosshairAttrs>;\n  polygonCrosshair?: RecursivePartial<PolygonCrosshairAttrs>;\n\n  slider?: RecursivePartial<SliderAttributes>;\n\n  dataLabel?: RecursivePartial<DataLabelAttrs>;\n  lineLabel?: RecursivePartial<LineLabelAttrs>;\n  rectLabel?: RecursivePartial<RectLabelAttrs>;\n  arcLabel?: RecursivePartial<ArcLabelAttrs>;\n  symbolLabel?: RecursivePartial<SymbolLabelAttrs>;\n  pointLabel?: RecursivePartial<BaseLabelAttrs>;\n\n  datazoom?: RecursivePartial<DataZoomAttributes>;\n\n  continuousPlayer?: RecursivePartial<ContinuousPlayerAttributes>;\n  discretePlayer?: RecursivePartial<DiscretePlayerAttributes>;\n\n  tooltip?: RecursivePartial<TooltipAttributes>;\n\n  title?: RecursivePartial<TitleAttrs>;\n\n  scrollbar?: RecursivePartial<ScrollBarAttributes>;\n}\n\nexport interface ITheme {\n  name?: string;\n  background?: IColor;\n  padding?: IPadding | number;\n  palette?: Record<string, IColor[]>;\n  marks?: IMarkTheme;\n  components?: IComponentTheme;\n}\n"]}

package/cjs/types/view.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import type { EventEmitter, IBounds, ILogger } from '@visactor/vutils';
-import type { EnvType, IStage, IColor, IOption3D, ILayer, IStageParams } from '@visactor/vrender';
+import type { EnvType, IStage, IColor, IOption3D, ILayer, IStageParams } from '@visactor/vrender-core';
 import type { CoordinateType } from '@visactor/vgrammar-coordinate';
 import type { DataSpec } from './data';
 import type { SignalFunctionType, SignalSpec } from './signal';
@@ -14,9 +14,10 @@ import type { CommonPaddingSpec } from './base';
 import type { IMorphAnimationConfig } from './morph';
 import type { IBaseAnimate } from './animate';
 import type { IRenderer } from './renderer';
-import type { IAxis, ICrosshair, IDatazoom, IDimensionTooltip, IGrid, ILabel, ILegend, IPlayer, IScrollbar, ISlider, ITitle, ITooltip } from './component';
+import type { IAxis, IDatazoom, IGrid, ILabel, ILegend, IPlayer, IScrollbar, ISlider, ITitle } from './component';
 import type { CoordinateSpec } from './coordinate';
 import type { ITheme } from './theme';
+import type { IInteraction, InteractionSpec } from './interaction';
 export interface IViewThemeConfig {
     labelMonospace?: boolean;
 }
@@ -41,15 +42,13 @@ export interface ILayoutOptions {
 }
 export interface IViewEventConfig {
     defaults?: {
-        prevent?: boolean | Record<string, boolean> | string[];
-        allow?: boolean | Record<string, boolean> | string[];
+        prevent?: boolean | Record<string, boolean>;
+        allow?: boolean | Record<string, boolean>;
     };
-    view?: boolean | Record<string, boolean> | string[];
-    window?: boolean | Record<string, boolean> | string[];
+    view?: boolean | Record<string, boolean>;
     disable?: boolean;
     gesture?: boolean;
     drag?: boolean;
-    globalCursor?: boolean;
 }
 export interface srIOption3DType extends IOption3D {
     enable?: boolean;
@@ -61,14 +60,11 @@ export interface IViewOptions extends IEnvironmentOptions, IRendererOptions, ILa
     padding?: CommonPaddingSpec;
     autoFit?: boolean;
     options3d?: srIOption3DType;
-    hover?: boolean;
-    select?: boolean;
-    cursor?: boolean;
     logger?: ILogger;
     logLevel?: number;
-    domBridge?: any;
     hooks?: Hooks;
     eventConfig?: IViewEventConfig;
+    background?: IColor;
 }
 export interface IRunningConfig {
     reuse?: boolean;
@@ -98,15 +94,15 @@ export interface IView {
     axis: (group: IGroupMark | string, mode?: '2d' | '3d') => IAxis;
     grid: (group: IGroupMark | string, mode?: '2d' | '3d') => IGrid;
     legend: (group: IGroupMark | string) => ILegend;
-    crosshair: (group: IGroupMark | string) => ICrosshair;
     slider: (group: IGroupMark | string) => ISlider;
     label: (group: IGroupMark | string) => ILabel;
     datazoom: (group: IGroupMark | string) => IDatazoom;
     player: (group: IGroupMark | string) => IPlayer;
-    tooltip: (group: IGroupMark | string) => ITooltip;
-    dimensionTooltip: (group: IGroupMark | string) => IDimensionTooltip;
     title: (group: IGroupMark | string) => ITitle;
     scrollbar: (group: IGroupMark | string) => IScrollbar;
+    interaction: (type: string, spec: Partial<InteractionSpec>) => IInteraction;
+    removeInteraction: (type: string) => this;
+    removeAllInteractions: () => this;
     addGrammar: (grammar: IGrammarBase) => this;
     removeGrammar: (grammar: string | IGrammarBase) => this;
     removeAllGrammars: () => this;
@@ -120,6 +116,8 @@ export interface IView {
     getGrammarsByName: (name: string) => IGrammarBase[];
     getGrammarsByType: (grammarType: string) => IGrammarBase[];
     getMarksByType: (markType: string) => IMark[];
+    getMarksByName: (name: string) => IMark[] | null;
+    getMarksBySelector: (selector: string | string[] | IMark | IMark[]) => IMark[] | null;
     commit: (grammar: IGrammarBase) => this;
     parseSpec: (spec: ViewSpec) => this;
     updateSpec: (spec: ViewSpec) => this;
@@ -183,6 +181,7 @@ export interface ViewSpec {
     coordinates?: CoordinateSpec[];
     marks?: MarkSpec[];
     events?: EventSpec[];
+    interactions?: InteractionSpec[];
 }
 export interface IRecordedGrammars {
     record: (grammar: IGrammarBase) => this;

package/cjs/types/view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types/view.ts"],"names":[],"mappings":"","file":"view.js","sourcesContent":["import type { EventEmitter, IBounds, IBoundsLike, ILogger } from '@visactor/vutils';\nimport type { EnvType, IStage, IColor, IOption3D, ILayer, IStageParams } from '@visactor/vrender';\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 {\n  IAxis,\n  ICrosshair,\n  IDatazoom,\n  IDimensionTooltip,\n  IGrid,\n  ILabel,\n  ILegend,\n  IPlayer,\n  IScrollbar,\n  ISlider,\n  ITitle,\n  ITooltip\n} from './component';\nimport type { CoordinateSpec } from './coordinate';\nimport type { ITheme } from './theme';\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> | string[];\n    allow?: boolean | Record<string, boolean> | string[];\n  };\n  view?: boolean | Record<string, boolean> | string[];\n  window?: boolean | Record<string, boolean> | string[];\n  disable?: boolean;\n  gesture?: boolean;\n  drag?: boolean;\n  globalCursor?: 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\n  /** 是否默认配置hover交互 */\n  hover?: boolean;\n  /** 是否开启选中交互 */\n  select?: boolean;\n\n  /** 是否启用 cursor 设置 */\n  cursor?: boolean;\n\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  /** worker 专用 */\n  domBridge?: any;\n\n  /** 生命周期等事件钩子 */\n  hooks?: Hooks;\n\n  /**\n   * 事件相关配置\n   * {\n   *    defaults: {\n   *      prevent: ['mousemove', 'mouseenter']\n   *    }\n   * }\n   */\n  eventConfig?: IViewEventConfig;\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  crosshair: (group: IGroupMark | string) => ICrosshair;\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  tooltip: (group: IGroupMark | string) => ITooltip;\n  dimensionTooltip: (group: IGroupMark | string) => IDimensionTooltip;\n  title: (group: IGroupMark | string) => ITitle;\n  scrollbar: (group: IGroupMark | string) => IScrollbar;\n\n  addGrammar: (grammar: IGrammarBase) => this;\n  removeGrammar: (grammar: string | IGrammarBase) => this;\n  removeAllGrammars: () => 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\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  runNextTick: (runningConfig?: IRunningConfig) => Promise<this>;\n  runAsync: (runningConfig?: IRunningConfig) => Promise<this>;\n  runSync: (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) => Promise<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) => Promise<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}\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';\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}\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\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  runNextTick: (runningConfig?: IRunningConfig) => Promise<this>;\n  runAsync: (runningConfig?: IRunningConfig) => Promise<this>;\n  runSync: (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) => Promise<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) => Promise<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}\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/cjs/util/scale.d.ts

@@ -0,0 +1,4 @@
+import type { IBaseScale } from '@visactor/vscale';
+export declare function isBandLikeScale(scale: IBaseScale): boolean;
+export declare function getBandWidthOfScale(scale: IBaseScale): number;
+export declare function getScaleRangeRatio(scale: IBaseScale, input: any): number;

package/cjs/util/scale.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.getScaleRangeRatio = exports.getBandWidthOfScale = exports.isBandLikeScale = void 0;
+
+const vscale_1 = require("@visactor/vscale");
+
+function isBandLikeScale(scale) {
+    return scale && (scale.type === vscale_1.ScaleEnum.Band || scale.type === vscale_1.ScaleEnum.Point);
+}
+
+function getBandWidthOfScale(scale) {
+    if (scale) return scale.type === vscale_1.ScaleEnum.Band ? scale.bandwidth() : scale.type === vscale_1.ScaleEnum.Point ? scale.step() : void 0;
+}
+
+function getScaleRangeRatio(scale, input) {
+    const range = scale.range();
+    return (scale.scale(input) - range[0]) / (range[range.length - 1] - range[0]);
+}
+
+exports.isBandLikeScale = isBandLikeScale, exports.getBandWidthOfScale = getBandWidthOfScale, 
+exports.getScaleRangeRatio = getScaleRangeRatio;
+//# sourceMappingURL=scale.js.map

package/cjs/util/scale.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/util/scale.ts"],"names":[],"mappings":";;;AAAA,6CAA6C;AAI7C,SAAgB,eAAe,CAAC,KAAiB;IAC/C,OAAO,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,kBAAS,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,kBAAS,CAAC,KAAK,CAAC,CAAC;AACpF,CAAC;AAFD,0CAEC;AAED,SAAgB,mBAAmB,CAAC,KAAiB;IACnD,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,KAAK,CAAC,IAAI,KAAK,kBAAS,CAAC,IAAI;QAClC,CAAC,CAAE,KAAwB,CAAC,SAAS,EAAE;QACvC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,kBAAS,CAAC,KAAK;YAChC,CAAC,CAAE,KAAwB,CAAC,IAAI,EAAE;YAClC,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC;AAVD,kDAUC;AAED,SAAgB,kBAAkB,CAAC,KAAiB,EAAE,KAAU;IAC9D,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAChF,CAAC;AAHD,gDAGC","file":"scale.js","sourcesContent":["import { ScaleEnum } from '@visactor/vscale';\n// eslint-disable-next-line no-duplicate-imports\nimport type { IBandLikeScale, IBaseScale } from '@visactor/vscale';\n\nexport function isBandLikeScale(scale: IBaseScale) {\n  return scale && (scale.type === ScaleEnum.Band || scale.type === ScaleEnum.Point);\n}\n\nexport function getBandWidthOfScale(scale: IBaseScale) {\n  if (!scale) {\n    return undefined;\n  }\n\n  return scale.type === ScaleEnum.Band\n    ? (scale as IBandLikeScale).bandwidth()\n    : scale.type === ScaleEnum.Point\n    ? (scale as IBandLikeScale).step()\n    : undefined;\n}\n\nexport function getScaleRangeRatio(scale: IBaseScale, input: any) {\n  const range = scale.range();\n  return (scale.scale(input) - range[0]) / (range[range.length - 1] - range[0]);\n}\n"]}

package/cjs/util/text.d.ts

@@ -1,4 +1,4 @@
-import type { IRichText, IRichTextCharacter } from '@visactor/vrender';
+import type { IRichText, IRichTextCharacter } from '@visactor/vrender-core';
 export declare function richXul(strings: TemplateStringsArray, ...insertVars: (string | number)[]): {
     type: string;
     text: IRichTextCharacter[];

package/cjs/util/text.js

@@ -4,19 +4,19 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.textHtml = exports.richJsx = exports.richXul = void 0;
 
-const vrender_1 = require("@visactor/vrender"), vutils_1 = require("@visactor/vutils");
+const vrender_core_1 = require("@visactor/vrender-core"), vutils_1 = require("@visactor/vutils");
 
 function richXul(strings, ...insertVars) {
     return {
         type: "rich",
-        text: (0, vrender_1.xul)(strings.reduce(((res, temp, i) => res + temp + (i >= insertVars.length ? "" : insertVars[i])), ""))
+        text: (0, vrender_core_1.xul)(strings.reduce(((res, temp, i) => res + temp + (i >= insertVars.length ? "" : insertVars[i])), ""))
     };
 }
 
 function richJsx(richText) {
     return {
         type: "rich",
-        text: richText instanceof vrender_1.RichText ? richText.attribute.textConfig : (0, 
+        text: richText instanceof vrender_core_1.RichText ? richText.attribute.textConfig : (0, 
         vutils_1.isArray)(richText) ? richText.map((entry => entry.type ? entry.attribute : entry)) : []
     };
 }

package/cjs/util/text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/util/text.ts"],"names":[],"mappings":";;;AACA,+CAAgE;AAChE,6CAA2C;AAE3C,SAAgB,OAAO,CAAC,OAA6B,EAAE,GAAG,UAA+B;IACvF,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,IAAA,aAAU,EACd,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;YAC9B,OAAO,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,CAAC,EAAE,EAAE,CAAC,CACP;KACF,CAAC;AACJ,CAAC;AATD,0BASC;AAED,SAAgB,OAAO,CACrB,QAA8F;IAE9F,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EACF,QAAQ,YAAY,kBAAQ;YAC1B,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,UAAU;YAC/B,CAAC,CAAC,IAAA,gBAAO,EAAC,QAAQ,CAAC;gBACnB,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;oBACnB,OAAQ,KAAyD,CAAC,IAAI;wBACpE,CAAC,CAAE,KAAyD,CAAC,SAAS;wBACtE,CAAC,CAAC,KAAK,CAAC;gBACZ,CAAC,CAAC;gBACJ,CAAC,CAAC,EAAE;KACT,CAAC;AACJ,CAAC;AAhBD,0BAgBC;AAED,SAAgB,QAAQ,CAAC,OAA6B,EAAE,GAAG,UAA+B;IACxF,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;YACpC,OAAO,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,CAAC,EAAE,EAAE,CAAC;KACP,CAAC;AACJ,CAAC;AAPD,4BAOC","file":"text.js","sourcesContent":["import type { IRichText, IRichTextCharacter } from '@visactor/vrender';\nimport { xul as vRenderXul, RichText } from '@visactor/vrender';\nimport { isArray } from '@visactor/vutils';\n\nexport function richXul(strings: TemplateStringsArray, ...insertVars: (string | number)[]) {\n  return {\n    type: 'rich',\n    text: vRenderXul(\n      strings.reduce((res, temp, i) => {\n        return res + temp + (i >= insertVars.length ? '' : insertVars[i]);\n      }, '')\n    )\n  };\n}\n\nexport function richJsx(\n  richText: IRichText | { attribute: IRichTextCharacter; type: string }[] | IRichTextCharacter[]\n) {\n  return {\n    type: 'rich',\n    text:\n      richText instanceof RichText\n        ? richText.attribute.textConfig\n        : isArray(richText)\n        ? richText.map(entry => {\n            return (entry as { attribute: IRichTextCharacter; type: string }).type\n              ? (entry as { attribute: IRichTextCharacter; type: string }).attribute\n              : entry;\n          })\n        : []\n  };\n}\n\nexport function textHtml(strings: TemplateStringsArray, ...insertVars: (string | number)[]) {\n  return {\n    type: 'html',\n    text: strings.reduce((res, temp, i) => {\n      return res + temp + (i >= insertVars.length ? '' : insertVars[i]);\n    }, '')\n  };\n}\n"]}
+{"version":3,"sources":["../src/util/text.ts"],"names":[],"mappings":";;;AACA,yDAAqE;AACrE,6CAA2C;AAE3C,SAAgB,OAAO,CAAC,OAA6B,EAAE,GAAG,UAA+B;IACvF,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,IAAA,kBAAU,EACd,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;YAC9B,OAAO,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,CAAC,EAAE,EAAE,CAAC,CACP;KACF,CAAC;AACJ,CAAC;AATD,0BASC;AAED,SAAgB,OAAO,CACrB,QAA8F;IAE9F,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EACF,QAAQ,YAAY,uBAAQ;YAC1B,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,UAAU;YAC/B,CAAC,CAAC,IAAA,gBAAO,EAAC,QAAQ,CAAC;gBACnB,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;oBACnB,OAAQ,KAAyD,CAAC,IAAI;wBACpE,CAAC,CAAE,KAAyD,CAAC,SAAS;wBACtE,CAAC,CAAC,KAAK,CAAC;gBACZ,CAAC,CAAC;gBACJ,CAAC,CAAC,EAAE;KACT,CAAC;AACJ,CAAC;AAhBD,0BAgBC;AAED,SAAgB,QAAQ,CAAC,OAA6B,EAAE,GAAG,UAA+B;IACxF,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;YACpC,OAAO,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACpE,CAAC,EAAE,EAAE,CAAC;KACP,CAAC;AACJ,CAAC;AAPD,4BAOC","file":"text.js","sourcesContent":["import type { IRichText, IRichTextCharacter } from '@visactor/vrender-core';\nimport { xul as vRenderXul, RichText } from '@visactor/vrender-core';\nimport { isArray } from '@visactor/vutils';\n\nexport function richXul(strings: TemplateStringsArray, ...insertVars: (string | number)[]) {\n  return {\n    type: 'rich',\n    text: vRenderXul(\n      strings.reduce((res, temp, i) => {\n        return res + temp + (i >= insertVars.length ? '' : insertVars[i]);\n      }, '')\n    )\n  };\n}\n\nexport function richJsx(\n  richText: IRichText | { attribute: IRichTextCharacter; type: string }[] | IRichTextCharacter[]\n) {\n  return {\n    type: 'rich',\n    text:\n      richText instanceof RichText\n        ? richText.attribute.textConfig\n        : isArray(richText)\n        ? richText.map(entry => {\n            return (entry as { attribute: IRichTextCharacter; type: string }).type\n              ? (entry as { attribute: IRichTextCharacter; type: string }).attribute\n              : entry;\n          })\n        : []\n  };\n}\n\nexport function textHtml(strings: TemplateStringsArray, ...insertVars: (string | number)[]) {\n  return {\n    type: 'html',\n    text: strings.reduce((res, temp, i) => {\n      return res + temp + (i >= insertVars.length ? '' : insertVars[i]);\n    }, '')\n  };\n}\n"]}

package/cjs/view/View.d.ts

@@ -1,11 +1,11 @@
 import type { IBounds, ILogger } from '@visactor/vutils';
 import { EventEmitter } from '@visactor/vutils';
-import type { IColor } from '@visactor/vrender';
+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 } 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, ICrosshair, IDatazoom, IDimensionTooltip, IGrid, ILabel, ILegend, IPlayer, IScrollbar, ISlider, ITitle, ITooltip } from '../types/component';
+import type { IAxis, IDatazoom, IGrid, ILabel, ILegend, IPlayer, IScrollbar, ISlider, ITitle } from '../types/component';
 export default class View extends EventEmitter implements IView {
     container: HTMLElement;
     renderer: IRenderer;
@@ -21,7 +21,6 @@ export default class View extends EventEmitter implements IView {
     private _willMorphMarks;
     private _morph;
     private _eventConfig;
-    private _globalCursor;
     private _eventListeners;
     private _theme;
     private _dataflow;
@@ -34,8 +33,8 @@ export default class View extends EventEmitter implements IView {
     private _eventCache;
     private _progressiveMarks?;
     private _progressiveRafId?;
-    private _cursorValue?;
     private _observer;
+    private _boundInteractions?;
     static useRegisters(comps: (() => void)[]): void;
     constructor(options?: IViewOptions, config?: IViewThemeConfig);
     getGrammarById(id: string): IGrammarBase;
@@ -48,6 +47,8 @@ export default class View extends EventEmitter implements IView {
     getGrammarsByName(name: string): IGrammarBase[];
     getGrammarsByType(grammarType: string): IGrammarBase[];
     getMarksByType(markType: string): IMark[];
+    getMarksByName(name: string): IMark[] | null;
+    getMarksBySelector(selector: string | string[] | IMark | IMark[]): IMark[] | null;
     private updateSignal;
     signal<T>(value?: T, update?: SignalFunctionType<T>): ISignal<T>;
     data(values?: any[]): IData;
@@ -64,13 +65,10 @@ export default class View extends EventEmitter implements IView {
     axis(group: IGroupMark | string, mode?: '2d' | '3d'): IAxis;
     grid(group: IGroupMark | string, mode?: '2d' | '3d'): IGrid;
     legend(group: IGroupMark | string): ILegend;
-    crosshair(group: IGroupMark | string): ICrosshair;
     slider(group: IGroupMark | string): ISlider;
     label(group: IGroupMark | string): ILabel;
     datazoom(group: IGroupMark | string): IDatazoom;
     player(group: IGroupMark | string): IPlayer;
-    tooltip(group: IGroupMark | string): ITooltip;
-    dimensionTooltip(group: IGroupMark | string): IDimensionTooltip;
     title(group: IGroupMark | string): ITitle;
     scrollbar(group: IGroupMark | string): IScrollbar;
     customized(type: string, spec: any): IGrammarBase;
@@ -132,16 +130,14 @@ export default class View extends EventEmitter implements IView {
     private _resizeRenderer;
     private bindEvents;
     event(eventSpec: EventSpec): void;
-    private hover;
-    cursor(): void;
+    interaction(type: string, spec: Partial<InteractionSpec>): IInteraction;
+    removeInteraction(type: string | IInteraction): this;
+    removeAllInteractions(): this;
     private initEvent;
     private delegateEvent;
     addEventListener(type: string, handler: BaseEventHandler, options?: any): this;
     removeEventListener(type: string, handler?: BaseEventHandler): this;
-    private setCursor;
-    globalCursor(_?: boolean): string | boolean | this;
     private initializeRenderer;
-    private initializeBuiltEvents;
     private initialize;
     normalBrowserEnv(): boolean;
     pauseProgressive(): boolean;

package/cjs/view/View.js

@@ -34,7 +34,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 });
 
-const vutils_1 = require("@visactor/vutils"), vrender_1 = require("@visactor/vrender"), data_1 = require("./data"), events_1 = require("./events"), dataflow_1 = __importDefault(require("./dataflow")), mark_tree_1 = require("../graph/mark-tree"), constants_1 = require("../graph/constants"), canvas_renderer_1 = __importDefault(require("../graph/canvas-renderer")), events_extend_1 = __importDefault(require("../graph/util/events-extend")), constants_2 = require("./constants"), signal_1 = require("./signal"), scale_1 = require("./scale"), view_1 = require("../parse/view"), event_1 = require("../parse/event"), util_1 = require("../parse/util"), env_1 = require("../graph/util/env"), group_1 = require("./group"), mark_1 = require("./mark"), layout_1 = require("../graph/layout/layout"), glyph_1 = require("./glyph"), coordinate_1 = require("./coordinate"), morph_1 = require("../graph/animation/morph"), grammar_record_1 = require("./grammar-record"), animate_1 = require("./animate"), enums_1 = require("../graph/enums"), interval_1 = require("../semantic-marks/interval"), cell_1 = require("../semantic-marks/cell"), text_1 = require("../semantic-marks/text"), theme_manager_1 = require("../theme/theme-manager"), factory_1 = require("../core/factory"), component_1 = require("./component");
+const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visactor/vrender-core"), data_1 = require("./data"), events_1 = require("./events"), dataflow_1 = __importDefault(require("./dataflow")), mark_tree_1 = require("../graph/mark-tree"), constants_1 = require("../graph/constants"), canvas_renderer_1 = __importDefault(require("../graph/canvas-renderer")), events_extend_1 = __importDefault(require("../graph/util/events-extend")), constants_2 = require("./constants"), signal_1 = require("./signal"), scale_1 = require("./scale"), view_1 = require("../parse/view"), event_1 = require("../parse/event"), util_1 = require("../parse/util"), env_1 = require("../graph/util/env"), group_1 = require("./group"), mark_1 = require("./mark"), layout_1 = require("../graph/layout/layout"), glyph_1 = require("./glyph"), coordinate_1 = require("./coordinate"), morph_1 = require("../graph/animation/morph"), grammar_record_1 = require("./grammar-record"), animate_1 = require("./animate"), enums_1 = require("../graph/enums"), interval_1 = require("../semantic-marks/interval"), cell_1 = require("../semantic-marks/cell"), text_1 = require("../semantic-marks/text"), theme_manager_1 = require("../theme/theme-manager"), factory_1 = require("../core/factory"), component_1 = require("./component"), graphic_1 = require("../graph/util/graphic");
 
 class View extends vutils_1.EventEmitter {
     static useRegisters(comps) {
@@ -56,8 +56,7 @@ class View extends vutils_1.EventEmitter {
                 mark.isDoingProgressive() && mark.evaluateProgressive();
             })), this.doPreProgressive();
         }, this._config = config, this._options = Object.assign({
-            mode: constants_2.BROWSER,
-            cursor: !0
+            mode: constants_2.BROWSER
         }, options), this.initialize();
     }
     getGrammarById(id) {
@@ -90,6 +89,19 @@ class View extends vutils_1.EventEmitter {
     getMarksByType(markType) {
         return this.grammars.getAllMarks().filter((mark => mark.markType === markType));
     }
+    getMarksByName(name) {
+        return this.grammars.getAllMarks().filter((mark => mark.name() === name));
+    }
+    getMarksBySelector(selector) {
+        if (!selector) return null;
+        const selectors = (0, vutils_1.array)(selector);
+        let res = [];
+        return selectors.forEach((selectorStr => {
+            (0, util_1.isGrammar)(selectorStr) ? res = res.concat(selectorStr) : (selectorStr[0] === event_1.ID_PREFIX && (res = res.concat(this.getMarkById(selectorStr.slice(1)))), 
+            selectorStr[0] === event_1.NAME_PREFIX && (res = res.concat(this.getMarksByName(selectorStr.slice(1)))), 
+            (0, graphic_1.isMarkType)(selectorStr) && (res = res.concat(this.getMarksByType(selectorStr))));
+        })), res;
+    }
     updateSignal(signal, value) {
         (0, vutils_1.isString)(signal) && (signal = this.getSignalById(signal)), signal.set(value), 
         this.commit(signal);
@@ -175,11 +187,6 @@ class View extends vutils_1.EventEmitter {
             componentType: enums_1.ComponentEnum.legend
         });
     }
-    crosshair(group) {
-        return this.mark(enums_1.GrammarMarkType.component, group, {
-            componentType: enums_1.ComponentEnum.crosshair
-        });
-    }
     slider(group) {
         return this.mark(enums_1.GrammarMarkType.component, group, {
             componentType: enums_1.ComponentEnum.slider
@@ -200,16 +207,6 @@ class View extends vutils_1.EventEmitter {
             componentType: enums_1.ComponentEnum.player
         });
     }
-    tooltip(group) {
-        return this.mark(enums_1.GrammarMarkType.component, group, {
-            componentType: enums_1.ComponentEnum.tooltip
-        });
-    }
-    dimensionTooltip(group) {
-        return this.mark(enums_1.GrammarMarkType.component, group, {
-            componentType: enums_1.ComponentEnum.dimensionTooltip
-        });
-    }
     title(group) {
         return this.mark(enums_1.GrammarMarkType.component, group, {
             componentType: enums_1.ComponentEnum.title
@@ -242,7 +239,7 @@ class View extends vutils_1.EventEmitter {
         })), this;
     }
     parseSpec(spec) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (this.emit(enums_1.HOOK_EVENT.BEFORE_PARSE_VIEW), this._spec = spec, (0, view_1.normalizeMarkTree)(spec), 
         spec.theme ? this.theme(spec.theme) : this.theme(theme_manager_1.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), 
@@ -270,11 +267,13 @@ class View extends vutils_1.EventEmitter {
             this.parseMarkSpec(mark);
         })), (null === (_h = spec.events) || void 0 === _h ? void 0 : _h.length) && spec.events.forEach((eventConfig => {
             this.event(eventConfig);
+        })), (null === (_j = spec.interactions) || void 0 === _j ? void 0 : _j.length) && spec.interactions.forEach((interaction => {
+            this.interaction(interaction.type, interaction);
         })), this.emit(enums_1.HOOK_EVENT.AFTER_PARSE_VIEW), this._needBuildLayoutTree = !0, 
         this._layoutState = enums_1.LayoutState.before, this;
     }
     updateSpec(spec) {
-        return this.removeAllGrammars(), this.parseSpec(spec);
+        return this.removeAllInteractions(), this.removeAllGrammars(), this.parseSpec(spec);
     }
     parseBuiltIn() {
         (0, view_1.builtInSignals)(this._options, this._config, this.getCurrentTheme()).map((signalSpec => {
@@ -635,14 +634,14 @@ class View extends vutils_1.EventEmitter {
             () => {
                 this.removeEventListener(type, send);
             };
-        } else if (source === constants_2.EVENT_SOURCE_WINDOW) return vrender_1.vglobal.addEventListener(type, send), 
+        } else if (source === constants_2.EVENT_SOURCE_WINDOW) return vrender_core_1.vglobal.addEventListener(type, send), 
         this._eventListeners.push({
             type: type,
-            source: vrender_1.vglobal,
+            source: vrender_core_1.vglobal,
             handler: send
         }), () => {
-            vrender_1.vglobal.removeEventListener(type, send);
-            const index = this._eventListeners.findIndex((entry => entry.type === type && entry.source === vrender_1.vglobal && entry.handler === send));
+            vrender_core_1.vglobal.removeEventListener(type, send);
+            const index = this._eventListeners.findIndex((entry => entry.type === type && entry.source === vrender_core_1.vglobal && entry.handler === send));
             index >= 0 && this._eventListeners.splice(index, 1);
         };
     }
@@ -669,30 +668,24 @@ class View extends vutils_1.EventEmitter {
             singleEvent.debounce = 50, this.bindEvents(singleEvent);
         })) : this.bindEvents(eventSpec);
     }
-    hover(hoverState) {
-        const state = hoverState || constants_2.DEFAULT_HOVER_STATE;
-        return this.addEventListener("pointerover", (evt => {
-            if (!evt.element) return;
-            evt.element.addState(state);
-        })), this.addEventListener("pointerout", (evt => {
-            if (!evt.element) return;
-            evt.element.removeState(state);
-        })), this;
+    interaction(type, spec) {
+        const interaction = factory_1.Factory.createInteraction(type, this, spec);
+        return interaction && (interaction.bind(), this._boundInteractions || (this._boundInteractions = []), 
+        this._boundInteractions.push(interaction)), interaction;
     }
-    cursor() {
-        this._cursorValue = {
-            user: constants_2.CURSOR_DEFAULT,
-            element: null
-        }, this.addEventListener("mousemove", (evt => {
-            var _a, _b, _c;
-            const elementCursor = null === (_b = null === (_a = null == evt ? void 0 : evt.element) || void 0 === _a ? void 0 : _a.graphicItem) || void 0 === _b ? void 0 : _b.cursor, value = this._cursorValue, user = value ? (0, 
-            vutils_1.isString)(value) ? value : value.user : constants_2.CURSOR_DEFAULT, nextValue = value && user === value.user && (elementCursor === value.element || (0, 
-            vutils_1.isNil)(elementCursor) && (0, vutils_1.isNil)(value.element)) ? value : {
-                user: user,
-                element: elementCursor
-            };
-            nextValue !== value && (this._cursorValue = nextValue, this.setCursor(nextValue.user && nextValue.user !== constants_2.CURSOR_DEFAULT ? nextValue.user : null !== (_c = nextValue.element) && void 0 !== _c ? _c : nextValue.user));
-        }));
+    removeInteraction(type) {
+        if (this._boundInteractions) {
+            const instances = this._boundInteractions.filter((interaction => (0, vutils_1.isString)(type) && interaction.type === type || interaction === type));
+            instances.length && instances.forEach((instance => {
+                instance.unbind();
+            }));
+        }
+        return this;
+    }
+    removeAllInteractions() {
+        return this._boundInteractions && (this._boundInteractions.forEach((instance => {
+            instance.unbind();
+        })), this._boundInteractions = null), this;
     }
     initEvent() {
         const stage = this.renderer.stage();
@@ -707,28 +700,10 @@ class View extends vutils_1.EventEmitter {
     removeEventListener(type, handler) {
         return handler ? this.off(type, handler) : this.off(type), this;
     }
-    setCursor(cursor) {
-        if (this._options.domBridge && this._options.domBridge.setCursor) return void this._options.domBridge.setCursor(cursor);
-        const el = this.globalCursor() ? !(0, vutils_1.isNil)(document) && document.body : this.container;
-        return el ? (0, vutils_1.isNil)(cursor) ? el.style.removeProperty("cursor") : el.style.cursor = cursor : void 0;
-    }
-    globalCursor(_) {
-        if (arguments.length) {
-            if (this._globalCursor !== !!_) {
-                const prev = this.setCursor(null);
-                this._globalCursor = !!_, prev && this.setCursor(prev);
-            }
-            return this;
-        }
-        return this._globalCursor;
-    }
     initializeRenderer() {
         const width = this._options.width, height = this._options.height;
         this.renderer = new canvas_renderer_1.default(this), this.renderer.initialize(width, height, this._options, this._eventConfig).background(this._background);
     }
-    initializeBuiltEvents() {
-        this._options.cursor && this.cursor(), this._options.hover && this.hover(), this._bindResizeEvent();
-    }
     initialize() {
         var _a;
         this.grammars = new grammar_record_1.RecordedGrammars((grammar => grammar.id()), ((key, grammar) => this.logger.warn(`Grammar id '${key}' has been occupied`, grammar))), 
@@ -739,12 +714,11 @@ class View extends vutils_1.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._globalCursor = !1, this._eventListeners = [], this._eventConfig = (0, events_1.initializeEventConfig)(this._options.eventConfig), 
-        this.globalCursor(this._eventConfig.globalCursor), this._theme = theme_manager_1.ThemeManager.getDefaultTheme(), 
-        this.parseBuiltIn(), (0, env_1.configureEnvironment)(this._options), this.initializeRenderer(), 
-        this._eventConfig.disable || this.initEvent(), this.initializeBuiltEvents(), this._currentDataflow = null, 
-        this._needBuildLayoutTree = !0, this._layoutState = enums_1.LayoutState.before, 
-        this.theme(this._theme);
+        this._eventListeners = [], this._eventConfig = (0, events_1.initializeEventConfig)(this._options.eventConfig), 
+        this._theme = theme_manager_1.ThemeManager.getDefaultTheme(), this.parseBuiltIn(), 
+        (0, env_1.configureEnvironment)(this._options), this.initializeRenderer(), this._eventConfig.disable || this.initEvent(), 
+        this._bindResizeEvent(), this._currentDataflow = null, this._needBuildLayoutTree = !0, 
+        this._layoutState = enums_1.LayoutState.before, this.theme(this._theme);
     }
     normalBrowserEnv() {
         return "browser" === this._options.mode;
@@ -768,13 +742,13 @@ class View extends vutils_1.EventEmitter {
     }
     doPreProgressive() {
         if (this._progressiveMarks && this._progressiveMarks.some((mark => mark.isDoingProgressive()))) {
-            const raf = vrender_1.vglobal.getRequestAnimationFrame();
+            const raf = vrender_core_1.vglobal.getRequestAnimationFrame();
             this._progressiveRafId = raf(this.handleProgressiveFrame);
         }
     }
     clearProgressive() {
         if (this._progressiveRafId) {
-            vrender_1.vglobal.getCancelAnimationFrame()(this._progressiveRafId);
+            vrender_core_1.vglobal.getCancelAnimationFrame()(this._progressiveRafId);
         }
         this._progressiveMarks && this._progressiveMarks.length && (this._progressiveMarks.forEach((entry => {
             entry.clearProgressive();
@@ -785,7 +759,8 @@ class View extends vutils_1.EventEmitter {
         this._unBindResizeEvent(), this.clearProgressive(), factory_1.Factory.unregisterRuntimeTransforms(), 
         this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow = null, 
         null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), 
-        this.renderer = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach((listener => {
+        this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), 
+        null === (_c = this._eventListeners) || void 0 === _c || _c.forEach((listener => {
             listener.source.removeEventListener(listener.type, listener.handler);
         })), this._eventListeners = null;
     }