@visactor/vgrammar-core 0.7.0

package/es/graph/canvas-renderer.js

@@ -0,0 +1,115 @@
+import { isObject } from "@visactor/vutils";
+
+import { createStage, DragNDrop, Gesture, waitForAllSubLayers } from "@visactor/vrender";
+
+import { HOOK_EVENT } from "./enums";
+
+export default class CanvasRenderer {
+    constructor(view) {
+        this.handleAfterNextRender = () => {
+            this._stage && !this._viewOptions.disableDirtyBounds && this._stage.enableDirtyBounds(), 
+            this._view.emit(HOOK_EVENT.AFTER_VRENDER_DRAW), this._view.emit(HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER);
+        }, this._view = view;
+    }
+    initialize(width, height, options, eventConfig) {
+        return this._width = width, this._height = height, this._viewOptions = options, 
+        this._eventConfig = eventConfig, this.initStage(), this;
+    }
+    stage() {
+        var _a;
+        return null !== (_a = this._stage) && void 0 !== _a ? _a : null;
+    }
+    canvas() {
+        return this._stage ? this._stage.window.getNativeHandler().nativeCanvas : null;
+    }
+    context() {
+        return this._stage ? this._stage.window.getContext().nativeContext : null;
+    }
+    combineIncrementalLayers() {
+        return this._stage && waitForAllSubLayers(this._stage).then((() => {
+            this._stage && this._stage.defaultLayer.combineSubLayer();
+        })), this;
+    }
+    background(color) {
+        if (this._stage) return this._stage.background = color, this;
+    }
+    setDpr(resolution, redraw) {
+        var _a, _b;
+        return null === (_b = null === (_a = this._stage) || void 0 === _a ? void 0 : _a.setDpr) || void 0 === _b || _b.call(_a, resolution), 
+        redraw && this.renderNextFrame(), this;
+    }
+    shouldResize(width, height) {
+        return width !== this._width || height !== this._height;
+    }
+    resize(width, height) {
+        return this._view.emit(HOOK_EVENT.BEFORE_STAGE_RESIZE), this.shouldResize(width, height) && (this._width = width, 
+        this._height = height, this._stage && this._stage.resize(width, height)), this._view.emit(HOOK_EVENT.AFTER_STAGE_RESIZE), 
+        this;
+    }
+    setViewBox(viewBox, rerender = !0) {
+        return this._stage ? (!viewBox || this._viewBox && viewBox.x1 === this._viewBox.x1 && viewBox.x2 === this._viewBox.x2 && viewBox.y1 === this._viewBox.y1 && viewBox.y2 === this._viewBox.y2 || (this._viewBox = viewBox, 
+        this._stage.setViewBox(viewBox.x1, viewBox.y1, viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1, rerender)), 
+        this) : this;
+    }
+    render(immediately = !1) {
+        return this._view.emit(HOOK_EVENT.BEFORE_VRENDER_DRAW), this.initStage(), this._stage.disableDirtyBounds(), 
+        this._stage.afterNextRender(this.handleAfterNextRender), immediately && (this._stage.render(), 
+        this._view.emit(HOOK_EVENT.AFTER_VRENDER_DRAW)), this;
+    }
+    renderNextFrame() {
+        return this.initStage(), this._stage.renderNextFrame(), this;
+    }
+    toCanvas() {
+        return this._stage ? this._stage.toCanvas() : null;
+    }
+    release() {
+        this._view.traverseMarkTree((mark => {
+            mark.release();
+        })), this._dragController && this._dragController.release(), this._gestureController && this._gestureController.release(), 
+        this._stage && this._stage.release(), this._stage = null, this._layer = null, this._dragController = null, 
+        this._gestureController = null;
+    }
+    createStage() {
+        var _a, _b, _c, _d, _e;
+        this._view.emit(HOOK_EVENT.BEFORE_CREATE_VRENDER_STAGE);
+        const viewOptions = this._viewOptions, stage = null !== (_a = viewOptions.stage) && void 0 !== _a ? _a : createStage({
+            width: this._width,
+            height: this._height,
+            renderStyle: viewOptions.renderStyle,
+            viewBox: viewOptions.viewBox,
+            dpr: viewOptions.dpr,
+            canvas: viewOptions.renderCanvas,
+            canvasControled: viewOptions.canvasControled,
+            container: viewOptions.container,
+            title: viewOptions.rendererTitle,
+            beforeRender: viewOptions.beforeRender,
+            afterRender: viewOptions.afterRender,
+            disableDirtyBounds: !!viewOptions.disableDirtyBounds,
+            autoRender: !0,
+            pluginList: viewOptions.pluginList,
+            enableHtmlAttribute: viewOptions.enableHtmlAttribute
+        });
+        (null === (_b = viewOptions.options3d) || void 0 === _b ? void 0 : _b.enable) && stage.set3dOptions(viewOptions.options3d), 
+        stage.enableIncrementalAutoRender(), this._viewBox = viewOptions.viewBox, this._view.emit(HOOK_EVENT.AFTER_CREATE_VRENDER_STAGE), 
+        this._view.emit(HOOK_EVENT.BEFORE_CREATE_VRENDER_LAYER);
+        const layer = null !== (_c = viewOptions.layer) && void 0 !== _c ? _c : stage.defaultLayer;
+        if (this._view.emit(HOOK_EVENT.AFTER_CREATE_VRENDER_LAYER), (null === (_d = this._eventConfig) || void 0 === _d ? void 0 : _d.drag) && (this._dragController = new DragNDrop(layer)), 
+        null === (_e = this._eventConfig) || void 0 === _e ? void 0 : _e.gesture) {
+            const gestureConfig = isObject(this._eventConfig.gesture) ? this._eventConfig.gesture : {};
+            this._gestureController = new Gesture(layer, gestureConfig);
+        }
+        return {
+            stage: stage,
+            layer: layer
+        };
+    }
+    initStage() {
+        if (!this._stage) {
+            const {stage: stage, layer: layer} = this.createStage();
+            this._stage = stage, this._layer = layer;
+            const background = this._view.background();
+            this.background(background);
+        }
+    }
+}
+//# sourceMappingURL=canvas-renderer.js.map

