@visactor/vchart 2.1.0-alpha.1 → 2.1.0-alpha.3

package/cjs/data/data-view-utils.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.releaseDataViewWithDependencies = exports.releaseDataView = exports.releaseDataViews = exports.detachDataViewDependencies = void 0;
+
+const getDataViewsInDataSet = dataView => {
+    var _a;
+    const dataViewMap = null === (_a = null == dataView ? void 0 : dataView.dataSet) || void 0 === _a ? void 0 : _a.dataViewMap;
+    return dataViewMap ? Object.values(dataViewMap).filter(Boolean) : [];
+}, detachDataViewListener = (source, target) => {
+    var _a, _b;
+    null === (_a = null == source ? void 0 : source.target) || void 0 === _a || _a.removeListener("change", target.reRunAllTransform), 
+    null === (_b = null == source ? void 0 : source.target) || void 0 === _b || _b.removeListener("markRunning", target.markRunning);
+}, detachDataViewDependencies = dataView => {
+    if (!dataView) return;
+    getDataViewsInDataSet(dataView).forEach((source => {
+        detachDataViewListener(source, dataView);
+    }));
+    const dependencies = null == dataView ? void 0 : dataView.rawData;
+    Array.isArray(dependencies) && dependencies.forEach((dependency => {
+        detachDataViewListener(dependency, dataView);
+    }));
+};
+
+exports.detachDataViewDependencies = detachDataViewDependencies;
+
+const releaseDataViews = dataViews => {
+    const releaseDataViews = Array.from(new Set(dataViews.filter(Boolean)));
+    releaseDataViews.length && (releaseDataViews.forEach(exports.detachDataViewDependencies), 
+    releaseDataViews.forEach((dataView => {
+        var _a;
+        null === (_a = dataView.destroy) || void 0 === _a || _a.call(dataView);
+    })));
+};
+
+exports.releaseDataViews = releaseDataViews;
+
+const releaseDataView = dataView => {
+    (0, exports.releaseDataViews)([ dataView ]);
+};
+
+exports.releaseDataView = releaseDataView;
+
+const releaseDataViewWithDependencies = (dataView, shouldReleaseDependency) => {
+    if (!dataView) return;
+    const dataViewsInDataSet = new Set(getDataViewsInDataSet(dataView)), releaseDependencies = [], collectReleaseDependencies = currentDataView => {
+        const dependencies = null == currentDataView ? void 0 : currentDataView.rawData;
+        Array.isArray(dependencies) && dependencies.forEach((dependency => {
+            dataViewsInDataSet.has(dependency) && shouldReleaseDependency(dependency) && !releaseDependencies.includes(dependency) && (releaseDependencies.push(dependency), 
+            collectReleaseDependencies(dependency));
+        }));
+    };
+    collectReleaseDependencies(dataView), (0, exports.releaseDataViews)([ dataView, ...releaseDependencies ]);
+};
+
+exports.releaseDataViewWithDependencies = releaseDataViewWithDependencies;
+//# sourceMappingURL=data-view-utils.js.map

