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

package/cjs/view/View.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 });
 
-const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visactor/vrender-core"), data_1 = require("./data"), events_1 = require("./events"), dataflow_1 = __importDefault(require("./dataflow")), mark_tree_1 = require("../graph/mark-tree"), constants_1 = require("../graph/constants"), canvas_renderer_1 = __importDefault(require("../graph/canvas-renderer")), events_extend_1 = __importDefault(require("../graph/util/events-extend")), constants_2 = require("./constants"), signal_1 = require("./signal"), view_1 = require("../parse/view"), event_1 = require("../parse/event"), util_1 = require("../parse/util"), env_1 = require("../graph/util/env"), group_1 = require("./group"), mark_1 = require("./mark"), layout_1 = require("../graph/layout/layout"), glyph_1 = require("./glyph"), morph_1 = require("../graph/animation/morph"), grammar_record_1 = require("./grammar-record"), animate_1 = require("./animate"), enums_1 = require("../graph/enums"), text_1 = require("../semantic-marks/text"), theme_manager_1 = require("../theme/theme-manager"), factory_1 = require("../core/factory"), component_1 = require("./component"), graphic_1 = require("../graph/util/graphic");
+const vutils_1 = require("@visactor/vutils"), vrender_core_1 = require("@visactor/vrender-core"), data_1 = require("./data"), dataflow_1 = __importDefault(require("./dataflow")), mark_tree_1 = require("../graph/mark-tree"), canvas_renderer_1 = __importDefault(require("../graph/canvas-renderer")), events_extend_1 = __importDefault(require("../graph/util/events-extend")), constants_1 = require("./constants"), signal_1 = require("./signal"), view_1 = require("../parse/view"), util_1 = require("../parse/util"), env_1 = require("../graph/util/env"), group_1 = require("./group"), mark_1 = require("./mark"), grammar_record_1 = require("./grammar-record"), enums_1 = require("../graph/enums"), text_1 = require("../semantic-marks/text"), theme_manager_1 = require("../theme/theme-manager"), factory_1 = require("../core/factory"), component_1 = require("./component"), graphic_1 = require("../graph/util/graphic"), view_diff_1 = require("../graph/view-diff");
 
 class View extends vutils_1.EventEmitter {
     static useRegisters(comps) {
@@ -23,16 +23,14 @@ class View extends vutils_1.EventEmitter {
             const size = this._getContainerSize();
             size && this.resize(size.width, size.height);
         }), 100), this.delegateEvent = (event, type) => {
-            var _a;
-            const activeElement = null === (_a = event.target) || void 0 === _a ? void 0 : _a[constants_1.BridgeElementKey], extendedEvt = (0, 
-            events_extend_1.default)(this, event, activeElement, type, constants_2.EVENT_SOURCE_VIEW);
-            this.emit(type, extendedEvt, activeElement);
+            const extendedEvt = (0, events_extend_1.default)(this, event, type, constants_1.EVENT_SOURCE_VIEW);
+            this.emit(type, extendedEvt, event.element);
         }, this.handleProgressiveFrame = () => {
             this._progressiveMarks.length && this._progressiveMarks.forEach((mark => {
                 mark.isDoingProgressive() && mark.evaluateProgressive();
             })), this.doPreProgressive();
         }, this._config = config, this._options = Object.assign({
-            mode: constants_2.BROWSER
+            mode: constants_1.BROWSER
         }, options), this.initialize();
     }
     getGrammarById(id) {
@@ -73,11 +71,11 @@ class View extends vutils_1.EventEmitter {
         const selectors = (0, vutils_1.array)(selector), res = [];
         return selectors.forEach((selectorStr => {
             if ((0, util_1.isGrammar)(selectorStr)) return void res.push(selectorStr);
-            if (selectorStr[0] === event_1.ID_PREFIX) {
+            if (selectorStr[0] === constants_1.ID_PREFIX) {
                 const mark = this.getMarkById(selectorStr.slice(1));
                 return void (mark && res.push(mark));
             }
-            const marks = selectorStr[0] === event_1.NAME_PREFIX ? this.getMarksByName(selectorStr.slice(1)) : (0, 
+            const marks = selectorStr[0] === constants_1.NAME_PREFIX ? this.getMarksByName(selectorStr.slice(1)) : (0, 
             graphic_1.isMarkType)(selectorStr) ? this.getMarksByType(selectorStr) : null;
             marks && marks.length && marks.forEach((mark => {
                 res.push(mark);
@@ -115,7 +113,8 @@ class View extends vutils_1.EventEmitter {
             break;
 
           case enums_1.GrammarMarkType.glyph:
-            mark = new glyph_1.GlyphMark(this, null == markOptions ? void 0 : markOptions.glyphType, groupMark);
+            const GlyphMark = factory_1.Factory.getMark(enums_1.GrammarMarkType.glyph);
+            GlyphMark && (mark = new GlyphMark(this, null == markOptions ? void 0 : markOptions.glyphType, groupMark));
             break;
 
           case enums_1.GrammarMarkType.component:
@@ -221,13 +220,13 @@ class View extends vutils_1.EventEmitter {
         })), this;
     }
     parseSpec(spec) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (this.emit(enums_1.HOOK_EVENT.BEFORE_PARSE_VIEW), this._spec = spec, (0, view_1.normalizeMarkTree)(spec), 
         spec.theme ? this.theme(spec.theme) : this.theme(theme_manager_1.ThemeManager.getDefaultTheme()), 
         spec.width && this.width(spec.width), spec.height && this.height(spec.height), this.padding(null !== (_b = null !== (_a = spec.padding) && void 0 !== _a ? _a : this._options.padding) && void 0 !== _b ? _b : this._theme.padding), 
         !this.width() || !this.height()) {
             const size = this._getContainerSize();
-            size && (this.updateSignal(constants_2.SIGNAL_WIDTH, size.width), this.updateSignal(constants_2.SIGNAL_HEIGHT, size.height));
+            size && (this.updateSignal(constants_1.SIGNAL_WIDTH, size.width), this.updateSignal(constants_1.SIGNAL_HEIGHT, size.height));
         }
         (null === (_c = spec.signals) || void 0 === _c ? void 0 : _c.length) && spec.signals.forEach((signal => {
             this.signal().parse(signal);
@@ -249,12 +248,13 @@ class View extends vutils_1.EventEmitter {
         })), spec.marks && spec.marks.length && spec.marks.forEach((mark => {
             this.parseMarkSpec(mark);
         })), spec.events && spec.events.length && spec.events.forEach((eventConfig => {
-            this.event(eventConfig);
+            var _b;
+            null === (_b = this.event) || void 0 === _b || _b.call(this, eventConfig);
         })), spec.interactions && spec.interactions.length && spec.interactions.forEach((interaction => {
             this.interaction(interaction.type, interaction);
-        })), !1 === spec.animation ? this.animate.disable() : this.animate.enable(), this.emit(enums_1.HOOK_EVENT.AFTER_PARSE_VIEW), 
-        this._needBuildLayoutTree = !0, this._layoutState = enums_1.LayoutState.before, 
-        this;
+        })), !1 === spec.animation ? null === (_g = this.animate) || void 0 === _g || _g.disable() : null === (_h = this.animate) || void 0 === _h || _h.enable(), 
+        this.emit(enums_1.HOOK_EVENT.AFTER_PARSE_VIEW), this._needBuildLayoutTree = !0, 
+        this._layoutState = enums_1.LayoutState.before, this;
     }
     updateSpec(spec) {
         return this.removeAllInteractions(), this.removeAllGrammars(), this.parseSpec(spec);
@@ -318,17 +318,17 @@ class View extends vutils_1.EventEmitter {
         value) : this._background;
     }
     width(value) {
-        const signal = this.getSignalById(constants_2.SIGNAL_WIDTH);
+        const signal = this.getSignalById(constants_1.SIGNAL_WIDTH);
         return arguments.length ? (this._options.width = value, this.updateSignal(signal, value), 
         value) : signal.output();
     }
     height(value) {
-        const signal = this.getSignalById(constants_2.SIGNAL_HEIGHT);
+        const signal = this.getSignalById(constants_1.SIGNAL_HEIGHT);
         return arguments.length ? (this._options.height = value, this.updateSignal(signal, value), 
         value) : signal.output();
     }
     viewWidth(value) {
-        const signal = this.getSignalById(constants_2.SIGNAL_VIEW_WIDTH);
+        const signal = this.getSignalById(constants_1.SIGNAL_VIEW_WIDTH);
         if (arguments.length) {
             const padding = this.padding();
             return this.width(value + padding.left + padding.right), value;
@@ -336,7 +336,7 @@ class View extends vutils_1.EventEmitter {
         return signal.output();
     }
     viewHeight(value) {
-        const signal = this.getSignalById(constants_2.SIGNAL_VIEW_HEIGHT);
+        const signal = this.getSignalById(constants_1.SIGNAL_VIEW_HEIGHT);
         if (arguments.length) {
             const padding = this.padding();
             return this.height(value + padding.top + padding.bottom), value;
@@ -344,7 +344,7 @@ class View extends vutils_1.EventEmitter {
         return signal.output();
     }
     padding(value) {
-        const signal = this.getSignalById(constants_2.SIGNAL_PADDING);
+        const signal = this.getSignalById(constants_1.SIGNAL_PADDING);
         if (arguments.length) {
             const padding = (0, view_1.normalizePadding)(value);
             return this.updateSignal(signal, padding), padding;
@@ -352,11 +352,11 @@ class View extends vutils_1.EventEmitter {
         return (0, view_1.normalizePadding)(signal.output());
     }
     autoFit(value) {
-        const signal = this.getSignalById(constants_2.SIGNAL_AUTOFIT);
+        const signal = this.getSignalById(constants_1.SIGNAL_AUTOFIT);
         return arguments.length ? (this.updateSignal(signal, value), value) : signal.output();
     }
     getViewBox() {
-        const signal = this.getSignalById(constants_2.SIGNAL_VIEW_BOX);
+        const signal = this.getSignalById(constants_1.SIGNAL_VIEW_BOX);
         return null == signal ? void 0 : signal.output();
     }
     updateLayoutTag() {
@@ -374,7 +374,7 @@ class View extends vutils_1.EventEmitter {
     }
     doLayout() {
         var _a;
-        const doLayout = this._options.doLayout || layout_1.defaultDoLayout;
+        const doLayout = this._options.doLayout || factory_1.Factory.getDefaultLayout();
         doLayout && (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && (this.emit(enums_1.HOOK_EVENT.BEFORE_DO_LAYOUT), 
         doLayout(this._layoutMarks, this._options, this), this.emit(enums_1.HOOK_EVENT.AFTER_DO_LAYOUT));
     }
@@ -397,11 +397,12 @@ class View extends vutils_1.EventEmitter {
         return this.evaluate(runningConfig), this;
     }
     doRender(immediately) {
-        this.emit(enums_1.HOOK_EVENT.BEFORE_DO_RENDER), this.renderer && (this._progressiveMarks || this.animate.animate(), 
-        this.renderer.render(immediately), this.handleRenderEnd()), this.emit(enums_1.HOOK_EVENT.AFTER_DO_RENDER);
+        this.emit(enums_1.HOOK_EVENT.BEFORE_DO_RENDER), this.renderer && (!this._progressiveMarks && this.animate ? this.animate.animate() : this.traverseMarkTree((mark => {
+            mark.cleanExitElements();
+        }), null, !0), this.renderer.render(immediately), this.handleRenderEnd()), this.emit(enums_1.HOOK_EVENT.AFTER_DO_RENDER);
     }
     evaluate(runningConfig) {
-        var _a, _b;
+        var _a, _c;
         const normalizedRunningConfig = (0, view_1.normalizeRunningConfig)(runningConfig), grammarWillDetach = this._cachedGrammars.size() > 0;
         grammarWillDetach && (this.reuseCachedGrammars(normalizedRunningConfig), this.detachCachedGrammar());
         const hasResize = this._resizeRenderer(), hasUpdate = this._dataflow.hasCommitted();
@@ -410,28 +411,28 @@ class View extends vutils_1.EventEmitter {
         this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = enums_1.LayoutState.layouting, 
         this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = enums_1.LayoutState.reevaluate, 
         this._dataflow.evaluate()), this._layoutState = enums_1.LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), 
-        this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach((morphMarks => {
-            this._morph.morph(morphMarks.prev, morphMarks.next, normalizedRunningConfig);
-        })), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), 
-        this.doRender(!0), this.doPreProgressive(), this) : this;
+        this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), null === (_c = this.morph) || void 0 === _c || _c.call(this, normalizedRunningConfig), 
+        this.releaseCachedGrammars(normalizedRunningConfig), this.doRender(!0), this.doPreProgressive(), 
+        this) : this;
     }
     reuseCachedGrammars(runningConfig) {
-        if (this._willMorphMarks || (this._willMorphMarks = []), runningConfig.reuse) {
+        if (runningConfig.reuse) {
             const reuseDiffUpdate = diff => {
                 diff.next.reuse(diff.prev), diff.prev.detachAll(), diff.prev.clear(), this._cachedGrammars.unrecord(diff.prev);
             };
-            this._morph.diffGrammar(this._cachedGrammars.getAllSignals(), this.grammars.getAllSignals().filter((signal => !view_1.BuiltInSignalID.includes(signal.id())))).update.forEach(reuseDiffUpdate);
-            this._morph.diffGrammar(this._cachedGrammars.getAllData(), this.grammars.getAllData()).update.forEach(reuseDiffUpdate);
-            this._morph.diffGrammar(this._cachedGrammars.getAllScales(), this.grammars.getAllScales()).update.forEach(reuseDiffUpdate);
-            this._morph.diffGrammar(this._cachedGrammars.getAllCoordinates(), this.grammars.getAllCoordinates()).update.forEach(reuseDiffUpdate);
+            this._differ.diffGrammar(this._cachedGrammars.getAllSignals(), this.grammars.getAllSignals().filter((signal => !view_1.BuiltInSignalID.includes(signal.id())))).update.forEach(reuseDiffUpdate);
+            this._differ.diffGrammar(this._cachedGrammars.getAllData(), this.grammars.getAllData()).update.forEach(reuseDiffUpdate);
+            this._differ.diffGrammar(this._cachedGrammars.getAllScales(), this.grammars.getAllScales()).update.forEach(reuseDiffUpdate);
+            this._differ.diffGrammar(this._cachedGrammars.getAllCoordinates(), this.grammars.getAllCoordinates()).update.forEach(reuseDiffUpdate);
         }
-        this._morph.diffMark(this._cachedGrammars.getAllMarks(), this.grammars.getAllMarks().filter((mark => "root" !== mark.id())), runningConfig).update.forEach((diff => {
+        this._differ.diffMark(this._cachedGrammars.getAllMarks(), this.grammars.getAllMarks().filter((mark => "root" !== mark.id())), runningConfig).update.forEach((diff => {
+            var _b;
             const matched = 1 === diff.prev.length && 1 === diff.next.length && diff.prev[0].markType === diff.next[0].markType, enableMarkMorphConfig = diff.prev.every((mark => mark.getMorphConfig().morph)) && diff.next.every((mark => mark.getMorphConfig().morph));
-            matched && runningConfig.reuse ? (diff.next[0].reuse(diff.prev[0]), diff.prev[0].detachAll(), 
-            diff.prev[0].clear(), this._cachedGrammars.unrecord(diff.prev[0])) : (runningConfig.morph && enableMarkMorphConfig || runningConfig.morphAll) && this._willMorphMarks.push({
+            this.morph && (runningConfig.morph && enableMarkMorphConfig || runningConfig.morphAll) ? null === (_b = this.addMorphMarks) || void 0 === _b || _b.call(this, {
                 prev: diff.prev,
                 next: diff.next
-            });
+            }) : matched && runningConfig.reuse && (diff.next[0].reuse(diff.prev[0]), diff.prev[0].detachAll(), 
+            diff.prev[0].clear(), this._cachedGrammars.unrecord(diff.prev[0]));
         }));
     }
     detachCachedGrammar() {
@@ -449,10 +450,11 @@ class View extends vutils_1.EventEmitter {
         }));
         const markNodes = this._cachedGrammars.getAllMarkNodes();
         markNodes.forEach((node => {
-            node.mark.animate.stop(), runningConfig.enableExitAnimation && this.animate.animateAddition(node.mark);
+            var _a;
+            null === (_a = node.mark.animate) || void 0 === _a || _a.stop(), runningConfig.enableExitAnimation && this.animate && this.animate.animateAddition(node.mark);
         }));
         const releaseUp = node => {
-            if (node.mark.view && 0 === node.mark.animate.getAnimatorCount() && (!node.children || 0 === node.children.length)) {
+            if (node.mark.view && (!node.mark.animate || 0 === node.mark.animate.getAnimatorCount()) && (!node.children || 0 === node.children.length)) {
                 node.mark.release();
                 const parent = node.parent;
                 parent && (node.parent.children = node.parent.children.filter((n => n !== node)), 
@@ -461,9 +463,9 @@ class View extends vutils_1.EventEmitter {
         };
         markNodes.forEach((node => {
             const mark = node.mark;
-            0 === mark.animate.getAnimatorCount() ? releaseUp(node) : mark.addEventListener("animationEnd", (() => {
-                0 === mark.animate.getAnimatorCount() && releaseUp(node);
-            }));
+            mark.animate && 0 !== mark.animate.getAnimatorCount() ? mark.addEventListener("animationEnd", (() => {
+                mark.animate && 0 === mark.animate.getAnimatorCount() && releaseUp(node);
+            })) : releaseUp(node);
         })), this._cachedGrammars.clear();
     }
     runAfter(callback) {
@@ -519,9 +521,11 @@ class View extends vutils_1.EventEmitter {
     }
     resize(width, height, render = !0) {
         let needDataflow = !1;
-        return width !== this.width() && (needDataflow = !0, this.updateSignal(constants_2.SIGNAL_WIDTH, width)), 
-        height !== this.height() && (needDataflow = !0, this.updateSignal(constants_2.SIGNAL_HEIGHT, height)), 
-        needDataflow && (render ? this.evaluate() : this._dataflow.evaluate()), this;
+        return width !== this.width() && (needDataflow = !0, this.updateSignal(constants_1.SIGNAL_WIDTH, width)), 
+        height !== this.height() && (needDataflow = !0, this.updateSignal(constants_1.SIGNAL_HEIGHT, height)), 
+        needDataflow && (render ? this.evaluate({
+            morph: !1
+        }) : this._dataflow.evaluate()), this;
     }
     _resizeRenderer() {
         const width = this.width(), height = this.height();
@@ -531,75 +535,6 @@ class View extends vutils_1.EventEmitter {
             height: height
         }), !0);
     }
-    bindEvents(eventSpec) {
-        if (this._eventConfig.disable) return;
-        const {type: evtType, filter: filter, callback: callback, throttle: throttle, debounce: debounce, consume: consume, target: target, dependency: dependency} = eventSpec, eventSelector = (0, 
-        event_1.parseEventSelector)(evtType);
-        if (!eventSelector) return;
-        const {source: source, type: type} = eventSelector, markFilter = (0, event_1.generateFilterByMark)(eventSelector), validateSignals = (Array.isArray(target) && target.length ? target.map((entry => ({
-            signal: this.getSignalById(entry.target),
-            callback: entry.callback
-        }))) : [ {
-            signal: (0, vutils_1.isString)(target) ? this.getSignalById(target) : null,
-            callback: callback
-        } ]).filter((entry => entry.signal || entry.callback)), refs = (0, util_1.parseReference)(dependency, this), send = (0, 
-        event_1.parseHandler)(((evt, element) => {
-            const needPreventDefault = source === constants_2.EVENT_SOURCE_VIEW && (0, events_1.prevent)(this._eventConfig, type) || consume && (void 0 === evt.cancelable || evt.cancelable);
-            source === constants_2.EVENT_SOURCE_WINDOW && (evt = (0, events_extend_1.default)(this, evt, element, type, constants_2.EVENT_SOURCE_WINDOW));
-            let hasCommitted = !1;
-            if ((!filter || filter(evt)) && (!markFilter || markFilter(element)) && validateSignals.length) {
-                const params = refs.reduce(((params, ref) => (params[ref.id()] = ref.output(), params)), {});
-                validateSignals.forEach((entry => {
-                    if (entry.callback && entry.signal) {
-                        entry.signal.set(entry.callback(evt, params)) && (this.commit(entry.signal), hasCommitted = !0);
-                    } else entry.callback ? entry.callback(evt, params) : (this.commit(entry.signal), 
-                    hasCommitted = !0);
-                }));
-            }
-            needPreventDefault && evt.preventDefault(), consume && evt.stopPropagation(), hasCommitted && this.run();
-        }), {
-            throttle: throttle,
-            debounce: debounce
-        });
-        if (source === constants_2.EVENT_SOURCE_VIEW) {
-            if ((0, events_1.permit)(this._eventConfig, constants_2.EVENT_SOURCE_VIEW, type)) return this.addEventListener(type, send, constants_2.NO_TRAP), 
-            () => {
-                this.removeEventListener(type, send);
-            };
-        } else if (source === constants_2.EVENT_SOURCE_WINDOW) return vrender_core_1.vglobal.addEventListener(type, send), 
-        this._eventListeners.push({
-            type: type,
-            source: vrender_core_1.vglobal,
-            handler: send
-        }), () => {
-            vrender_core_1.vglobal.removeEventListener(type, send);
-            const index = this._eventListeners.findIndex((entry => entry.type === type && entry.source === vrender_core_1.vglobal && entry.handler === send));
-            index >= 0 && this._eventListeners.splice(index, 1);
-        };
-    }
-    event(eventSpec) {
-        if ("between" in eventSpec) {
-            const [starEvent, endEvent] = eventSpec.between, id = `${starEvent.type}-${eventSpec.type}-${endEvent.type}`;
-            let unbindEndEvent;
-            this.bindEvents(Object.assign({}, starEvent, {
-                callback: () => {
-                    if (this._eventCache || (this._eventCache = {}), !this._eventCache[id]) {
-                        const unbindEvent = this.bindEvents(eventSpec);
-                        this._eventCache[id] = unbindEvent;
-                    }
-                    unbindEndEvent || (unbindEndEvent = this.bindEvents(Object.assign({}, endEvent, {
-                        callback: () => {
-                            this._eventCache[id] && (this._eventCache[id](), this._eventCache[id] = null);
-                        }
-                    })));
-                }
-            }));
-        } else "merge" in eventSpec ? eventSpec.merge.forEach((entry => {
-            const singleEvent = Object.assign({}, eventSpec);
-            (0, vutils_1.isString)(entry) ? singleEvent.type = entry : (0, vutils_1.isObject)(entry) && Object.assign(singleEvent, entry), 
-            singleEvent.debounce = 50, this.bindEvents(singleEvent);
-        })) : this.bindEvents(eventSpec);
-    }
     interaction(type, spec) {
         const interaction = factory_1.Factory.createInteraction(type, this, spec);
         return interaction && (interaction.bind(), this._boundInteractions || (this._boundInteractions = []), 
@@ -622,6 +557,18 @@ class View extends vutils_1.EventEmitter {
             instance.unbind();
         })), this._boundInteractions = null), this;
     }
+    initializeEventConfig(config) {
+        const eventsConfig = Object.assign({
+            defaults: {}
+        }, config), unpack = (obj, keys) => {
+            keys.forEach((k => {
+                (0, vutils_1.isArray)(obj[k]) && (obj[k] = obj[k].reduce(((set, key) => (set[key] = !0, 
+                set)), {}));
+            }));
+        };
+        return unpack(eventsConfig.defaults, [ "prevent", "allow" ]), unpack(eventsConfig, [ constants_1.EVENT_SOURCE_VIEW, constants_1.EVENT_SOURCE_WINDOW ]), 
+        eventsConfig;
+    }
     initEvent() {
         const stage = this.renderer.stage();
         stage && stage.on("*", this.delegateEvent);
@@ -644,15 +591,15 @@ class View extends vutils_1.EventEmitter {
         this.renderer = new canvas_renderer_1.default(this), this.renderer.initialize(width, height, this._options, this._eventConfig).background(this._background);
     }
     initialize() {
-        var _a;
+        var _a, _c;
         this.grammars = new grammar_record_1.RecordedGrammars((grammar => grammar.id()), ((key, grammar) => this.logger.warn(`Grammar id '${key}' has been occupied`, grammar))), 
         this._cachedGrammars = new grammar_record_1.RecordedTreeGrammars((grammar => grammar.id())), 
         this._options.logger && vutils_1.Logger.setInstance(this._options.logger), this.logger = vutils_1.Logger.getInstance(null !== (_a = this._options.logLevel) && void 0 !== _a ? _a : 0), 
-        this._dataflow = new dataflow_1.default, this.animate = new animate_1.ViewAnimate(this), 
-        this._morph = new morph_1.Morph, this._options.hooks && (Object.keys(this._options.hooks).forEach((key => {
+        this._dataflow = new dataflow_1.default, this.animate = null === (_c = this.initAnimate) || void 0 === _c ? void 0 : _c.call(this, this), 
+        this._differ = new view_diff_1.ViewDiff, this._options.hooks && (Object.keys(this._options.hooks).forEach((key => {
             this.on(key, this._options.hooks[key]);
         })), this.hooks = this._options.hooks), this.container = null, this.renderer = null, 
-        this._eventListeners = [], this._eventConfig = (0, events_1.initializeEventConfig)(this._options.eventConfig), 
+        this._eventListeners = [], this._eventConfig = this.initializeEventConfig(this._options.eventConfig), 
         this._theme = this._options.disableTheme ? null : theme_manager_1.ThemeManager.getDefaultTheme(), 
         this.parseBuiltIn(), (0, env_1.configureEnvironment)(this._options), this.initializeRenderer(), 
         this._eventConfig.disable || this.initEvent(), this._bindResizeEvent(), this._needBuildLayoutTree = !0, 
@@ -679,7 +626,7 @@ class View extends vutils_1.EventEmitter {
         if (this._progressiveMarks && this._progressiveMarks.some((mark => mark.isDoingProgressive()))) {
             const raf = vrender_core_1.vglobal.getRequestAnimationFrame();
             this._progressiveRafId = raf(this.handleProgressiveFrame);
-        }
+        } else this._progressiveMarks && this.animate && this._progressiveMarks.every((mark => mark.canAnimateAfterProgressive())) ? this.animate.animate() : this._progressiveMarks && (this._progressiveMarks = null);
     }
     clearProgressive() {
         if (this._progressiveRafId) {
@@ -690,13 +637,14 @@ class View extends vutils_1.EventEmitter {
         })), this._progressiveMarks = null);
     }
     release() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.removeAllInteractions(), this.releaseStageEvent(), this._unBindResizeEvent(), 
         this.clearProgressive(), factory_1.Factory.unregisterRuntimeTransforms(), vutils_1.Logger.setInstance(null), 
-        this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), 
-        this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), 
+        null === (_a = this.animate) || void 0 === _a || _a.stop(), this.grammars.release(), 
+        this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, 
+        null === (_c = null === (_b = this.renderer) || void 0 === _b ? void 0 : _b.release) || void 0 === _c || _c.call(_b), 
         this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), 
-        null === (_c = this._eventListeners) || void 0 === _c || _c.forEach((listener => {
+        null === (_d = this._eventListeners) || void 0 === _d || _d.forEach((listener => {
             listener.source.removeEventListener(listener.type, listener.handler);
         })), this._eventListeners = null;
     }