package/es/graph/canvas-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/graph/canvas-renderer.ts"],"names":[],"mappings":"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","file":"canvas-renderer.js","sourcesContent":["import type { IBoundsLike } from '@visactor/vutils';\n// eslint-disable-next-line no-duplicate-imports\nimport { isObject } from '@visactor/vutils';\nimport type { IEventTarget, IColor, ILayer, Stage } from '@visactor/vrender';\n// eslint-disable-next-line no-duplicate-imports\nimport { createStage, DragNDrop, Gesture, waitForAllSubLayers } from '@visactor/vrender';\nimport type { IViewOptions, IView, IMark, IViewEventConfig } from '../types';\nimport type { IRenderer } from '../types/renderer';\nimport { HOOK_EVENT } from './enums';\n\nexport default class CanvasRenderer implements IRenderer {\n  private _width: number;\n  private _height: number;\n\n  private _view: IView;\n  private _viewOptions: IViewOptions;\n  private _eventConfig: IViewEventConfig;\n  private _stage: Stage;\n  private _layer: ILayer;\n  private _dragController: DragNDrop;\n  private _gestureController: Gesture;\n  private _viewBox: IBoundsLike;\n\n  constructor(view: IView) {\n    this._view = view;\n  }\n\n  initialize(width: number, height: number, options: IViewOptions, eventConfig: IViewEventConfig) {\n    this._width = width;\n    this._height = height;\n    this._viewOptions = options;\n    this._eventConfig = eventConfig;\n\n    this.initStage();\n\n    // this method will invoke resize to size the canvas appropriately\n    return this;\n  }\n\n  stage() {\n    return this._stage ?? null;\n  }\n\n  canvas() {\n    if (this._stage) {\n      return this._stage.window.getNativeHandler().nativeCanvas;\n    }\n    return null;\n  }\n\n  context() {\n    if (this._stage) {\n      return this._stage.window.getContext().nativeContext;\n    }\n    return null;\n  }\n\n  combineIncrementalLayers() {\n    if (this._stage) {\n      waitForAllSubLayers(this._stage as any).then(() => {\n        // stage might be null in current tick\n        if (this._stage) {\n          this._stage.defaultLayer.combineSubLayer();\n        }\n      });\n    }\n    return this;\n  }\n\n  background(color: IColor) {\n    if (this._stage) {\n      this._stage.background = color;\n      return this;\n    }\n  }\n\n  setDpr(resolution: number, redraw: boolean) {\n    this._stage?.setDpr?.(resolution);\n    if (redraw) {\n      this.renderNextFrame();\n    }\n    return this;\n  }\n\n  shouldResize(width: number, height: number) {\n    return width !== this._width || height !== this._height;\n  }\n\n  resize(width: number, height: number) {\n    this._view.emit(HOOK_EVENT.BEFORE_STAGE_RESIZE);\n    if (this.shouldResize(width, height)) {\n      this._width = width;\n      this._height = height;\n      this._stage && this._stage.resize(width, height);\n    }\n\n    this._view.emit(HOOK_EVENT.AFTER_STAGE_RESIZE);\n\n    return this;\n  }\n\n  setViewBox(viewBox: IBoundsLike, rerender: boolean = true) {\n    if (!this._stage) {\n      return this;\n    }\n    if (\n      viewBox &&\n      (!this._viewBox ||\n        viewBox.x1 !== this._viewBox.x1 ||\n        viewBox.x2 !== this._viewBox.x2 ||\n        viewBox.y1 !== this._viewBox.y1 ||\n        viewBox.y2 !== this._viewBox.y2)\n    ) {\n      this._viewBox = viewBox;\n\n      // FIXME: vRender\n      this._stage.setViewBox(viewBox.x1, viewBox.y1, viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1, rerender);\n    }\n    return this;\n  }\n\n  render(immediately: boolean = false) {\n    this._view.emit(HOOK_EVENT.BEFORE_VRENDER_DRAW);\n\n    this.initStage();\n\n    // disable dirty bounds when render is called\n    this._stage.disableDirtyBounds();\n    this._stage.afterNextRender(this.handleAfterNextRender);\n\n    // render immediately and skip render in next frame\n    if (immediately) {\n      this._stage.render();\n\n      this._view.emit(HOOK_EVENT.AFTER_VRENDER_DRAW);\n    }\n    return this;\n  }\n\n  renderNextFrame() {\n    this.initStage();\n\n    this._stage.renderNextFrame();\n\n    return this;\n  }\n\n  toCanvas() {\n    if (this._stage) {\n      return this._stage.toCanvas();\n    }\n    return null;\n  }\n\n  // toImageData() {\n  //   if (this._stage) {\n  //     return this._stage.toImageData();\n  //   }\n  //   return null;\n  // }\n\n  release() {\n    this._view.traverseMarkTree((mark: IMark) => {\n      mark.release();\n    });\n\n    if (this._dragController) {\n      this._dragController.release();\n    }\n    if (this._gestureController) {\n      this._gestureController.release();\n    }\n\n    if (this._stage) {\n      this._stage.release();\n    }\n\n    this._stage = null;\n    this._layer = null;\n    this._dragController = null;\n    this._gestureController = null;\n  }\n\n  private createStage() {\n    this._view.emit(HOOK_EVENT.BEFORE_CREATE_VRENDER_STAGE);\n\n    const viewOptions = this._viewOptions;\n\n    const stage =\n      (viewOptions.stage as unknown as Stage) ??\n      createStage({\n        width: this._width,\n        height: this._height,\n        renderStyle: viewOptions.renderStyle,\n        viewBox: viewOptions.viewBox,\n        dpr: viewOptions.dpr,\n        canvas: viewOptions.renderCanvas,\n        canvasControled: viewOptions.canvasControled,\n        container: viewOptions.container,\n        title: viewOptions.rendererTitle,\n        beforeRender: viewOptions.beforeRender,\n        afterRender: viewOptions.afterRender,\n        disableDirtyBounds: !!viewOptions.disableDirtyBounds,\n        autoRender: true,\n        pluginList: viewOptions.pluginList,\n        enableHtmlAttribute: viewOptions.enableHtmlAttribute\n      });\n\n    if (viewOptions.options3d?.enable) {\n      stage.set3dOptions(viewOptions.options3d);\n    }\n\n    stage.enableIncrementalAutoRender();\n\n    this._viewBox = viewOptions.viewBox;\n    this._view.emit(HOOK_EVENT.AFTER_CREATE_VRENDER_STAGE);\n\n    this._view.emit(HOOK_EVENT.BEFORE_CREATE_VRENDER_LAYER);\n    const layer = viewOptions.layer ?? (stage.defaultLayer as ILayer);\n    this._view.emit(HOOK_EVENT.AFTER_CREATE_VRENDER_LAYER);\n\n    if (this._eventConfig?.drag) {\n      // 允许 drag 事件\n      this._dragController = new DragNDrop(layer as unknown as IEventTarget);\n    }\n    if (this._eventConfig?.gesture) {\n      const gestureConfig = isObject(this._eventConfig.gesture) ? this._eventConfig.gesture : {};\n      // 允许手势\n      this._gestureController = new Gesture(layer as unknown as IEventTarget, gestureConfig);\n    }\n\n    return {\n      stage,\n      layer\n    };\n  }\n\n  private initStage() {\n    if (!this._stage) {\n      const { stage, layer } = this.createStage();\n\n      this._stage = stage;\n      this._layer = layer;\n\n      const background = this._view.background();\n      this.background(background);\n    }\n  }\n\n  private handleAfterNextRender = () => {\n    if (this._stage && !this._viewOptions.disableDirtyBounds) {\n      this._stage.enableDirtyBounds();\n    }\n\n    this._view.emit(HOOK_EVENT.AFTER_VRENDER_DRAW);\n    this._view.emit(HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER);\n  };\n}\n"]}