package/cjs/data/data-view-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/data-view-utils.ts"],"names":[],"mappings":"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","file":"data-view-utils.js","sourcesContent":["import type { DataView } from '@visactor/vdataset';\n\nconst getDataViewsInDataSet = (dataView?: DataView | null) => {\n  const dataViewMap = dataView?.dataSet?.dataViewMap;\n\n  return dataViewMap ? (Object.values(dataViewMap).filter(Boolean) as DataView[]) : [];\n};\n\nconst detachDataViewListener = (source: DataView, target: DataView) => {\n  source?.target?.removeListener('change', target.reRunAllTransform);\n  source?.target?.removeListener('markRunning', target.markRunning);\n};\n\nexport const detachDataViewDependencies = (dataView?: DataView | null) => {\n  if (!dataView) {\n    return;\n  }\n\n  const dataViews = getDataViewsInDataSet(dataView);\n\n  dataViews.forEach(source => {\n    detachDataViewListener(source, dataView);\n  });\n\n  const dependencies = (dataView as unknown as { rawData?: DataView[] })?.rawData;\n\n  if (Array.isArray(dependencies)) {\n    dependencies.forEach(dependency => {\n      detachDataViewListener(dependency, dataView);\n    });\n  }\n};\n\nexport const releaseDataViews = (dataViews: Array<DataView | null | undefined>) => {\n  const releaseDataViews = Array.from(new Set(dataViews.filter(Boolean) as DataView[]));\n\n  if (!releaseDataViews.length) {\n    return;\n  }\n\n  releaseDataViews.forEach(detachDataViewDependencies);\n  releaseDataViews.forEach(dataView => {\n    dataView.destroy?.();\n  });\n};\n\nexport const releaseDataView = (dataView?: DataView | null) => {\n  releaseDataViews([dataView]);\n};\n\nexport const releaseDataViewWithDependencies = (\n  dataView: DataView | null | undefined,\n  shouldReleaseDependency: (dataView: DataView) => boolean\n) => {\n  if (!dataView) {\n    return;\n  }\n\n  const dataViewsInDataSet = new Set(getDataViewsInDataSet(dataView));\n  const releaseDependencies: DataView[] = [];\n  const collectReleaseDependencies = (currentDataView: DataView) => {\n    const dependencies = (currentDataView as unknown as { rawData?: DataView[] })?.rawData;\n\n    if (!Array.isArray(dependencies)) {\n      return;\n    }\n\n    dependencies.forEach(dependency => {\n      if (\n        dataViewsInDataSet.has(dependency) &&\n        shouldReleaseDependency(dependency) &&\n        !releaseDependencies.includes(dependency)\n      ) {\n        releaseDependencies.push(dependency);\n        collectReleaseDependencies(dependency);\n      }\n    });\n  };\n\n  collectReleaseDependencies(dataView);\n  releaseDataViews([dataView, ...releaseDependencies]);\n};\n"]}

package/cjs/data/initialize.js

@@ -85,4 +85,4 @@ function(TransformLevel) {
     TransformLevel[TransformLevel.linkDotInfo = -7] = "linkDotInfo", TransformLevel[TransformLevel.sankeyLayout = -7] = "sankeyLayout", 
     TransformLevel[TransformLevel.dataZoomFilter = -6] = "dataZoomFilter", TransformLevel[TransformLevel.legendFilter = -5] = "legendFilter";
 }(TransformLevel = exports.TransformLevel || (exports.TransformLevel = {}));
-//# sourceMappingURL=initialize.js.map
+//# sourceMappingURL=initialize.js.map

package/cjs/mark/base/base-mark.d.ts

@@ -5,7 +5,7 @@ import { MarkTypeEnum } from '../interface';
 import type { IMarkRaw, IMarkStateStyle, IMarkStyle, IMark, IMarkOption, StyleConvert, MarkInputStyle, GroupedData, IAttrs, IMarkGraphic, ProgressiveContext, IProgressiveTransformResult, MarkType, AnimationStateValues } from '../interface';
 import type { ICompilableMark, IMarkCompileOption, IMarkConfig, IMarkStateManager, StateValueType } from '../../compile/mark/interface';
 import type { ICompilableInitOption } from '../../compile/interface';
-import type { IGroupGraphicAttribute, IGroup, IGraphic } from '@visactor/vrender-core';
+import type { IGroupGraphicAttribute, IGroup, IGraphic, StateDefinitionsInput } from '@visactor/vrender-core';
 import { GrammarItem } from '../../compile/grammar-item';
 import type { IModel } from '../../model/interface';
 import type { ICompilableData } from '../../compile/data/interface';
