@visactor/vchart 1.15.5-alpha.8 → 2.0.0-alpha.0

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

@@ -14,21 +14,180 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.BaseMark = void 0;
 
-const 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"), compilable_mark_1 = require("../../compile/mark/compilable-mark"), vutils_1 = require("@visactor/vutils"), utils_1 = require("../utils");
+const interface_1 = require("../../compile/mark/interface"), vutils_extension_1 = require("@visactor/vutils-extension"), color_1 = require("../../util/color"), scale_1 = require("../../util/scale"), enum_1 = require("../interface/enum"), 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"), compilable_data_1 = require("../../compile/data/compilable-data"), util_3 = require("../../util");
 
-class BaseMark extends compilable_mark_1.CompilableMark {
+class BaseMark extends grammar_item_1.GrammarItem {
+    commit(render, recursion) {
+        recursion && this.getMarks().length > 0 && this.getMarks().forEach((m => m.commit(!1, recursion))), 
+        this._isCommited = !0, render && this.getCompiler().renderNextTick();
+    }
+    uncommit() {
+        this._isCommited = !1;
+    }
+    isCommited() {
+        return this._isCommited;
+    }
+    getMarkConfig() {
+        return this._markConfig;
+    }
+    setMarkConfig(config) {
+        Object.keys(config).forEach((key => {
+            this._markConfig[key] = config[key];
+        }));
+    }
+    getVisible() {
+        return this._visible;
+    }
+    setVisible(visible) {
+        this._visible = visible;
+    }
+    getUserId() {
+        return this._userId;
+    }
+    setUserId(userId) {
+        (0, vutils_1.isValid)(userId) && (this._userId = userId);
+    }
+    getDataView() {
+        var _a;
+        return null === (_a = this._data) || void 0 === _a ? void 0 : _a.getDataView();
+    }
+    setDataView(d) {
+        (0, vutils_1.isNil)(this._data) && this.initMarkData(this._option), this._data.setDataView(d);
+    }
+    getData() {
+        return this._data;
+    }
+    setData(d) {
+        this._data = d, d && d.addRelatedMark(this);
+    }
+    hasState(state) {
+        return state in this.state.getStateMap();
+    }
+    getState(state) {
+        return this.state.getStateMap()[state];
+    }
+    getAnimationConfig() {
+        return this._animationConfig;
+    }
+    setAnimationConfig(config) {
+        this._animationConfig = config;
+    }
+    setSkipBeforeLayouted(skip) {
+        this._skipBeforeLayouted = skip;
+    }
+    setGroupKey(groupKey) {
+        this._groupKey = groupKey;
+    }
+    getProduct() {
+        return this._product;
+    }
+    initMarkData(option) {
+        this._data = new compilable_data_1.CompilableData(option), this._data.addRelatedMark(this);
+    }
+    _compileProduct(option) {
+        this.commit(), this._context = null == option ? void 0 : option.context;
+        const product = this.getProduct();
+        if (this._visible) {
+            if ((0, vutils_1.isValid)(product)) option.group && product.parent !== option.group && option.group.appendChild(product); else {
+                if (!this.getCompiler().isInited) return;
+                this._initProduct(null == option ? void 0 : option.group);
+            }
+            (0, vutils_1.isNil)(this._product) || (this.compileData(), this.compileState(), 
+            this.compileEncode());
+        } else (0, vutils_1.isValid)(product) && this.removeProduct();
+    }
+    _initProduct(group) {
+        var _a;
+        if (!this.getStage()) return;
+        const id = this.getProductId();
+        this._product = (0, vrender_core_1.createGroup)("group" !== this.type ? {
+            pickable: !1,
+            zIndex: this._markConfig.zIndex,
+            overflow: this._markConfig.overflow
+        } : {}), this._product.name = id, (null != group ? group : null === (_a = this.getCompiler()) || void 0 === _a ? void 0 : _a.getRootGroup()).appendChild(this._product), 
+        this._compiledProductId = id;
+    }
+    generateProductId() {
+        return this._userId ? `${this._userId}` : `${this.name}_${this.id}`;
+    }
+    layout(layout) {}
+    compileData() {
+        (0, vutils_1.isNil)(this._data) || this._data.compile();
+    }
+    compileEncode() {}
+    compileState() {}
+    compileAnimation() {}
+    compileContext(extraContext) {
+        this._context = Object.assign({
+            markId: this.id,
+            modelId: this.model.id,
+            markUserId: this._userId,
+            modelUserId: this.model.userId
+        }, extraContext);
+    }
+    getContext() {
+        return this._context;
+    }
+    compileTransform() {}
+    updateState(newState, noRender) {
+        return this.commit(), this.state.updateState(newState, noRender);
+    }
+    getMarks() {
+        return [];
+    }
+    runAnimationByState(state) {}
+    stopAnimationByState(state) {}
+    pauseAnimationByState(state) {}
+    resumeAnimationByState(state) {}
+    removeProduct() {
+        this._product && this._product.parent && this._product.parent.removeChild(this._product), 
+        this._product = null, this._compiledProductId = null;
+    }
+    release() {
+        this.state.release(), super.release();
+    }
+    setSimpleStyle(s) {
+        this._simpleStyle = s;
+    }
+    getSimpleStyle() {
+        return this._simpleStyle;
+    }
     constructor(name, option) {
         var _a;
-        super(option, name, option.model), this._extensionChannel = {}, this._computeExChannel = {}, 
+        super(option), this.type = void 0, this.name = "mark", this._markConfig = {
+            zIndex: layout_1.LayoutZIndex.Mark,
+            morph: !1
+        }, this._visible = !0, this.stateStyle = {}, this._unCompileChannel = {}, this._skipBeforeLayouted = !1, 
+        this._extensionChannel = {}, this._computeExChannel = {}, this._graphicMap = new Map, 
+        this._graphics = [], this._getEncoderByState = stateName => {
+            const style = this.stateStyle[stateName];
+            if (style) {
+                const validEncoder = {};
+                return Object.keys(style).forEach((key => {
+                    this._unCompileChannel[key] || (validEncoder[key] = this._computeAttribute(key, stateName));
+                })), validEncoder;
+            }
+            return null;
+        }, this._setGraphicFromMarkConfig = g => {
+            const {setCustomizedShape: setCustomizedShape, support3d: support3d, graphicName: graphicName} = this._markConfig;
+            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 => {
+            g.clearStates(), g.stateProxy = null, g.context.diffState !== enum_1.DiffState.enter && g.context.diffState !== enum_1.DiffState.update || (g.stateProxy = (stateName, nexStates) => {
+                var _a;
+                return this._runEncoderOfGraphic(null === (_a = this._encoderOfState) || void 0 === _a ? void 0 : _a[stateName], g);
+            }, g.useStates(g.context.states));
+        }, 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);
     }
     created() {
         this._initStyle();
     }
-    initStyleWithSpec(spec, key) {
+    initStyleWithSpec(spec) {
         spec && ((0, vutils_1.isValid)(spec.id) && (this._userId = spec.id), (0, vutils_1.isBoolean)(spec.interactive) && (this._markConfig.interactive = spec.interactive), 
         (0, vutils_1.isValid)(spec.zIndex) && (this._markConfig.zIndex = spec.zIndex), (0, 
-        vutils_1.isBoolean)(spec.visible) && this.setVisible(spec.visible), this._initSpecStyle(spec, this.stateStyle, key));
+        vutils_1.isBoolean)(spec.visible) && this.setVisible(spec.visible), this._markConfig.setCustomizedShape = spec.customShape, 
+        this._stateSort = spec.stateSort, this._initSpecStyle(spec));
     }
     _transformStyleValue(styleConverter, transform) {
         if (styleConverter.scale) {
@@ -43,21 +202,21 @@ class BaseMark extends compilable_mark_1.CompilableMark {
     isUserLevel(level) {
         return [ attribute_1.AttributeLevel.User_Mark, attribute_1.AttributeLevel.User_Series, attribute_1.AttributeLevel.User_Chart, attribute_1.AttributeLevel.User_SeriesStyle ].includes(level);
     }
-    setStyle(style, state = "normal", level = 0, stateStyle = this.stateStyle) {
+    setStyle(style, state = "normal", level = 0) {
         if ((0, vutils_1.isNil)(style)) return;
-        void 0 === stateStyle[state] && (stateStyle[state] = {});
+        void 0 === this.stateStyle[state] && (this.stateStyle[state] = {});
         const isUserLevel = this.isUserLevel(level);
         Object.keys(style).forEach((attr => {
             let attrStyle = style[attr];
-            (0, vutils_1.isNil)(attrStyle) || (attrStyle = this._filterAttribute(attr, attrStyle, state, level, isUserLevel, stateStyle), 
-            this.setAttribute(attr, attrStyle, state, level, stateStyle));
+            (0, vutils_1.isNil)(attrStyle) || (attrStyle = this._filterAttribute(attr, attrStyle, state, level, isUserLevel), 
+            this.setAttribute(attr, attrStyle, state, level));
         }));
     }
     getStyle(key, state = "normal") {
         var _a;
         return null === (_a = this.stateStyle[state][key]) || void 0 === _a ? void 0 : _a.style;
     }
-    _filterAttribute(attr, style, state, level, isUserLevel, stateStyle = this.stateStyle) {
+    _filterAttribute(attr, style, state, level, isUserLevel) {
         let newStyle = this._styleConvert(style);
         if (isUserLevel) switch (attr) {
           case "angle":
@@ -70,22 +229,22 @@ class BaseMark extends compilable_mark_1.CompilableMark {
             break;
 
           case "curveType":
-            newStyle = this._transformStyleValue(newStyle, (value => (0, utils_1.curveTypeTransform)(value, this._option.model.direction)));
+            newStyle = this._transformStyleValue(newStyle, (value => (0, common_1.curveTypeTransform)(value, this._option.model.direction)));
         }
         return newStyle;
     }
-    setReferer(mark, styleKey, state, stateStyle = this.stateStyle) {
+    setReferer(mark, styleKey, state) {
         var _a;
         if (mark) if (styleKey && state) {
-            const style = null !== (_a = stateStyle[state]) && void 0 !== _a ? _a : {
+            const style = null !== (_a = this.stateStyle[state]) && void 0 !== _a ? _a : {
                 [styleKey]: {}
             };
-            stateStyle[state][styleKey] = Object.assign(Object.assign({}, style[styleKey]), {
+            this.stateStyle[state][styleKey] = Object.assign(Object.assign({}, style[styleKey]), {
                 referer: mark
             });
-        } else Object.entries(stateStyle).forEach((([state, style]) => {
+        } else Object.entries(this.stateStyle).forEach((([state, style]) => {
             Object.entries(style).forEach((([styleKey, style]) => {
-                stateStyle[state][styleKey].referer = mark;
+                this.stateStyle[state][styleKey].referer = mark;
             }));
         }));
     }
@@ -93,22 +252,31 @@ class BaseMark extends compilable_mark_1.CompilableMark {
         var _a;
         (null === (_a = this.stateStyle[state]) || void 0 === _a ? void 0 : _a[key]) && (this.stateStyle[state][key].postProcess = postProcessFunc);
     }
-    getAttribute(key, datum, state = "normal", opt) {
-        return this._computeAttribute(key, state)(datum, opt);
+    getAttribute(key, datum, state = "normal") {
+        return this._computeAttribute(key, state)(datum);
     }
-    setAttribute(attr, style, state = "normal", level = 0, stateStyle = this.stateStyle) {
+    getAttributesOfState(datum, state = "normal") {
+        const style = this.stateStyle[state];
+        if (style) {
+            const res = {};
+            return Object.keys(style).forEach((k => {
+                this._unCompileChannel[k] || (res[k] = this._computeAttribute(k, state)(datum));
+            })), res;
+        }
+    }
+    setAttribute(attr, style, state = "normal", level = 0) {
         var _a;
-        void 0 === stateStyle[state] && (stateStyle[state] = {}), void 0 === stateStyle[state][attr] && (stateStyle[state][attr] = {
+        void 0 === this.stateStyle[state] && (this.stateStyle[state] = {}), void 0 === this.stateStyle[state][attr] && (this.stateStyle[state][attr] = {
             level: level,
             style: style,
             referer: void 0
         });
-        const attrLevel = null === (_a = stateStyle[state][attr]) || void 0 === _a ? void 0 : _a.level;
-        (0, vutils_1.isValid)(attrLevel) && attrLevel <= level && (0, vutils_extension_1.mergeSpec)(stateStyle[state][attr], {
+        const attrLevel = null === (_a = this.stateStyle[state][attr]) || void 0 === _a ? void 0 : _a.level;
+        (0, vutils_1.isValid)(attrLevel) && attrLevel <= level && (0, vutils_extension_1.mergeSpec)(this.stateStyle[state][attr], {
             style: style,
             level: level
         }), "normal" !== state && attr in this._extensionChannel && this._extensionChannel[attr].forEach((key => {
-            void 0 === stateStyle[state][key] && (stateStyle[state][key] = stateStyle.normal[key]);
+            void 0 === this.stateStyle[state][key] && (this.stateStyle[state][key] = this.stateStyle.normal[key]);
         }));
     }
     _getDefaultStyle() {
@@ -141,34 +309,36 @@ class BaseMark extends compilable_mark_1.CompilableMark {
         vutils_1.isFunction)(null == stateStyle ? void 0 : stateStyle.postProcess), hasExCompute = key in this._computeExChannel;
         if (hasPostProcess && hasExCompute) {
             const exCompute = this._computeExChannel[key];
-            return (datum, opt) => {
-                let baseValue = baseValueFunctor(datum, opt);
-                return baseValue = stateStyle.postProcess(baseValue, datum, this._attributeContext, opt, this.getDataView()), 
-                exCompute(key, datum, state, opt, baseValue);
+            return datum => {
+                let baseValue = baseValueFunctor(datum);
+                return baseValue = stateStyle.postProcess(baseValue, datum, this._attributeContext, this.getDataView()), 
+                exCompute(key, datum, state, baseValue);
             };
         }
-        if (hasPostProcess) return (datum, opt) => stateStyle.postProcess(baseValueFunctor(datum, opt), datum, this._attributeContext, opt, this.getDataView());
+        if (hasPostProcess) return datum => stateStyle.postProcess(baseValueFunctor(datum), datum, this._attributeContext, this.getDataView());
         if (hasExCompute) {
             const exCompute = this._computeExChannel[key];
-            return (datum, opt) => exCompute(key, datum, state, opt, baseValueFunctor(datum, opt));
+            return datum => exCompute(key, datum, state, baseValueFunctor(datum));
         }
         return baseValueFunctor;
     }
     _computeStateAttribute(stateStyle, key, state) {
         var _a;
-        return stateStyle ? stateStyle.referer ? stateStyle.referer._computeAttribute(key, state) : stateStyle.style ? "function" == typeof stateStyle.style ? (datum, opt) => stateStyle.style(datum, this._attributeContext, opt, this.getDataView()) : gradient_1.GradientType.includes(stateStyle.style.gradient) ? this._computeGradientAttr(stateStyle.style) : [ "outerBorder", "innerBorder" ].includes(key) ? this._computeBorderAttr(stateStyle.style) : (0, 
-        vscale_1.isValidScaleType)(null === (_a = stateStyle.style.scale) || void 0 === _a ? void 0 : _a.type) ? (datum, opt) => {
+        return stateStyle ? stateStyle.referer ? stateStyle.referer._computeAttribute(key, state) : stateStyle.style ? "function" == typeof stateStyle.style ? datum => stateStyle.style(datum, this._attributeContext, {
+            mark: this
+        }, this.getDataView()) : gradient_1.GradientType.includes(stateStyle.style.gradient) ? this._computeGradientAttr(stateStyle.style) : [ "outerBorder", "innerBorder" ].includes(key) ? this._computeBorderAttr(stateStyle.style) : (0, 
+        vscale_1.isValidScaleType)(null === (_a = stateStyle.style.scale) || void 0 === _a ? void 0 : _a.type) ? datum => {
             let data = datum;
             return "series" === this.model.modelType && this.model.getMarkData && (data = this.model.getMarkData(datum)), 
             stateStyle.style.scale.scale(data[stateStyle.style.field]);
-        } : (datum, opt) => stateStyle.style : (datum, opt) => stateStyle.style : (datum, opt) => {};
+        } : datum => stateStyle.style : datum => stateStyle.style : datum => {};
     }
     _initStyle() {
         const defaultStyle = this._getDefaultStyle();
         this.setStyle(defaultStyle, "normal", 0);
     }
-    _initSpecStyle(spec, stateStyle, key) {
-        spec.style && this.setStyle(spec.style, "normal", attribute_1.AttributeLevel.User_Mark, stateStyle);
+    _initSpecStyle(spec) {
+        spec.style && this.setStyle(spec.style, "normal", attribute_1.AttributeLevel.User_Mark);
         const state = spec.state;
         state && Object.keys(state).forEach((key => {
             const stateTemp = state[key];
@@ -181,8 +351,8 @@ class BaseMark extends compilable_mark_1.CompilableMark {
                 vutils_1.isFunction)(stateTemp.filter) ? Object.assign({
                     filter: stateTemp.filter
                 }, stateInfo) : Object.assign(Object.assign({}, stateTemp.filter), stateInfo)), 
-                this.state.addStateInfo(stateInfo), this.setStyle(style, key, attribute_1.AttributeLevel.User_Mark, stateStyle);
-            } else this.setStyle(stateTemp, key, attribute_1.AttributeLevel.User_Mark, stateStyle);
+                this.state.addStateInfo(stateInfo), this.setStyle(style, key, attribute_1.AttributeLevel.User_Mark);
+            } else this.setStyle(stateTemp, key, attribute_1.AttributeLevel.User_Mark);
         }));
     }
     _computeGradientAttr(gradientStyle) {
@@ -194,32 +364,32 @@ class BaseMark extends compilable_mark_1.CompilableMark {
             scale || (colorScale = globalColorScale), colorField || (colorField = globalField);
         }
         const themeColor = (0, util_1.computeActualDataScheme)((0, util_1.getDataScheme)(this.model.getColorScheme(), "series" === this.model.modelType ? null === (_b = (_a = this.model).getSpec) || void 0 === _b ? void 0 : _b.call(_a) : void 0), this.model.getDefaultColorDomain()), mergedStyle = Object.assign(Object.assign({}, gradient_1.DEFAULT_GRADIENT_CONFIG[gradient]), rest);
-        return (data, opt) => {
+        return data => {
             const computeStyle = {}, markData = this.getDataView();
             return Object.keys(mergedStyle).forEach((key => {
                 const value = mergedStyle[key];
                 "stops" === key ? computeStyle.stops = value.map((stop => {
                     const {opacity: opacity, color: color, offset: offset} = stop;
                     let computeColor = null != color ? color : null == colorScale ? void 0 : colorScale.scale(data[colorField]);
-                    return (0, vutils_1.isFunction)(color) && (computeColor = color(data, this._attributeContext, opt, markData)), 
+                    return (0, vutils_1.isFunction)(color) && (computeColor = color(data, this._attributeContext, markData)), 
                     (0, vutils_1.isValid)(opacity) && (computeColor = color_1.Color.SetOpacity(computeColor, opacity)), 
                     {
-                        offset: (0, vutils_1.isFunction)(offset) ? offset(data, this._attributeContext, opt, markData) : offset,
+                        offset: (0, vutils_1.isFunction)(offset) ? offset(data, this._attributeContext, markData) : offset,
                         color: computeColor || themeColor[0]
                     };
-                })) : (0, vutils_1.isFunction)(value) ? computeStyle[key] = value(data, this._attributeContext, opt, markData) : computeStyle[key] = value;
+                })) : (0, vutils_1.isFunction)(value) ? computeStyle[key] = value(data, this._attributeContext, markData) : computeStyle[key] = value;
             })), computeStyle.gradient = gradient, computeStyle;
         };
     }
     _computeBorderAttr(borderStyle) {
         const {scale: scale, field: field} = borderStyle, mergedStyle = __rest(borderStyle, [ "scale", "field" ]);
-        return (data, opt) => {
+        return data => {
             var _a, _b, _c;
             const computeStyle = {};
             if (Object.keys(mergedStyle).forEach((key => {
                 const value = mergedStyle[key];
-                (0, vutils_1.isFunction)(value) ? computeStyle[key] = value(data, this._attributeContext, opt, this.getDataView()) : computeStyle[key] = value;
-            })), "stroke" in computeStyle) gradient_1.GradientType.includes(null === (_c = mergedStyle.stroke) || void 0 === _c ? void 0 : _c.gradient) && (computeStyle.stroke = this._computeGradientAttr(mergedStyle.stroke)(data, opt)); else {
+                (0, vutils_1.isFunction)(value) ? computeStyle[key] = value(data, this._attributeContext, this.getDataView()) : computeStyle[key] = value;
+            })), "stroke" in computeStyle) gradient_1.GradientType.includes(null === (_c = mergedStyle.stroke) || void 0 === _c ? void 0 : _c.gradient) && (computeStyle.stroke = this._computeGradientAttr(mergedStyle.stroke)(data)); else {
                 const themeColor = (0, util_1.computeActualDataScheme)((0, util_1.getDataScheme)(this.model.getColorScheme(), "series" === this.model.modelType ? null === (_b = (_a = this.model).getSpec) || void 0 === _b ? void 0 : _b.call(_a) : void 0), this.model.getDefaultColorDomain());
                 let colorScale = scale, colorField = field;
                 if (!(scale && field || "series" !== this.model.modelType)) {
@@ -231,6 +401,215 @@ class BaseMark extends compilable_mark_1.CompilableMark {
             return computeStyle;
         };
     }
+    _getDataByKey(data) {
+        return (0, common_1.groupData)(data, ((datum, index) => {
+            var _a;
+            return `${this._groupKeyGetter(datum)}_${null !== (_a = this._keyGetter(datum)) && void 0 !== _a ? _a : index}`;
+        }));
+    }
+    _getCommonContext() {
+        return {
+            markType: this.type,
+            markId: this.id,
+            modelId: this.model.id,
+            markUserId: this._userId,
+            modelUserId: this.model.userId
+        };
+    }
+    reuse(mark) {
+        this.type === mark.type && (this._product = mark.getProduct(), this._graphics = mark.getGraphics(), 
+        this._graphicMap = mark._graphicMap, this._graphicMap.forEach((g => {
+            g.context = Object.assign(Object.assign({}, g.context), this._getCommonContext());
+        })), this._dataByKey = mark._dataByKey);
+    }
+    getGraphics() {
+        return this._graphics;
+    }
+    _createGraphic(attrs = {}) {
+        return factory_1.Factory.createGraphicComponent(this.type, attrs);
+    }
+    _runGroupData(data) {
+        this._keyGetter = (0, vutils_1.isFunction)(this.key) ? this.key : (0, vutils_1.isValid)(this.key) ? datum => null == datum ? void 0 : datum[this.key] : datum => null == datum ? void 0 : datum[data_1.DEFAULT_DATA_KEY], 
+        this._groupKeyGetter = (0, vutils_1.isValid)(this._groupKey) ? datum => `${null == datum ? void 0 : datum[this._groupKey]}` : () => "key", 
+        this._dataByGroup = (0, common_1.groupData)(data, this._groupKeyGetter);
+    }
+    _runJoin(data) {
+        const newGroupedData = this._getDataByKey(data), prevGroupedData = this._dataByKey, newGraphics = [], enterGraphics = new Set(this._graphics.filter((g => g.context.diffState === enum_1.DiffState.enter))), callback = (key, newData, prevData) => {
+            var _a, _b, _c;
+            let g, diffState;
+            (0, vutils_1.isNil)(newData) ? (g = this._graphicMap.get(key), g && (diffState = enum_1.DiffState.exit)) : (0, 
+            vutils_1.isNil)(prevData) ? (g = this._graphicMap.has(key) ? this._graphicMap.get(key) : {}, 
+            diffState = enum_1.DiffState.enter, null === (_a = g.context) || void 0 === _a || _a.diffState, 
+            enum_1.DiffState.exit, this._graphicMap.set(key, g), newGraphics.push(g)) : (g = this._graphicMap.get(key), 
+            g && (diffState = enum_1.DiffState.update, newGraphics.push(g))), g && (g.context = Object.assign(Object.assign({}, this._getCommonContext()), {
+                diffState: diffState,
+                data: newData,
+                uniqueKey: key,
+                key: newData ? this._keyGetter(newData[0]) : null === (_b = g.context) || void 0 === _b ? void 0 : _b.key,
+                groupKey: newData ? this._groupKeyGetter(newData[0]) : null === (_c = g.context) || void 0 === _c ? void 0 : _c.groupKey
+            }), enterGraphics.delete(g));
+        };
+        if (prevGroupedData && newGroupedData) {
+            const prevMap = new Map(prevGroupedData.data);
+            newGroupedData.keys.forEach((key => {
+                callback(key, newGroupedData.data.get(key), prevMap.get(key)), prevMap.delete(key);
+            })), prevGroupedData.keys.forEach((key => {
+                prevMap.has(key) && callback(key, null, prevMap.get(key));
+            }));
+        } else newGroupedData ? newGroupedData.keys.forEach((key => {
+            callback(key, newGroupedData.data.get(key), null);
+        })) : prevGroupedData && prevGroupedData.keys.forEach((key => {
+            callback(key, null, prevGroupedData.data.get(key));
+        }));
+        enterGraphics.forEach((g => {
+            this._graphicMap.delete(g.context.uniqueKey), g.parent && g.parent.removeChild(g), 
+            g.release();
+        })), this._dataByKey = newGroupedData, this._graphics = newGraphics;
+    }
+    _runEncoderOfGraphic(styles, g, attrs = {}) {
+        return (0, common_1.runEncoder)(styles, g.context.data[0], attrs);
+    }
+    _runGroupEncoder(groupStyles) {
+        if (!this._dataByGroup) return null;
+        const attrsByGroup = {};
+        return this._dataByGroup.keys.forEach((key => {
+            attrsByGroup[key] = (0, common_1.runEncoder)(groupStyles, this._dataByGroup.data.get(key)[0]);
+        })), attrsByGroup;
+    }
+    _transformGraphicAttributes(g, attrs, groupAttrs) {
+        return Object.assign(Object.assign({}, groupAttrs), attrs);
+    }
+    _separateNormalStyle(normalStyle, splitGroupEncoder) {
+        const updateStyles = {}, groupStyles = {};
+        return Object.keys(normalStyle).forEach((key => {
+            this._unCompileChannel[key] || (this._option.noSeparateStyle || splitGroupEncoder || (0, 
+            util_2.isStateAttrChangeable)(key, normalStyle, this._groupKey) ? updateStyles[key] = this._computeAttribute(key, "normal") : groupStyles[key] = this._computeAttribute(key, "normal"));
+        })), {
+            updateStyles: updateStyles,
+            groupStyles: groupStyles
+        };
+    }
+    _runEncoder(splitGroupEncoder) {
+        const _a = this.stateStyle, _b = interface_1.STATE_VALUE_ENUM.STATE_NORMAL, normalStyle = _a[_b], {groupStyles: groupStyles, updateStyles: updateStyles} = (__rest(_a, [ "symbol" == typeof _b ? _b : _b + "" ]), 
+        this._separateNormalStyle(normalStyle, splitGroupEncoder)), attrsByGroup = this._runGroupEncoder(groupStyles);
+        this._graphics.forEach(((g, index) => {
+            const attrs = this._runEncoderOfGraphic(updateStyles, g);
+            (0, vutils_1.isNil)(this._markConfig.interactive) || (attrs.pickable = this._markConfig.interactive);
+            const finalAttrs = this._transformGraphicAttributes(g, attrs, null == attrsByGroup ? void 0 : attrsByGroup[g.context.groupKey]);
+            if (g.setAttributes) g.setAttributes(finalAttrs); else {
+                const mockGraphic = g;
+                g = this._createGraphic(finalAttrs), this._product.appendChild(g), g.context = mockGraphic.context, 
+                this._graphics[index] = g, this._graphicMap.set(g.context.uniqueKey, g);
+            }
+            this._setStateOfGraphic(g), this._setGraphicFromMarkConfig(g);
+        }));
+    }
+    _runState() {
+        const encoderOfState = {};
+        Object.keys(this.stateStyle).forEach((stateName => {
+            stateName !== interface_1.STATE_VALUE_ENUM.STATE_NORMAL && (encoderOfState[stateName] = this._getEncoderByState(stateName));
+        })), this._encoderOfState = encoderOfState, this._graphics.forEach((g => {
+            var _a;
+            const newStateValues = [ ...(null !== (_a = g.currentStates) && void 0 !== _a ? _a : []).filter((sv => !this.state.getStateInfo(sv))), ...this.state.checkState(g, g.context.data) ];
+            this._stateSort && newStateValues.length && newStateValues.sort(this._stateSort), 
+            g.context.states = newStateValues;
+        }));
+    }
+    _getAttrsFromConfig(attrs = {}) {
+        const {zIndex: zIndex, clip: clip, clipPath: clipPath, overflow: overflow} = this._markConfig;
+        if ((0, vutils_1.isNil)(zIndex) || (attrs.zIndex = zIndex), (0, vutils_1.isNil)(clip) || (attrs.clip = clip), 
+        !(0, vutils_1.isNil)(clipPath)) {
+            const paths = (0, vutils_1.isArray)(clipPath) ? clipPath : clipPath(this._graphics);
+            paths && paths.length || (attrs.clip = !1), attrs.path = paths;
+        }
+        return (0, vutils_1.isNil)(overflow) || (attrs.overflow = overflow), attrs;
+    }
+    _updateAttrsOfGroup() {
+        var _a;
+        const attrs = this._getAttrsFromConfig();
+        null === (_a = this._product) || void 0 === _a || _a.setAttributes(attrs), this._markConfig.support3d && this._product && this._product.setMode("3d");
+    }
+    runBeforeTransform(data) {
+        var _a;
+        const transforms = null === (_a = this._transform) || void 0 === _a ? void 0 : _a.filter((transformSpec => {
+            if (transformSpec.type) {
+                const transform = factory_1.Factory.getGrammarTransform(transformSpec.type);
+                return !(null == transform ? void 0 : transform.isGraphic);
+            }
+            return !1;
+        }));
+        return this.runTransforms(transforms, data);
+    }
+    _runMainTasks() {
+        var _a, _b, _c, _d;
+        if (!this.getVisible() || this._skipBeforeLayouted && this.getCompiler().getLayoutState() === interface_2.LayoutState.before) return;
+        const data = null !== (_b = null === (_a = this._data) || void 0 === _a ? void 0 : _a.getProduct()) && void 0 !== _b ? _b : [ {} ], transformData = this.runBeforeTransform(data);
+        let markData;
+        if (null == transformData ? void 0 : transformData.progressive) {
+            this.renderContext = {
+                beforeTransformProgressive: transformData.progressive
+            };
+            const p = transformData.progressive;
+            if (p.canAnimate && p.canAnimate() && p.unfinished()) return void this._updateAttrsOfGroup();
+        } else markData = (0, vutils_1.array)(transformData), this._runGroupData(markData);
+        this._runJoin(markData), this._runState(), this._runEncoder(), (null === (_c = this.renderContext) || void 0 === _c ? void 0 : _c.progressive) || this.runTransforms(null === (_d = this._transform) || void 0 === _d ? void 0 : _d.filter((transformSpec => {
+            if (transformSpec.type) {
+                const transform = factory_1.Factory.getGrammarTransform(transformSpec.type);
+                return null == transform ? void 0 : transform.isGraphic;
+            }
+            return !1;
+        })), this._graphics), this._updateAttrsOfGroup();
+    }
+    render() {
+        this._isCommited && ((0, util_3.log)(`render mark: ${this.getProductId()}, type is ${this.type}`), 
+        this._runMainTasks(), this._cleanExitGraphics(), this.uncommit());
+    }
+    updateMarkState(key) {
+        if (!this._product) return;
+        const stateInfo = this.state.getStateInfo(key);
+        this._graphics.forEach((g => {
+            "in" === this.state.checkOneState(g, g.context.data, stateInfo) ? g.addState(key, !0) : g.removeState(key);
+        }));
+    }
+    _cleanExitGraphics() {
+        this._graphicMap.forEach(((g, key) => {
+            g.context.diffState === enum_1.DiffState.exit && (this._graphicMap.delete(key), 
+            g.parent && g.parent.removeChild(g), g.release && g.release());
+        }));
+    }
+    isProgressive() {
+        return this.renderContext && (!!this.renderContext.progressive || !!this.renderContext.beforeTransformProgressive);
+    }
+    canAnimateAfterProgressive() {
+        var _a, _b;
+        return this.renderContext && this.renderContext.beforeTransformProgressive && (null === (_b = (_a = this.renderContext.beforeTransformProgressive).canAnimate) || void 0 === _b ? void 0 : _b.call(_a));
+    }
+    isDoingProgressive() {
+        return this.renderContext && (this.renderContext.progressive && this.renderContext.progressive.currentIndex < this.renderContext.progressive.totalStep || this.renderContext.beforeTransformProgressive && this.renderContext.beforeTransformProgressive.unfinished());
+    }
+    clearProgressive() {
+        this.renderContext && this.renderContext.progressive && (this._graphics = [], this._product.children.forEach((group => {
+            group.incrementalClearChild();
+        })), this._product.removeAllChild()), this.renderContext && this.renderContext.beforeTransformProgressive && this.renderContext.beforeTransformProgressive.release(), 
+        this.renderContext = null;
+    }
+    restartProgressive() {
+        this.renderContext && this.renderContext.progressive && (this.renderContext.progressive.currentIndex = 0);
+    }
+    renderBeforeProgressive() {
+        var _a;
+        const transform = this.renderContext.beforeTransformProgressive;
+        transform.progressiveRun();
+        const output = transform.output();
+        if (null === (_a = transform.canAnimate) || void 0 === _a ? void 0 : _a.call(transform)) {
+            if (transform.unfinished()) return;
+            this._runGroupData(output), this._runJoin(output), this._runState(), this._runEncoder();
+        }
+    }
+    renderProgressive() {
+        var _a;
+        (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.beforeTransformProgressive) && this.renderBeforeProgressive();
+    }
 }
 
 exports.BaseMark = BaseMark;