package/es/graph/constants.d.ts

@@ -0,0 +1,23 @@
+import type { IAnimationControlOptions } from '../types/animate';
+import { GrammarMarkType } from './enums';
+export declare const BridgeElementKey = "__vgrammar_scene_item__";
+export declare const DefaultPositionValue = 0;
+export declare const CollectionMarkType: GrammarMarkType[];
+export declare const Mark3DType: GrammarMarkType[];
+export declare const DefaultKey = "key";
+export declare const DefaultMarkData: {}[];
+export declare const DefaultGroupKeys: string[];
+export declare const DefaultReuse = true;
+export declare const DefaultMorph = true;
+export declare const DefaultMorphAll = false;
+export declare const DefaultSplitPath: null | 'clone';
+export declare const DefaultEnableExitAnimation = true;
+export declare const ImmediateAnimationState = "VGRAMMAR_IMMEDIATE_ANIMATION";
+export declare const DefaultAnimationStartTime = 0;
+export declare const DefaultAnimationDuration = 1000;
+export declare const DefaultAnimationDelay = 0;
+export declare const DefaultAnimationLoop = false;
+export declare const DefaultAnimationOneByOne = false;
+export declare const DefaultAnimationEasing = "quintInOut";
+export declare const DefaultAnimationControlOptions: IAnimationControlOptions;
+export declare const DefaultAnimationParameters = "VGRAMMAR_ANIMATION_PARAMETERS";

package/es/graph/constants.js

@@ -0,0 +1,47 @@
+import { GrammarMarkType } from "./enums";
+
+export const BridgeElementKey = "__vgrammar_scene_item__";
+
+export const DefaultPositionValue = 0;
+
+export const CollectionMarkType = [ GrammarMarkType.line, GrammarMarkType.area ];
+
+export const Mark3DType = [ GrammarMarkType.arc3d, GrammarMarkType.rect3d, GrammarMarkType.pyramid3d ];
+
+export const DefaultKey = "key";
+
+export const DefaultMarkData = [ {} ];
+
+export const DefaultGroupKeys = [ "key" ];
+
+export const DefaultReuse = !0;
+
+export const DefaultMorph = !0;
+
+export const DefaultMorphAll = !1;
+
+export const DefaultSplitPath = null;
+
+export const DefaultEnableExitAnimation = !0;
+
+export const ImmediateAnimationState = "VGRAMMAR_IMMEDIATE_ANIMATION";
+
+export const DefaultAnimationStartTime = 0;
+
+export const DefaultAnimationDuration = 1e3;
+
+export const DefaultAnimationDelay = 0;
+
+export const DefaultAnimationLoop = !1;
+
+export const DefaultAnimationOneByOne = !1;
+
+export const DefaultAnimationEasing = "quintInOut";
+
+export const DefaultAnimationControlOptions = {
+    stopWhenStateChange: !1,
+    immediatelyApply: !0
+};
+
+export const DefaultAnimationParameters = "VGRAMMAR_ANIMATION_PARAMETERS";
+//# sourceMappingURL=constants.js.map