@@ -74,7 +74,7 @@ export declare class BaseMark<T extends ICommonSpec> extends GrammarItem impleme
     stopAnimationByState(state?: string): void;
     pauseAnimationByState(state?: string): void;
     resumeAnimationByState(state?: string): void;
-    removeProduct(): void;
+    removeProduct(releaseDetach?: boolean): void;
     release(): void;
     protected _simpleStyle: T;
     setSimpleStyle(s: T): void;
@@ -82,6 +82,11 @@ export declare class BaseMark<T extends ICommonSpec> extends GrammarItem impleme
     protected _option: IMarkOption;
     protected _attributeContext: IModelMarkAttributeContext;
     protected _encoderOfState: Record<string, Record<string, (datum: Datum) => any>>;
+    protected _sharedStateDefinitionsCacheKey?: string;
+    protected _sharedStateDefinitionsCache?: StateDefinitionsInput<Record<string, unknown>>;
+    protected _sharedStateDefinitionRefIds: WeakMap<object, number>;
+    protected _sharedStateDefinitionRefId: number;
+    protected _dynamicSharedStateNames: Set<string>;
     _extensionChannel: {
         [key: string | number | symbol]: string[];
     };
@@ -155,9 +160,14 @@ export declare class BaseMark<T extends ICommonSpec> extends GrammarItem impleme
     protected _getEncoderOfStyle: (stateName: string, style: Partial<IAttrs<T>>) => Record<string, (datum: Datum) => any>;
     protected _setGraphicFromMarkConfig: (g: IMarkGraphic) => void;
     protected _setStateOfGraphic: (g: IMarkGraphic, hasAnimation?: boolean) => void;
+    protected _getSharedStateDefinitionRefId(value: unknown): string;
+    protected _getSharedStateDefinitionValueKey(value: unknown): string;
+    protected _isStaticSharedStateAttribute(stateName: string, key: string): boolean;
     protected _applySharedStateDefinitions(): void;
     protected _addProgressiveGraphic(parent: IGroup, g: IMarkGraphic): void;
     protected _runEncoder(graphics: IMarkGraphic[], noGroupEncode?: boolean): void;
+    protected _excludeStateControlledDiffAttrs(g: IMarkGraphic, diffAttrs: Record<string, any>): Record<string, any>;
+    protected _hasDiffAttrs(g: IMarkGraphic): boolean;
     protected _runApplyGraphic(graphics: IMarkGraphic[]): void;
     protected _updateEncoderByState(): void;
     protected _runState(graphics: IMarkGraphic[]): void;

package/cjs/mark/base/base-mark.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.BaseMark = void 0;
 
-const enum_1 = require("../interface/enum"), interface_1 = require("../../compile/mark/interface"), vutils_extension_1 = require("@visactor/vutils-extension"), color_1 = require("../../util/color"), scale_1 = require("../../util/scale"), gradient_1 = require("../../constant/gradient"), attribute_1 = require("../../constant/attribute"), vscale_1 = require("@visactor/vscale"), util_1 = require("../../theme/color-scheme/util"), mark_1 = require("../../compile/mark"), vutils_1 = require("@visactor/vutils"), common_1 = require("../utils/common"), interface_2 = require("../../compile/interface"), vrender_core_1 = require("@visactor/vrender-core"), util_2 = require("../../compile/mark/util"), factory_1 = require("../../core/factory"), data_1 = require("../../constant/data"), grammar_item_1 = require("../../compile/grammar-item"), layout_1 = require("../../constant/layout"), interface_3 = require("../../animation/interface"), compilable_data_1 = require("../../compile/data/compilable-data"), mark_2 = require("../../util/mark"), debug_1 = require("../../util/debug"), morph_1 = require("../../compile/morph"), graphic_state_1 = require("../../util/graphic-state");
+const enum_1 = require("../interface/enum"), interface_1 = require("../../compile/mark/interface"), vutils_extension_1 = require("@visactor/vutils-extension"), color_1 = require("../../util/color"), scale_1 = require("../../util/scale"), gradient_1 = require("../../constant/gradient"), attribute_1 = require("../../constant/attribute"), vscale_1 = require("@visactor/vscale"), util_1 = require("../../theme/color-scheme/util"), mark_1 = require("../../compile/mark"), vutils_1 = require("@visactor/vutils"), common_1 = require("../utils/common"), interface_2 = require("../../compile/interface"), vrender_core_1 = require("@visactor/vrender-core"), util_2 = require("../../compile/mark/util"), factory_1 = require("../../core/factory"), data_1 = require("../../constant/data"), grammar_item_1 = require("../../compile/grammar-item"), layout_1 = require("../../constant/layout"), interface_3 = require("../../animation/interface"), compilable_data_1 = require("../../compile/data/compilable-data"), mark_2 = require("../../util/mark"), debug_1 = require("../../util/debug"), morph_1 = require("../../compile/morph"), graphic_state_1 = require("../../util/graphic-state"), statesClearedBeforeReInitKey = Symbol("statesClearedBeforeReInit");
 
 class BaseMark extends grammar_item_1.GrammarItem {
     commit(render, recursion) {
@@ -170,8 +170,8 @@ class BaseMark extends grammar_item_1.GrammarItem {
     stopAnimationByState(state) {}
     pauseAnimationByState(state) {}
     resumeAnimationByState(state) {}
-    removeProduct() {
-        this._product && this._product.parent && this._product.parent.removeChild(this._product), 
+    removeProduct(releaseDetach) {
+        this._product && this._product.parent && this._product.parent.removeChild(this._product, releaseDetach), 
         this._product = null, this._compiledProductId = null;
     }
     release() {
@@ -189,8 +189,9 @@ class BaseMark extends grammar_item_1.GrammarItem {
             zIndex: layout_1.LayoutZIndex.Mark,
             morph: !1
         }, this._visible = !0, this.stateStyle = {}, this._unCompileChannel = {}, this._disabledAnimationStates = [], 
-        this._skipBeforeLayouted = !1, this._extensionChannel = {}, this._computeExChannel = {}, 
-        this._graphicMap = new Map, this._graphics = [], this._getEncoderOfStyle = (stateName, style) => {
+        this._skipBeforeLayouted = !1, this._sharedStateDefinitionRefIds = new WeakMap, 
+        this._sharedStateDefinitionRefId = 0, this._dynamicSharedStateNames = new Set, this._extensionChannel = {}, 
+        this._computeExChannel = {}, this._graphicMap = new Map, this._graphics = [], this._getEncoderOfStyle = (stateName, style) => {
             if (style && stateName) {
                 const validEncoder = {};
                 return Object.keys(style).forEach((key => {
@@ -203,7 +204,11 @@ class BaseMark extends grammar_item_1.GrammarItem {
             setCustomizedShape && (g.pathProxy = attrs => setCustomizedShape(g.context.data, attrs, new vrender_core_1.CustomPath2D)), 
             graphicName && ((0, vutils_1.isFunction)(graphicName) ? g.name = graphicName(g) : g.name = graphicName);
         }, this._setStateOfGraphic = (g, hasAnimation) => {
-            g.clearStates(), g.stateProxy = null, g.context.diffState !== enum_1.DiffState.enter && g.context.diffState !== enum_1.DiffState.update || g.context.states && g.useStates(g.context.states, hasAnimation);
+            var _a, _b, _c;
+            g.stateProxy = null;
+            const targetStates = g.context.diffState === enum_1.DiffState.enter || g.context.diffState === enum_1.DiffState.update ? g.context.states : void 0, hasCurrentState = !!((null === (_a = g.currentStates) || void 0 === _a ? void 0 : _a.length) || (null === (_b = g.effectiveStates) || void 0 === _b ? void 0 : _b.length) || g.resolvedStatePatch || (null === (_c = g.registeredActiveScopes) || void 0 === _c ? void 0 : _c.size));
+            ((null == targetStates ? void 0 : targetStates.length) || hasCurrentState) && (0, 
+            graphic_state_1.setGraphicStates)(g, targetStates, hasAnimation);
         }, this.name = name, this.model = option.model, this.key = option.key, this.state = new mark_1.MarkStateManager(option, this), 
         this._attributeContext = option.attributeContext, null === (_a = option.map) || void 0 === _a || _a.set(this.id, this);
     }
@@ -541,6 +546,7 @@ class BaseMark extends grammar_item_1.GrammarItem {
         if (graphics.forEach((g => {
             const state = g.context.animationState;
             if ("appear" === state) return;
+            if ("update" === state && !this._hasDiffAttrs(g)) return;
             const config = animationConfig[state];
             if (config && config.length > 0) {
                 const configList = config.map(((item, index) => ({
@@ -640,25 +646,60 @@ class BaseMark extends grammar_item_1.GrammarItem {
             groupStyles: groupStyles
         };
     }
+    _getSharedStateDefinitionRefId(value) {
+        if ("object" != typeof value && "function" != typeof value || null === value) return `${value}`;
+        const objectValue = value;
+        let id = this._sharedStateDefinitionRefIds.get(objectValue);
+        return id || (id = ++this._sharedStateDefinitionRefId, this._sharedStateDefinitionRefIds.set(objectValue, id)), 
+        `ref:${id}`;
+    }
+    _getSharedStateDefinitionValueKey(value) {
+        try {
+            const jsonValue = JSON.stringify(value);
+            return null != jsonValue ? jsonValue : `${value}`;
+        } catch (_error) {
+            return this._getSharedStateDefinitionRefId(value);
+        }
+    }
+    _isStaticSharedStateAttribute(stateName, key) {
+        var _a, _b;
+        const stateStyle = null === (_a = this.stateStyle[stateName]) || void 0 === _a ? void 0 : _a[key];
+        if (!stateStyle || stateStyle.referer || (0, vutils_1.isFunction)(stateStyle.postProcess) || key in this._computeExChannel) return !1;
+        const style = stateStyle.style;
+        return !(0, vutils_1.isFunction)(style) && (!gradient_1.GradientType.includes(null == style ? void 0 : style.gradient) && (![ "outerBorder", "innerBorder" ].includes(key) && !(0, 
+        vscale_1.isValidScaleType)(null === (_b = null == style ? void 0 : style.scale) || void 0 === _b ? void 0 : _b.type)));
+    }
     _applySharedStateDefinitions() {
         var _a;
         if (!this._product) return;
         const stateNames = Object.keys(null !== (_a = this._encoderOfState) && void 0 !== _a ? _a : {}).filter((stateName => "group" !== stateName && "update" !== stateName));
-        if (!stateNames.length) return void (this._product.sharedStateDefinitions = void 0);
+        if (!stateNames.length) return this._dynamicSharedStateNames.clear(), void (void 0 !== this._product.sharedStateDefinitions && (this._product.sharedStateDefinitions = void 0));
         const sortedStateNames = this._stateSort ? stateNames.slice().sort(this._stateSort) : stateNames, statePriority = new Map;
         sortedStateNames.forEach(((stateName, index) => {
             statePriority.set(stateName, index);
         }));
-        const sharedStateDefinitions = {};
-        stateNames.forEach((stateName => {
+        const sharedStateDefinitions = {}, cacheKeys = [], dynamicSharedStateNames = new Set;
+        if (stateNames.forEach((stateName => {
             var _a;
-            const encoder = this._encoderOfState[stateName];
-            sharedStateDefinitions[stateName] = {
-                priority: null !== (_a = statePriority.get(stateName)) && void 0 !== _a ? _a : 0,
-                declaredAffectedKeys: Object.keys(null != encoder ? encoder : {}),
-                resolver: ({graphic: graphic}) => this._runEncoderOfGraphic(encoder, graphic)
+            const encoder = this._encoderOfState[stateName], patch = {}, dynamicEncoder = {}, patchKeys = [], dynamicKeys = [];
+            if (Object.keys(null != encoder ? encoder : {}).forEach((key => {
+                this._isStaticSharedStateAttribute(stateName, key) ? (patch[key] = this._computeAttribute(key, stateName)(void 0), 
+                patchKeys.push(key)) : (dynamicEncoder[key] = encoder[key], dynamicKeys.push(key));
+            })), !patchKeys.length && !dynamicKeys.length) return;
+            const definition = {
+                priority: null !== (_a = statePriority.get(stateName)) && void 0 !== _a ? _a : 0
             };
-        })), this._product.sharedStateDefinitions = sharedStateDefinitions;
+            patchKeys.length && (definition.patch = patch), dynamicKeys.length && (dynamicSharedStateNames.add(stateName), 
+            definition.declaredAffectedKeys = dynamicKeys, definition.resolver = ({graphic: graphic}) => this._runEncoderOfGraphic(dynamicEncoder, graphic)), 
+            sharedStateDefinitions[stateName] = definition, cacheKeys.push([ stateName, definition.priority, patchKeys.sort().map((key => `${key}:${this._getSharedStateDefinitionValueKey(patch[key])}`)), dynamicKeys.sort().map((key => {
+                var _a;
+                const stateStyle = null === (_a = this.stateStyle[stateName]) || void 0 === _a ? void 0 : _a[key];
+                return `${key}:${this._getSharedStateDefinitionRefId(null == stateStyle ? void 0 : stateStyle.style)}:${this._getSharedStateDefinitionRefId(null == stateStyle ? void 0 : stateStyle.postProcess)}:${this._getSharedStateDefinitionRefId(null == stateStyle ? void 0 : stateStyle.referer)}`;
+            })) ].join("|"));
+        })), !cacheKeys.length) return this._dynamicSharedStateNames.clear(), void (void 0 !== this._product.sharedStateDefinitions && (this._product.sharedStateDefinitions = void 0));
+        const cacheKey = cacheKeys.sort().join("||");
+        this._dynamicSharedStateNames = dynamicSharedStateNames, cacheKey === this._sharedStateDefinitionsCacheKey && this._sharedStateDefinitionsCache ? this._product.sharedStateDefinitions !== this._sharedStateDefinitionsCache && (this._product.sharedStateDefinitions = this._sharedStateDefinitionsCache) : (this._sharedStateDefinitionsCacheKey = cacheKey, 
+        this._sharedStateDefinitionsCache = sharedStateDefinitions, this._product.sharedStateDefinitions = sharedStateDefinitions);
     }
     _addProgressiveGraphic(parent, g) {
         parent.incrementalAppendChild(g);
@@ -674,15 +715,33 @@ class BaseMark extends grammar_item_1.GrammarItem {
             g.context.finalAttrs = finalAttrs;
         }));
     }
+    _excludeStateControlledDiffAttrs(g, diffAttrs) {
+        var _a;
+        if (!diffAttrs || !Object.keys(diffAttrs).length) return diffAttrs;
+        let nextDiffAttrs;
+        const excludeKey = key => {
+            key in diffAttrs && (nextDiffAttrs || (nextDiffAttrs = Object.assign({}, diffAttrs)), 
+            delete nextDiffAttrs[key]);
+        };
+        return g.resolvedStatePatch && Object.keys(g.resolvedStatePatch).forEach(excludeKey), 
+        null === (_a = g.context.states) || void 0 === _a || _a.forEach((stateName => {
+            var _a;
+            const encoder = null === (_a = this._encoderOfState) || void 0 === _a ? void 0 : _a[stateName];
+            encoder && Object.keys(encoder).forEach(excludeKey);
+        })), null != nextDiffAttrs ? nextDiffAttrs : diffAttrs;
+    }
+    _hasDiffAttrs(g) {
+        return !!g.context.diffAttrs && Object.keys(g.context.diffAttrs).length > 0;
+    }
     _runApplyGraphic(graphics) {
         const hasAnimation = this.hasAnimation();
         graphics.forEach(((g, index) => {
             var _a, _b, _c;
             const finalAttrs = g.context.finalAttrs, hasStateAnimation = this.hasAnimationByState(g.context.animationState);
             if (g.setAttributes) {
-                const diffAttrs = (0, mark_2.getDiffAttributesOfGraphic)(g, finalAttrs);
+                const diffAttrs = this._excludeStateControlledDiffAttrs(g, (0, mark_2.getDiffAttributesOfGraphic)(g, finalAttrs));
                 g.context.diffAttrs = diffAttrs, g.context.reusing ? (g.context.lastAttrs = g.attribute, 
-                g.initAttributes({}), g.context.reusing = !1) : hasStateAnimation || (hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs)), 
+                g.initAttributes(finalAttrs), g.context.reusing = !1) : hasStateAnimation || (hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs)), 
                 !(null === (_c = this.renderContext) || void 0 === _c ? void 0 : _c.progressive) && this._product && g.parent !== this._product && this._product.appendChild(g), 
                 hasAnimation && g.setFinalAttributes(finalAttrs);
             } else {
@@ -779,8 +838,12 @@ class BaseMark extends grammar_item_1.GrammarItem {
         if (!this._product) return;
         const stateInfo = this.state.getStateInfo(key);
         this._graphics.forEach((g => {
-            "in" === this.state.checkOneState(g, g.context.data, stateInfo) ? (0, graphic_state_1.addGraphicState)(g, key, !0, this.hasAnimationByState("state")) : (0, 
-            graphic_state_1.removeGraphicState)(g, key, this.hasAnimationByState("state"));
+            const reinitStateGraphic = g, statesClearedBeforeReInit = reinitStateGraphic[statesClearedBeforeReInitKey], wasStateClearedBeforeReInit = null == statesClearedBeforeReInit ? void 0 : statesClearedBeforeReInit.includes(key), hasStateAnimation = !wasStateClearedBeforeReInit && this.hasAnimationByState("state");
+            if ("in" === this.state.checkOneState(g, g.context.data, stateInfo) ? (0, graphic_state_1.addGraphicState)(g, key, !0, hasStateAnimation) : (0, 
+            graphic_state_1.removeGraphicState)(g, key, hasStateAnimation), wasStateClearedBeforeReInit) {
+                const nextStates = statesClearedBeforeReInit.filter((stateName => stateName !== key));
+                nextStates.length ? reinitStateGraphic[statesClearedBeforeReInitKey] = nextStates : delete reinitStateGraphic[statesClearedBeforeReInitKey];
+            }
         }));
     }
     clearExitGraphics() {
@@ -800,7 +863,7 @@ class BaseMark extends grammar_item_1.GrammarItem {
                         })
                     })));
                     g.applyAnimationState([ "exit" ], [ 1 === exitConfigList.length ? exitConfigList[0] : exitConfigList ], (() => {
-                        doRemove(g, key);
+                        g.context.diffState === enum_1.DiffState.exit && g.isExiting && this._graphicMap.get(key) === g && doRemove(g, key);
                     }));
                 }
             } else doRemove(g, key);
@@ -911,7 +974,8 @@ class BaseMark extends grammar_item_1.GrammarItem {
     }
     clearBeforeReInit() {
         this.state.clearAllStateInfo(), this.uncommit(), this.stateStyle = {}, this.getGraphics().forEach((g => {
-            g.clearStates();
+            var _a;
+            (null === (_a = g.currentStates) || void 0 === _a ? void 0 : _a.length) && (g[statesClearedBeforeReInitKey] = g.currentStates.slice());
         }));
     }
 }