package/es/graph/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/graph/constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,yBAAyB,CAAC;AAE1D,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;AAE/E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,eAAe,CAAC,KAAK,EAAE,eAAe,CAAC,MAAM,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;AAErG,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC;AAEhC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,CAAC,CAAC;AAEpC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,UAAU,CAAC,CAAC;AAE7C,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC;AACjC,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC;AACjC,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC;AACrC,MAAM,CAAC,MAAM,gBAAgB,GAAmB,IAAI,CAAC;AACrD,MAAM,CAAC,MAAM,0BAA0B,GAAG,IAAI,CAAC;AAE/C,MAAM,CAAC,MAAM,uBAAuB,GAAG,8BAA8B,CAAC;AAGtE,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAC3C,MAAM,CAAC,MAAM,wBAAwB,GAAG,IAAI,CAAC;AAC7C,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AACvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAC1C,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC;AAC9C,MAAM,CAAC,MAAM,sBAAsB,GAAG,YAAY,CAAC;AACnD,MAAM,CAAC,MAAM,8BAA8B,GAA6B;IACtE,mBAAmB,EAAE,KAAK;IAC1B,gBAAgB,EAAE,IAAI;CACvB,CAAC;AACF,MAAM,CAAC,MAAM,0BAA0B,GAAG,+BAA+B,CAAC","file":"constants.js","sourcesContent":["import type { IAnimationControlOptions } from '../types/animate';\nimport { GrammarMarkType } from './enums';\n\nexport const BridgeElementKey = '__vgrammar_scene_item__';\n\nexport const DefaultPositionValue = 0;\n\nexport const CollectionMarkType = [GrammarMarkType.line, GrammarMarkType.area];\n\nexport const Mark3DType = [GrammarMarkType.arc3d, GrammarMarkType.rect3d, GrammarMarkType.pyramid3d];\n\nexport const DefaultKey = 'key';\n\nexport const DefaultMarkData = [{}];\n\nexport const DefaultGroupKeys = [DefaultKey];\n\nexport const DefaultReuse = true;\nexport const DefaultMorph = true;\nexport const DefaultMorphAll = false;\nexport const DefaultSplitPath: null | 'clone' = null;\nexport const DefaultEnableExitAnimation = true;\n\nexport const ImmediateAnimationState = 'VGRAMMAR_IMMEDIATE_ANIMATION';\n\n/** default animation configs */\nexport const DefaultAnimationStartTime = 0;\nexport const DefaultAnimationDuration = 1000;\nexport const DefaultAnimationDelay = 0;\nexport const DefaultAnimationLoop = false;\nexport const DefaultAnimationOneByOne = false;\nexport const DefaultAnimationEasing = 'quintInOut';\nexport const DefaultAnimationControlOptions: IAnimationControlOptions = {\n  stopWhenStateChange: false,\n  immediatelyApply: true\n};\nexport const DefaultAnimationParameters = 'VGRAMMAR_ANIMATION_PARAMETERS';\n"]}

package/es/graph/element.d.ts

@@ -0,0 +1,66 @@
+import { DiffState } from './enums';
+import type { BaseEncodeSpec, BaseSignleEncodeSpec, IElement, IMark, IMarkConfig, MarkElementItem, MarkFunctionType, MarkKeySpec, MarkType } from '../types';
+import type { IGraphic, IGraphicAttribute } from '@visactor/vrender';
+export declare class Element implements IElement {
+    mark: IMark;
+    key: string;
+    groupKey?: string;
+    data: any[];
+    states: string[];
+    diffState: DiffState;
+    isReserved: boolean;
+    runtimeStatesEncoder: BaseEncodeSpec;
+    protected graphicItem: IGraphic;
+    items: MarkElementItem[];
+    constructor(mark: IMark);
+    initGraphicItem(attributes?: any): void;
+    updateGraphicItem(config: IMarkConfig): void;
+    getGraphicItem(): IGraphic<Partial<IGraphicAttribute>>;
+    getBounds(): import("@visactor/vutils").IBounds;
+    getStates(): string[];
+    updateData(groupKey: string | null, data: any[], key: MarkKeySpec): MarkElementItem[];
+    state(markState: MarkFunctionType<string | string[]>, parameters?: any): void;
+    encodeGraphic(attrs?: any): void;
+    private _setCutomizedShape;
+    encodeItems(items: MarkElementItem[], encoders: BaseEncodeSpec, isReentered?: boolean, parameters?: any): void;
+    protected coordinateTransformEncode(items: MarkElementItem[]): void;
+    clearStates(hasAnimation?: boolean): void;
+    private _updateRuntimeStates;
+    hasState(state: string): boolean;
+    addState(state: string | string[], attrs?: BaseSignleEncodeSpec): void;
+    removeState(state: string | string[]): void;
+    protected getStateAttrs: (stateName: string, nextStates: string[]) => any;
+    useStates(states: string[], hasAnimation?: boolean): void;
+    protected diffAttributes(graphicAttributes: {
+        [channel: string]: any;
+    }): {};
+    transformElementItems(items: MarkElementItem[], markType: MarkType, computePoints?: boolean): Record<string, any>;
+    protected applyGraphicAttributes(graphicAttributes: any): void;
+    getGraphicAttribute(channel: string, prev?: boolean): any;
+    setGraphicAttribute(channel: string, value: any, final?: boolean): void;
+    setGraphicAttributes(attributes: {
+        [channel: string]: any;
+    }, final?: boolean): void;
+    getFinalGraphicAttributes(): any;
+    protected setFinalGraphicAttributes(attributes: {
+        [channel: string]: any;
+    }): void;
+    getPrevGraphicAttributes(): any;
+    protected setPrevGraphicAttributes(attributes: {
+        [channel: string]: any;
+    }): void;
+    getNextGraphicAttributes(): any;
+    protected setNextGraphicAttributes(attributes: {
+        [channel: string]: any;
+    }): void;
+    clearChangedGraphicAttributes(): void;
+    clearGraphicAttributes(): void;
+    remove(): void;
+    release(): void;
+    getItemAttribute(channel?: string): any;
+    setItemAttributes(attributes: {
+        [channel: string]: any;
+    } | any[]): void;
+    getItem(): MarkElementItem | MarkElementItem[];
+    getDatum(): any;
+}

package/es/graph/element.js

@@ -0,0 +1,292 @@
+import { array, has, isBoolean, isNil, isFunction, isString, isArray, get, isEmpty, isEqual as isObjEqual } from "@visactor/vutils";
+
+import { isEqual } from "@visactor/vgrammar-util";
+
+import { BridgeElementKey } from "./constants";
+
+import { DiffState, HOOK_EVENT, GrammarMarkType, BuiltInEncodeNames } from "./enums";
+
+import { invokeEncoderToItems } from "./mark/encode";
+
+import { removeGraphicItem } from "./util/graphic";
+
+import { transformAttributes, getLineSegmentConfigs, isPointsMarkType, getLinePointsFromSegments } from "./attributes";
+
+import { getLargeRectsPoints, getLargeSymbolsPoints, getLinePoints, isValidPointsChannel } from "./attributes/helpers";
+
+import { CustomPath2D } from "@visactor/vrender";
+
+import { invokeFunctionType, parseField } from "../parse/util";
+
+export class Element {
+    constructor(mark) {
+        this.data = null, this.states = [], this.diffState = DiffState.enter, this.isReserved = !1, 
+        this.runtimeStatesEncoder = null, this.items = [], this.getStateAttrs = (stateName, nextStates) => {
+            var _a, _b, _c;
+            const isRuntimeState = !isNil(null === (_a = this.runtimeStatesEncoder) || void 0 === _a ? void 0 : _a[stateName]), encoder = isRuntimeState ? this.runtimeStatesEncoder[stateName] : null === (_b = this.mark.getSpec().encode) || void 0 === _b ? void 0 : _b[stateName];
+            if (!encoder) return {};
+            if (isFunction(encoder)) return encoder(this.getDatum(), this, stateName, nextStates);
+            if (!isRuntimeState && (null === (_c = this.graphicItem.states) || void 0 === _c ? void 0 : _c[stateName])) return this.graphicItem.states[stateName];
+            const stateItems = this.items.map((item => Object.assign({}, item, {
+                nextAttrs: {}
+            })));
+            invokeEncoderToItems(this, stateItems, encoder, this.mark.parameters());
+            const graphicAttributes = this.transformElementItems(stateItems, this.mark.markType);
+            return this.graphicItem.states ? this.graphicItem.states[stateName] || (this.graphicItem.states[stateName] = graphicAttributes) : this.graphicItem.states = {
+                [stateName]: graphicAttributes
+            }, graphicAttributes;
+        }, this.mark = mark;
+    }
+    initGraphicItem(attributes = {}) {
+        if (this.graphicItem) return;
+        const attrs = Object.assign({}, attributes);
+        this.graphicItem = this.mark.addGraphicItem(attrs, this.groupKey), this.graphicItem[BridgeElementKey] = this, 
+        this.graphicItem.onBeforeAttributeUpdate = attributes => {
+            if (!this.mark) return attributes;
+            return transformAttributes(this.mark.getAttributeTransforms(), attributes, this);
+        }, this.graphicItem.setAttributes(this.graphicItem.attribute), this.clearGraphicAttributes(), 
+        this.mark.needAnimate() && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes(attributes), 
+        this.setFinalGraphicAttributes(attributes));
+    }
+    updateGraphicItem(config) {
+        var _a;
+        if (!this.graphicItem) return;
+        isNil(config.clip) || this.graphicItem.setAttribute("clip", config.clip), isNil(config.interactive) || this.graphicItem.setAttribute("pickable", config.interactive), 
+        isNil(config.zIndex) || this.graphicItem.setAttribute("zIndex", config.zIndex), 
+        this.diffState === DiffState.exit ? this.graphicItem.releaseStatus = "willRelease" : this.graphicItem.releaseStatus = void 0;
+        const markSpec = this.mark.getSpec();
+        (null === (_a = markSpec.animation) || void 0 === _a ? void 0 : _a.state) && (this.graphicItem.stateAnimateConfig = markSpec.animation.state);
+    }
+    getGraphicItem() {
+        return this.graphicItem;
+    }
+    getBounds() {
+        var _a;
+        return null === (_a = this.graphicItem) || void 0 === _a ? void 0 : _a.AABBBounds;
+    }
+    getStates() {
+        return this.states.slice();
+    }
+    updateData(groupKey, data, key) {
+        var _a;
+        this.mark.emit(HOOK_EVENT.BEFORE_ELEMENT_UPDATE_DATA, {
+            groupKey: groupKey,
+            data: data,
+            key: key
+        }, this), this.data = data;
+        const keyGetter = parseField(key);
+        return this.items = data.map((datum => ({
+            datum: datum,
+            key: keyGetter(datum),
+            view: this.mark.view,
+            nextAttrs: {}
+        }))), this.groupKey = groupKey, this.key = this.mark.isCollectionMark() ? groupKey : null === (_a = this.items) || void 0 === _a ? void 0 : _a[0].key, 
+        this.mark.emit(HOOK_EVENT.AFTER_ELEMENT_UPDATE_DATA, {
+            groupKey: groupKey,
+            data: data,
+            key: key
+        }, this), this.items;
+    }
+    state(markState, parameters) {
+        var _a;
+        const isCollectionMark = this.mark.isCollectionMark(), prevStateValues = this.states, newStateValues = array(invokeFunctionType(markState, parameters, this.getDatum(), this)), stateSort = null === (_a = this.mark.getSpec()) || void 0 === _a ? void 0 : _a.stateSort;
+        stateSort && stateSort.sort(stateSort);
+        const isStateChanged = newStateValues.length !== prevStateValues.length || newStateValues.some(((newState, index) => newState !== prevStateValues[index]));
+        this.states = newStateValues, !isCollectionMark && isStateChanged && this.diffState === DiffState.unChange && (this.diffState = DiffState.update);
+    }
+    encodeGraphic(attrs) {
+        var _a, _b;
+        this.coordinateTransformEncode(this.items), !isNil(null == attrs ? void 0 : attrs.enableSegments) && (null === (_b = null === (_a = this.items) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.nextAttrs) && (this.items[0].nextAttrs.enableSegments = attrs.enableSegments);
+        const graphicAttributes = this.transformElementItems(this.items, this.mark.markType);
+        attrs && Object.assign(graphicAttributes, attrs), this.graphicItem ? (this.graphicItem.clearStates(), 
+        this.graphicItem.states = {}, this.graphicItem.stateProxy = null, this.applyGraphicAttributes(graphicAttributes)) : this.initGraphicItem(graphicAttributes), 
+        this.diffState !== DiffState.enter && this.diffState !== DiffState.update || !this.states.length || this.useStates(this.states), 
+        this.mark.markType === GrammarMarkType.shape && (this.graphicItem.datum = this.items[0].datum), 
+        this.items.forEach((item => {
+            item.nextAttrs = {};
+        })), this._setCutomizedShape();
+    }
+    _setCutomizedShape() {
+        var _a;
+        if (!this.graphicItem) return;
+        const setCustomizedShape = null === (_a = this.mark.getSpec()) || void 0 === _a ? void 0 : _a.setCustomizedShape;
+        setCustomizedShape && (this.graphicItem.pathProxy = attrs => setCustomizedShape(this.data, attrs, new CustomPath2D));
+    }
+    encodeItems(items, encoders, isReentered = !1, parameters) {
+        const isCollectionMark = this.mark.isCollectionMark(), updateEncoder = encoders[BuiltInEncodeNames.update], enterEncoder = encoders[BuiltInEncodeNames.enter], exitEncoder = encoders[BuiltInEncodeNames.exit], onlyFullEncodeFirst = this.mark.isLargeMode();
+        this.diffState === DiffState.enter ? (enterEncoder && invokeEncoderToItems(this, items, enterEncoder, parameters, onlyFullEncodeFirst), 
+        updateEncoder && invokeEncoderToItems(this, items, updateEncoder, parameters, onlyFullEncodeFirst)) : this.diffState === DiffState.update ? ((isCollectionMark && enterEncoder || isReentered) && invokeEncoderToItems(this, items, enterEncoder, parameters, onlyFullEncodeFirst), 
+        updateEncoder && invokeEncoderToItems(this, items, updateEncoder, parameters, onlyFullEncodeFirst)) : this.diffState === DiffState.exit && exitEncoder && (isReentered && invokeEncoderToItems(this, items, enterEncoder, parameters, onlyFullEncodeFirst), 
+        invokeEncoderToItems(this, items, exitEncoder, parameters, onlyFullEncodeFirst));
+    }
+    coordinateTransformEncode(items) {
+        if (!this.mark.coord || "arc" === this.mark.markType || !0 === this.mark.disableCoordinateTransform) return;
+        const coord = this.mark.coord.output();
+        items.forEach((item => {
+            const nextAttrs = item.nextAttrs, convertedPoint = coord.convert(nextAttrs);
+            Object.assign(nextAttrs, convertedPoint);
+        }));
+    }
+    clearStates(hasAnimation) {
+        var _a;
+        const stateAnimation = isBoolean(hasAnimation) ? hasAnimation : !!(null === (_a = this.mark.getSpec().animation) || void 0 === _a ? void 0 : _a.state);
+        this.states = [], this.graphicItem && this.graphicItem.clearStates(stateAnimation), 
+        this.runtimeStatesEncoder && (this.runtimeStatesEncoder = {});
+    }
+    _updateRuntimeStates(state, attrs) {
+        this.runtimeStatesEncoder || (this.runtimeStatesEncoder = {}), this.runtimeStatesEncoder[state] = attrs;
+    }
+    hasState(state) {
+        return this.states && this.states.includes(state);
+    }
+    addState(state, attrs) {
+        var _a;
+        const nextStates = array(state).reduce(((nextStates, state) => (nextStates.includes(state) || nextStates.push(state), 
+        nextStates)), this.states.slice()), isRuntimeStateUpdate = attrs && isString(state) && !isObjEqual(attrs, null === (_a = this.runtimeStatesEncoder) || void 0 === _a ? void 0 : _a[state]);
+        isRuntimeStateUpdate && this._updateRuntimeStates(state, attrs), nextStates.length !== this.states.length ? this.useStates(nextStates) : isRuntimeStateUpdate && this.graphicItem && (this.graphicItem.clearStates(), 
+        this.useStates(nextStates));
+    }
+    removeState(state) {
+        const states = array(state), nextStates = this.states.filter((state => !states.includes(state)));
+        nextStates.length !== this.states.length && (this.runtimeStatesEncoder && states.forEach((state => {
+            this.runtimeStatesEncoder[state] = null;
+        })), this.useStates(nextStates));
+    }
+    useStates(states, hasAnimation) {
+        var _a, _b;
+        if (!this.graphicItem) return;
+        this.mark.emit(HOOK_EVENT.BEFORE_ELEMENT_STATE, {
+            states: states
+        }, this), this.states = states.slice();
+        const stateSort = null === (_a = this.mark.getSpec()) || void 0 === _a ? void 0 : _a.stateSort;
+        stateSort && this.states.sort(stateSort);
+        const stateAnimation = isBoolean(hasAnimation) ? hasAnimation : !!(null === (_b = this.mark.getSpec().animation) || void 0 === _b ? void 0 : _b.state);
+        this.graphicItem.stateProxy = this.getStateAttrs, this.graphicItem.useStates(this.states, stateAnimation), 
+        this.mark.emit(HOOK_EVENT.AFTER_ELEMENT_STATE, {
+            states: states
+        }, this);
+    }
+    diffAttributes(graphicAttributes) {
+        const diffResult = {}, finalGraphicAttributes = this.getFinalGraphicAttributes();
+        for (const key in graphicAttributes) isEqual(key, finalGraphicAttributes, graphicAttributes) && has(finalGraphicAttributes, key) || (diffResult[key] = graphicAttributes[key]);
+        return diffResult;
+    }
+    transformElementItems(items, markType, computePoints) {
+        var _a, _b, _c, _d, _e;
+        const item = items[0];
+        if (!item.nextAttrs || 0 === Object.keys(item.nextAttrs).length) return {};
+        let nextAttrs = null == item ? void 0 : item.nextAttrs;
+        if (items && items.length && isNil(null === (_a = item.nextAttrs) || void 0 === _a ? void 0 : _a.points) && (!0 === computePoints || isValidPointsChannel(Object.keys(item.nextAttrs), this.mark.markType)) && isPointsMarkType(markType)) {
+            const lastPoints = this.getGraphicAttribute("points", !1), lastSegments = this.getGraphicAttribute("segments", !1), enableSegments = null !== (_b = item.nextAttrs.enableSegments) && void 0 !== _b ? _b : this.getGraphicAttribute("enableSegments", !1), itemNextAttrs = items.map((item => item.nextAttrs)), isProgressive = this.mark.isProgressive();
+            if (nextAttrs = Object.assign({}, nextAttrs), delete nextAttrs.x, delete nextAttrs.y, 
+            markType === GrammarMarkType.line || markType === GrammarMarkType.area) {
+                const linePoints = getLinePoints(items, !0, lastPoints, markType === GrammarMarkType.area);
+                if (enableSegments && !isProgressive) {
+                    const points = linePoints && 0 !== linePoints.length ? linePoints : getLinePointsFromSegments(lastSegments), segments = getLineSegmentConfigs(itemNextAttrs, points, this);
+                    segments ? (nextAttrs.segments = segments, nextAttrs.points = null) : (nextAttrs.segments = null, 
+                    nextAttrs.points = points);
+                } else isProgressive ? nextAttrs.segments = (null !== (_e = null === (_d = null === (_c = this.graphicItem) || void 0 === _c ? void 0 : _c.attribute) || void 0 === _d ? void 0 : _d.segments) && void 0 !== _e ? _e : []).concat([ {
+                    points: linePoints
+                } ]) : (nextAttrs.points = linePoints, nextAttrs.segments = null);
+            } else markType === GrammarMarkType.largeRects ? nextAttrs.points = getLargeRectsPoints(items, !0, lastPoints) : markType === GrammarMarkType.largeSymbols && (nextAttrs.points = getLargeSymbolsPoints(items, !0, lastPoints));
+        }
+        return nextAttrs;
+    }
+    applyGraphicAttributes(graphicAttributes) {
+        if (!isEmpty(graphicAttributes)) if (this.mark.needAnimate()) {
+            const nextGraphicAttributes = this.diffAttributes(graphicAttributes), prevGraphicAttributes = this.getPrevGraphicAttributes(), finalGraphicAttributes = this.getFinalGraphicAttributes();
+            Object.keys(nextGraphicAttributes).forEach((channel => {
+                prevGraphicAttributes[channel] = this.getGraphicAttribute(channel), finalGraphicAttributes[channel] = nextGraphicAttributes[channel];
+            })), this.setNextGraphicAttributes(nextGraphicAttributes), this.setPrevGraphicAttributes(prevGraphicAttributes), 
+            this.setFinalGraphicAttributes(finalGraphicAttributes);
+            const animateGraphicAttributes = this.mark.animate.getElementAnimators(this).reduce(((attributes, animator) => Object.assign(attributes, animator.getEndAttributes())), {}), currentGraphicAttributes = Object.assign({}, animateGraphicAttributes, finalGraphicAttributes);
+            this.graphicItem.setAttributes(currentGraphicAttributes);
+        } else this.graphicItem.setAttributes(graphicAttributes);
+    }
+    getGraphicAttribute(channel, prev = !1) {
+        var _a;
+        if (!this.graphicItem) return;
+        if (prev) {
+            let value;
+            const prevGraphicAttributes = this.getPrevGraphicAttributes();
+            if (!isNil(value = get(prevGraphicAttributes, channel))) return value;
+        }
+        const trans = this.mark.getAttributeTransforms();
+        let getKey = [ channel ];
+        if (trans && trans.length) {
+            const channelTransform = trans.find((entry => entry.storedAttrs && entry.channels.includes(channel)));
+            channelTransform && (getKey = [ channelTransform.storedAttrs, channel ]);
+        }
+        return get(null === (_a = this.graphicItem) || void 0 === _a ? void 0 : _a.attribute, getKey);
+    }
+    setGraphicAttribute(channel, value, final = !0) {
+        if (!this.graphicItem) return;
+        const finalGraphicAttributes = this.getFinalGraphicAttributes(), prevGraphicAttributes = this.getPrevGraphicAttributes();
+        final && finalGraphicAttributes && (finalGraphicAttributes[channel] = value), prevGraphicAttributes && !has(prevGraphicAttributes, channel) && (prevGraphicAttributes[channel] = this.graphicItem.attribute[channel]), 
+        this.graphicItem.setAttribute(channel, value);
+    }
+    setGraphicAttributes(attributes, final = !0) {
+        if (!this.graphicItem) return;
+        const finalGraphicAttributes = this.getFinalGraphicAttributes(), prevGraphicAttributes = this.getPrevGraphicAttributes();
+        Object.keys(attributes).forEach((key => {
+            finalGraphicAttributes && final && (finalGraphicAttributes[key] = attributes[key]), 
+            prevGraphicAttributes && !has(prevGraphicAttributes, key) && (prevGraphicAttributes[key] = this.graphicItem.attribute[key]);
+        })), this.graphicItem.setAttributes(attributes);
+    }
+    getFinalGraphicAttributes() {
+        return this.graphicItem.finalAttrs;
+    }
+    setFinalGraphicAttributes(attributes) {
+        this.graphicItem.finalAttrs = attributes;
+    }
+    getPrevGraphicAttributes() {
+        return this.graphicItem.prevAttrs;
+    }
+    setPrevGraphicAttributes(attributes) {
+        this.graphicItem.prevAttrs = attributes;
+    }
+    getNextGraphicAttributes() {
+        return this.graphicItem.nextAttrs;
+    }
+    setNextGraphicAttributes(attributes) {
+        this.graphicItem.nextAttrs = attributes;
+    }
+    clearChangedGraphicAttributes() {
+        this.graphicItem && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes({}));
+    }
+    clearGraphicAttributes() {
+        this.graphicItem && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes({}), 
+        this.setFinalGraphicAttributes({}));
+    }
+    remove() {
+        this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem = null);
+    }
+    release() {
+        var _a, _b;
+        this.graphicItem && (null === (_b = null === (_a = this.graphicItem.animates) || void 0 === _a ? void 0 : _a.forEach) || void 0 === _b || _b.call(_a, (animate => animate.stop()))), 
+        this.mark = null, this.data = null, this.graphicItem && (removeGraphicItem(this.graphicItem), 
+        this.graphicItem[BridgeElementKey] = null, this.graphicItem = null), this.items = null;
+    }
+    getItemAttribute(channel) {
+        var _a, _b;
+        if (null === (_a = this.items) || void 0 === _a ? void 0 : _a.length) return this.mark.isCollectionMark() ? isNil(channel) ? this.items.map((item => item.nextAttrs)) : this.items.map((item => {
+            var _a;
+            return null === (_a = item.nextAttrs) || void 0 === _a ? void 0 : _a[channel];
+        })) : isNil(channel) ? this.items[0].nextAttrs : null === (_b = this.items[0].nextAttrs) || void 0 === _b ? void 0 : _b[channel];
+    }
+    setItemAttributes(attributes) {
+        var _a;
+        (null === (_a = this.items) || void 0 === _a ? void 0 : _a.length) && (this.mark.isCollectionMark() ? isArray(attributes) && this.items.forEach(((item, index) => {
+            Object.assign(item.nextAttrs, attributes[index]);
+        })) : Object.assign(this.items[0].nextAttrs, attributes));
+    }
+    getItem() {
+        var _a, _b;
+        return this.mark.isCollectionMark() ? null !== (_a = this.items) && void 0 !== _a ? _a : [] : null === (_b = this.items) || void 0 === _b ? void 0 : _b[0];
+    }
+    getDatum() {
+        var _a, _b;
+        return this.mark.isCollectionMark() ? null !== (_a = this.data) && void 0 !== _a ? _a : [] : null === (_b = this.data) || void 0 === _b ? void 0 : _b[0];
+    }
+}
+//# sourceMappingURL=element.js.map