@visactor/vgrammar-core 0.7.0

package/es/view/View.js

@@ -0,0 +1,836 @@
+var __awaiter = this && this.__awaiter || function(thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))((function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator.throw(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            var value;
+            result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P((function(resolve) {
+                resolve(value);
+            }))).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    }));
+};
+
+import { EventEmitter, debounce, isNil, isObject, isString, getContainerSize, Logger } from "@visactor/vutils";
+
+import { vglobal } from "@visactor/vrender";
+
+import { Data } from "./data";
+
+import { initializeEventConfig, permit, prevent } from "./events";
+
+import Dataflow from "./dataflow";
+
+import { traverseMarkTree } from "../graph/mark-tree";
+
+import { BridgeElementKey } from "../graph/constants";
+
+import CanvasRenderer from "../graph/canvas-renderer";
+
+import getExtendedEvents from "../graph/util/events-extend";
+
+import { BROWSER, NO_TRAP, SIGNAL_WIDTH, SIGNAL_HEIGHT, SIGNAL_PADDING, SIGNAL_AUTOFIT, CURSOR_DEFAULT, DEFAULT_HOVER_STATE, SIGNAL_VIEW_WIDTH, SIGNAL_VIEW_HEIGHT, EVENT_SOURCE_VIEW, EVENT_SOURCE_WINDOW, SIGNAL_VIEW_BOX } from "./constants";
+
+import { Signal } from "./signal";
+
+import { Scale } from "./scale";
+
+import { BuiltInSignalID, builtInSignals, normalizeMarkTree, normalizeRunningConfig, normalizePadding } from "../parse/view";
+
+import { parseHandler, parseEventSelector, generateFilterByMark } from "../parse/event";
+
+import { parseReference } from "../parse/util";
+
+import { configureEnvironment } from "../graph/util/env";
+
+import { GroupMark } from "./group";
+
+import { Mark } from "./mark";
+
+import { defaultDoLayout } from "../graph/layout/layout";
+
+import { GlyphMark } from "./glyph";
+
+import { Coordinate } from "./coordinate";
+
+import { Morph } from "../graph/animation/morph";
+
+import { RecordedGrammars, RecordedTreeGrammars } from "./grammar-record";
+
+import { ViewAnimate } from "./animate";
+
+import { ComponentEnum, HOOK_EVENT, LayoutState, GrammarMarkType } from "../graph/enums";
+
+import { Interval } from "../semantic-marks/interval";
+
+import { Cell } from "../semantic-marks/cell";
+
+import { Text } from "../semantic-marks/text";
+
+import { ThemeManager } from "../theme/theme-manager";
+
+import { Factory } from "../core/factory";
+
+export default class View extends EventEmitter {
+    static useRegisters(comps) {
+        comps.forEach((fn => {
+            fn();
+        }));
+    }
+    static useAnimations(comps) {
+        comps.forEach((comp => {
+            Factory.registerAnimationType(comp.name, comp);
+        }));
+    }
+    constructor(options = {}, config = {}) {
+        super(), this._observer = null, this._onResize = debounce(((...args) => {
+            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[BridgeElementKey], extendedEvt = getExtendedEvents(this, event, activeElement, type, EVENT_SOURCE_VIEW);
+            this.emit(type, extendedEvt, activeElement);
+        }, this.handleProgressiveFrame = () => {
+            this._progressiveMarks.length && this._progressiveMarks.forEach((mark => {
+                mark.isDoingProgressive() && mark.evaluateProgressive();
+            })), this.doPreProgressive();
+        }, this._config = config, this._options = Object.assign({
+            mode: BROWSER,
+            cursor: !0
+        }, options), this.initialize();
+    }
+    getGrammarById(id) {
+        return this.grammars.getGrammar(id);
+    }
+    getSignalById(id) {
+        return this.grammars.getSignal(id);
+    }
+    getDataById(id) {
+        return this.grammars.getData(id);
+    }
+    getScaleById(id) {
+        return this.grammars.getScale(id);
+    }
+    getCoordinateById(id) {
+        return this.grammars.getCoordinate(id);
+    }
+    getMarkById(id) {
+        return this.grammars.getMark(id);
+    }
+    getCustomizedById(id) {
+        return this.grammars.getCustomized(id);
+    }
+    getGrammarsByName(name) {
+        return this.grammars.filter((grammar => grammar.name() === name));
+    }
+    getGrammarsByType(grammarType) {
+        return this.grammars.filter((grammar => grammar.grammarType === grammarType));
+    }
+    getMarksByType(markType) {
+        return this.grammars.getAllMarks().filter((mark => mark.markType === markType));
+    }
+    updateSignal(signal, value) {
+        isString(signal) && (signal = this.getSignalById(signal)), signal.set(value), this.commit(signal);
+    }
+    signal(value, update) {
+        const signal = new Signal(this);
+        return arguments.length >= 1 && signal.value(value), arguments.length >= 2 && signal.update(update), 
+        this.grammars.record(signal), this._dataflow.add(signal), signal;
+    }
+    data(values) {
+        const data = new Data(this, values);
+        return this.grammars.record(data), this._dataflow.add(data), data;
+    }
+    scale(type) {
+        const scale = new Scale(this, type);
+        return this.grammars.record(scale), this._dataflow.add(scale), scale;
+    }
+    coordinate(type) {
+        const coordinate = new Coordinate(this, type);
+        return this.grammars.record(coordinate), this._dataflow.add(coordinate), coordinate;
+    }
+    mark(type, group, markOptions) {
+        const groupMark = isString(group) ? this.getMarkById(group) : group;
+        let mark;
+        switch (type) {
+          case GrammarMarkType.group:
+            mark = new GroupMark(this, groupMark);
+            break;
+
+          case GrammarMarkType.glyph:
+            mark = new GlyphMark(this, null == markOptions ? void 0 : markOptions.glyphType, groupMark);
+            break;
+
+          case GrammarMarkType.component:
+            mark = Factory.createComponent(null == markOptions ? void 0 : markOptions.componentType, this, groupMark, null == markOptions ? void 0 : markOptions.mode);
+            break;
+
+          case GrammarMarkType.interval:
+            mark = new Interval(this, type, groupMark);
+            break;
+
+          case GrammarMarkType.cell:
+            mark = new Cell(this, type, groupMark);
+            break;
+
+          case GrammarMarkType.text:
+            mark = new Text(this, type, groupMark);
+            break;
+
+          default:
+            mark = new Mark(this, type, groupMark);
+        }
+        return this.grammars.record(mark), this._dataflow.add(mark), mark;
+    }
+    group(group) {
+        return this.mark(GrammarMarkType.group, group);
+    }
+    glyph(glyphType, group) {
+        return this.mark(GrammarMarkType.glyph, group, {
+            glyphType: glyphType
+        });
+    }
+    component(componentType, group, mode = "2d") {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: componentType,
+            mode: mode
+        });
+    }
+    axis(group, mode = "2d") {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.axis,
+            mode: mode
+        });
+    }
+    grid(group, mode = "2d") {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.grid,
+            mode: mode
+        });
+    }
+    legend(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.legend
+        });
+    }
+    crosshair(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.crosshair
+        });
+    }
+    slider(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.slider
+        });
+    }
+    label(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.label
+        });
+    }
+    datazoom(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.datazoom
+        });
+    }
+    player(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.player
+        });
+    }
+    tooltip(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.tooltip
+        });
+    }
+    dimensionTooltip(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.dimensionTooltip
+        });
+    }
+    title(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.title
+        });
+    }
+    scrollbar(group) {
+        return this.mark(GrammarMarkType.component, group, {
+            componentType: ComponentEnum.scrollbar
+        });
+    }
+    customized(type, spec) {
+        const grammar = Factory.createGrammar(type, this);
+        if (grammar) return grammar.parse(spec), this.grammars.record(grammar), this._dataflow.add(grammar), 
+        grammar;
+    }
+    addGrammar(grammar) {
+        return this.grammars.find((storedGrammar => storedGrammar.uid === grammar.uid)) || (this.grammars.record(grammar), 
+        this._dataflow.add(grammar), grammar.parse(grammar.getSpec()), this._needBuildLayoutTree = !0), 
+        this;
+    }
+    removeGrammar(grammar) {
+        const recordedGrammar = isString(grammar) ? this.getGrammarById(grammar) : grammar;
+        return recordedGrammar && this.grammars.find((storedGrammar => storedGrammar.uid === recordedGrammar.uid)) ? ("mark" === recordedGrammar.grammarType && recordedGrammar.prepareRelease(), 
+        this._cachedGrammars.record(recordedGrammar), this._dataflow.remove(recordedGrammar), 
+        this.grammars.unrecord(recordedGrammar), this._needBuildLayoutTree = !0, this) : this;
+    }
+    removeAllGrammars() {
+        return this.grammars.traverse((grammar => {
+            "signal" === grammar.grammarType && BuiltInSignalID.includes(grammar.id()) || "mark" === grammar.grammarType && "root" === grammar.id() || this.removeGrammar(grammar);
+        })), this;
+    }
+    parseSpec(spec) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (this.emit(HOOK_EVENT.BEFORE_PARSE_VIEW), this._spec = spec, normalizeMarkTree(spec), 
+        spec.theme ? this.theme(spec.theme) : this.theme(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(SIGNAL_WIDTH, size.width), this.updateSignal(SIGNAL_HEIGHT, size.height));
+        }
+        (null === (_c = spec.signals) || void 0 === _c ? void 0 : _c.length) && spec.signals.forEach((signal => {
+            this.signal().parse(signal);
+        })), (null === (_d = spec.data) || void 0 === _d ? void 0 : _d.length) && spec.data.forEach((data => {
+            this.data(null).parse(data);
+        })), (null === (_e = spec.coordinates) || void 0 === _e ? void 0 : _e.length) && spec.coordinates.forEach((coordinate => {
+            this.coordinate(coordinate.type).parse(coordinate);
+        })), (null === (_f = spec.scales) || void 0 === _f ? void 0 : _f.length) && spec.scales.forEach((scale => {
+            this.scale(scale.type).parse(scale);
+        }));
+        const customizedGrammars = Factory.getGrammars();
+        return Object.keys(customizedGrammars).forEach((key => {
+            var _a;
+            const {specKey: specKey} = customizedGrammars[key];
+            (null === (_a = spec[specKey]) || void 0 === _a ? void 0 : _a.length) && spec[specKey].forEach((specValue => {
+                this.customized(key, specValue);
+            }));
+        })), (null === (_g = spec.marks) || void 0 === _g ? void 0 : _g.length) && spec.marks.forEach((mark => {
+            this.parseMarkSpec(mark);
+        })), (null === (_h = spec.events) || void 0 === _h ? void 0 : _h.length) && spec.events.forEach((eventConfig => {
+            this.event(eventConfig);
+        })), this.emit(HOOK_EVENT.AFTER_PARSE_VIEW), this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before, 
+        this;
+    }
+    updateSpec(spec) {
+        return this.removeAllGrammars(), this.parseSpec(spec);
+    }
+    parseBuiltIn() {
+        builtInSignals(this._options, this._config, this.getCurrentTheme()).map((signalSpec => {
+            const signal = this.signal().parse(signalSpec);
+            signalSpec.value && signal.set(signalSpec.value);
+        }));
+        this.parseMarkSpec({
+            id: "root",
+            type: "group",
+            encode: {
+                enter: {
+                    x: 0,
+                    y: 0
+                },
+                update: {
+                    width: {
+                        signal: "width"
+                    },
+                    height: {
+                        signal: "height"
+                    }
+                }
+            }
+        }), this.rootMark = this.getMarkById("root");
+    }
+    parseMarkSpec(spec) {
+        var _a;
+        const markOptions = spec.type === GrammarMarkType.glyph ? {
+            glyphType: spec.glyphType
+        } : spec.type === GrammarMarkType.component ? {
+            componentType: spec.componentType,
+            mode: spec.mode
+        } : null;
+        this.mark(spec.type, spec.group, markOptions).parse(spec), null === (_a = spec.marks) || void 0 === _a || _a.forEach((childSpec => {
+            this.parseMarkSpec(childSpec);
+        }));
+    }
+    theme(theme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return isString(theme) ? this._theme = null !== (_a = ThemeManager.getTheme(theme)) && void 0 !== _a ? _a : ThemeManager.getDefaultTheme() : this._theme = theme, 
+        this.background(null !== (_d = null !== (_c = null === (_b = this._spec) || void 0 === _b ? void 0 : _b.background) && void 0 !== _c ? _c : this._options.background) && void 0 !== _d ? _d : this._theme.background), 
+        this.padding(null !== (_g = null !== (_f = null === (_e = this._spec) || void 0 === _e ? void 0 : _e.padding) && void 0 !== _f ? _f : this._options.padding) && void 0 !== _g ? _g : this._theme.padding), 
+        null === (_j = null === (_h = this.renderer.stage()) || void 0 === _h ? void 0 : _h.setTheme) || void 0 === _j || _j.call(_h, Object.assign({}, this._theme.marks)), 
+        this;
+    }
+    getCurrentTheme() {
+        return this._theme;
+    }
+    setCurrentTheme(theme, render = !0) {
+        return __awaiter(this, void 0, void 0, (function*() {
+            return this.theme(theme), this.grammars.getAllMarks().forEach((mark => {
+                mark.commit();
+            })), render ? (yield this.evaluate(), this.renderer.render(!0)) : yield this._dataflow.evaluate(), 
+            this;
+        }));
+    }
+    background(value) {
+        return arguments.length ? (this._background = value, this.renderer.background(value), 
+        value) : this._background;
+    }
+    width(value) {
+        const signal = this.getSignalById(SIGNAL_WIDTH);
+        return arguments.length ? (this._options.width = value, this.updateSignal(signal, value), 
+        value) : signal.output();
+    }
+    height(value) {
+        const signal = this.getSignalById(SIGNAL_HEIGHT);
+        return arguments.length ? (this._options.height = value, this.updateSignal(signal, value), 
+        value) : signal.output();
+    }
+    viewWidth(value) {
+        const signal = this.getSignalById(SIGNAL_VIEW_WIDTH);
+        if (arguments.length) {
+            const padding = this.padding();
+            return this.width(value + padding.left + padding.right), value;
+        }
+        return signal.output();
+    }
+    viewHeight(value) {
+        const signal = this.getSignalById(SIGNAL_VIEW_HEIGHT);
+        if (arguments.length) {
+            const padding = this.padding();
+            return this.height(value + padding.top + padding.bottom), value;
+        }
+        return signal.output();
+    }
+    padding(value) {
+        const signal = this.getSignalById(SIGNAL_PADDING);
+        if (arguments.length) {
+            const padding = normalizePadding(value);
+            return this.updateSignal(signal, padding), padding;
+        }
+        return normalizePadding(signal.output());
+    }
+    autoFit(value) {
+        const signal = this.getSignalById(SIGNAL_AUTOFIT);
+        return arguments.length ? (this.updateSignal(signal, value), value) : signal.output();
+    }
+    getViewBox() {
+        const signal = this.getSignalById(SIGNAL_VIEW_BOX);
+        return null == signal ? void 0 : signal.output();
+    }
+    updateLayoutTag() {
+        return this._layoutState = LayoutState.before, this;
+    }
+    getLayoutState() {
+        return this._layoutState;
+    }
+    buildLayoutTree() {
+        const markMap = {}, rootMarks = [];
+        this.traverseMarkTree((mark => {
+            markMap[mark.id()] = !0, mark.group && markMap[mark.group.id()] || rootMarks.push(mark), 
+            mark.markType === GrammarMarkType.group && mark.updateLayoutChildren();
+        }), (mark => mark.needLayout())), this._layoutMarks = rootMarks;
+    }
+    doLayout() {
+        var _a;
+        const doLayout = this._options.doLayout || defaultDoLayout;
+        doLayout && (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && (this.emit(HOOK_EVENT.BEFORE_DO_LAYOUT), 
+        doLayout(this._layoutMarks, this._options, this), this.emit(HOOK_EVENT.AFTER_DO_LAYOUT));
+    }
+    handleLayoutEnd() {
+        this.emit(HOOK_EVENT.BEFORE_MARK_LAYOUT_END), this._layoutMarks.forEach((layoutMark => {
+            traverseMarkTree(layoutMark, "layoutChildren", (mark => {
+                mark.handleLayoutEnd();
+            }), (mark => mark !== layoutMark));
+        })), this.emit(HOOK_EVENT.AFTER_MARK_LAYOUT_END);
+    }
+    handleRenderEnd() {
+        this.emit(HOOK_EVENT.BEFORE_MARK_RENDER_END), traverseMarkTree(this.rootMark, "children", (mark => {
+            mark.handleRenderEnd();
+        })), this.emit(HOOK_EVENT.AFTER_MARK_RENDER_END);
+    }
+    commit(grammar) {
+        return this._dataflow.commit(grammar), this;
+    }
+    run(runningConfig) {
+        return this.evaluate(runningConfig), this;
+    }
+    runSync(runningConfig) {
+        return this.evaluateSync(runningConfig), this;
+    }
+    isRunning() {
+        return this._running;
+    }
+    runAsync(runningConfig) {
+        return __awaiter(this, void 0, void 0, (function*() {
+            for (;this._running; ) yield this._running;
+            const clear = () => {
+                this._running = null;
+            };
+            return (this._running = this.evaluate(runningConfig)).then(clear, clear), this._running;
+        }));
+    }
+    runNextTick(runningConfig) {
+        return __awaiter(this, void 0, void 0, (function*() {
+            return this._currentDataflow || (this._currentDataflow = Promise.resolve().then((() => this.runAsync(runningConfig).then((() => {
+                this._currentDataflow = null;
+            })).catch((e => {
+                this._currentDataflow = null, this.logger.error(e);
+            }))))), yield this._currentDataflow, this;
+        }));
+    }
+    doRender(immediately) {
+        this.emit(HOOK_EVENT.BEFORE_DO_RENDER), this.renderer && (this._progressiveMarks || this.animate.animate(), 
+        this.renderer.render(immediately), this.handleRenderEnd()), this.emit(HOOK_EVENT.AFTER_DO_RENDER);
+    }
+    evaluate(runningConfig) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, (function*() {
+            const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
+            this.reuseCachedGrammars(normalizedRunningConfig);
+            const grammarWillDetach = this._cachedGrammars.size() > 0;
+            this.detachCachedGrammar();
+            const hasResize = this._resizeRenderer(), hasUpdate = this._dataflow.hasCommitted();
+            return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), 
+            yield this._dataflow.evaluate(), this._needBuildLayoutTree && (this.buildLayoutTree(), 
+            this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, 
+            this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, 
+            yield this._dataflow.evaluate()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), 
+            this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!1), 
+            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.doPreProgressive(), this) : this;
+        }));
+    }
+    evaluateSync(runningConfig) {
+        var _a, _b;
+        const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
+        this.reuseCachedGrammars(normalizedRunningConfig);
+        const grammarWillDetach = this._cachedGrammars.size() > 0;
+        this.detachCachedGrammar();
+        const hasResize = this._resizeRenderer(), hasUpdate = this._dataflow.hasCommitted();
+        return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), 
+        this._dataflow.evaluateSync(), this._needBuildLayoutTree && (this.buildLayoutTree(), 
+        this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, 
+        this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, 
+        this._dataflow.evaluateSync()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), 
+        this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!0), 
+        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.doPreProgressive(), this) : this;
+    }
+    reuseCachedGrammars(runningConfig) {
+        if (this._willMorphMarks || (this._willMorphMarks = []), 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 => !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._morph.diffMark(this._cachedGrammars.getAllMarks(), this.grammars.getAllMarks().filter((mark => "root" !== mark.id())), runningConfig).update.forEach((diff => {
+            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({
+                prev: diff.prev,
+                next: diff.next
+            });
+        }));
+    }
+    detachCachedGrammar() {
+        this._cachedGrammars.traverse((grammar => {
+            var _a, _b;
+            if (grammar.detachAll(), "mark" === grammar.grammarType) {
+                const mark = grammar;
+                null === (_b = null === (_a = mark.group) || void 0 === _a ? void 0 : _a.removeChild) || void 0 === _b || _b.call(_a, mark);
+            }
+        }));
+    }
+    releaseCachedGrammars(runningConfig) {
+        this._cachedGrammars.traverse((grammar => {
+            "mark" !== grammar.grammarType && grammar.release();
+        }));
+        const markNodes = this._cachedGrammars.getAllMarkNodes();
+        markNodes.forEach((node => {
+            node.mark.animate.stop(), runningConfig.enableExitAnimation && this.animate.animateAddition(node.mark);
+        }));
+        const releaseUp = node => {
+            if (node.mark.view && 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)), 
+                node.parent = null, releaseUp(parent));
+            }
+        };
+        markNodes.forEach((node => {
+            const mark = node.mark;
+            0 === mark.animate.getAnimatorCount() ? releaseUp(node) : mark.addEventListener("animationEnd", (() => {
+                0 === mark.animate.getAnimatorCount() && releaseUp(node);
+            }));
+        })), this._cachedGrammars.clear();
+    }
+    runAfter(callback) {
+        return this._dataflow.runAfter((() => {
+            callback.call(null, this);
+        })), this;
+    }
+    runBefore(callback) {
+        return this._dataflow.runBefore((() => {
+            callback.call(null, this);
+        })), this;
+    }
+    getImageBuffer() {
+        var _a, _b;
+        if ("node" !== this._options.mode) return void this.logger.error(new TypeError("getImageBuffer() now only support node environment."));
+        const stage = null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.stage) || void 0 === _b ? void 0 : _b.call(_a);
+        if (stage) {
+            stage.render();
+            return stage.window.getImageBuffer();
+        }
+        return this.logger.error(new ReferenceError("render is not defined")), null;
+    }
+    traverseMarkTree(apply, filter, leafFirst) {
+        return traverseMarkTree(this.rootMark, "children", apply, filter, leafFirst), this;
+    }
+    _bindResizeEvent() {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.autoFit()) {
+            const container = null === (_e = null === (_d = null === (_c = null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.stage) || void 0 === _b ? void 0 : _b.call(_a)) || void 0 === _c ? void 0 : _c.window) || void 0 === _d ? void 0 : _d.getContainer) || void 0 === _e ? void 0 : _e.call(_d);
+            if (container) {
+                const ResizeObserverWindow = window.ResizeObserver;
+                this._observer = new ResizeObserverWindow(this._onResize), null === (_f = this._observer) || void 0 === _f || _f.observe(container);
+            }
+            window.addEventListener("resize", this._onResize);
+        }
+    }
+    _unBindResizeEvent() {
+        this.autoFit() && (window.removeEventListener("resize", this._onResize), this._observer && (this._observer.disconnect(), 
+        this._observer = null));
+    }
+    _getContainerSize() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const container = null === (_e = null === (_d = null === (_c = null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.stage) || void 0 === _b ? void 0 : _b.call(_a)) || void 0 === _c ? void 0 : _c.window) || void 0 === _d ? void 0 : _d.getContainer) || void 0 === _e ? void 0 : _e.call(_d);
+        if (container) {
+            const {width: containerWidth, height: containerHeight} = getContainerSize(container);
+            return {
+                width: null !== (_h = null !== (_g = null === (_f = this._spec) || void 0 === _f ? void 0 : _f.width) && void 0 !== _g ? _g : this._options.width) && void 0 !== _h ? _h : containerWidth,
+                height: null !== (_l = null !== (_k = null === (_j = this._spec) || void 0 === _j ? void 0 : _j.height) && void 0 !== _k ? _k : this._options.height) && void 0 !== _l ? _l : containerHeight
+            };
+        }
+        return null;
+    }
+    resize(width, height, render = !0) {
+        return __awaiter(this, void 0, void 0, (function*() {
+            let needDataflow = !1;
+            return width !== this.width() && (needDataflow = !0, this.updateSignal(SIGNAL_WIDTH, width)), 
+            height !== this.height() && (needDataflow = !0, this.updateSignal(SIGNAL_HEIGHT, height)), 
+            needDataflow && (render ? yield this.evaluate() : yield this._dataflow.evaluate()), 
+            this;
+        }));
+    }
+    _resizeRenderer() {
+        const width = this.width(), height = this.height();
+        return !!this.renderer.shouldResize(width, height) && (this.renderer.resize(width, height), 
+        this.emit("resize", {}, {
+            width: width,
+            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 = parseEventSelector(evtType);
+        if (!eventSelector) return;
+        const {source: source, type: type} = eventSelector, markFilter = generateFilterByMark(eventSelector), validateSignals = (Array.isArray(target) && target.length ? target.map((entry => ({
+            signal: this.getSignalById(entry.target),
+            callback: entry.callback
+        }))) : [ {
+            signal: isString(target) ? this.getSignalById(target) : null,
+            callback: callback
+        } ]).filter((entry => entry.signal || entry.callback)), refs = parseReference(dependency, this), send = parseHandler(((evt, element) => {
+            const needPreventDefault = source === EVENT_SOURCE_VIEW && prevent(this._eventConfig, type) || consume && (void 0 === evt.cancelable || evt.cancelable);
+            source === EVENT_SOURCE_WINDOW && (evt = getExtendedEvents(this, evt, element, type, 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.runAsync();
+        }), {
+            throttle: throttle,
+            debounce: debounce
+        });
+        if (source === EVENT_SOURCE_VIEW) {
+            if (permit(this._eventConfig, EVENT_SOURCE_VIEW, type)) return this.addEventListener(type, send, NO_TRAP), 
+            () => {
+                this.removeEventListener(type, send);
+            };
+        } else if (source === EVENT_SOURCE_WINDOW) return vglobal.addEventListener(type, send), 
+        this._eventListeners.push({
+            type: type,
+            source: vglobal,
+            handler: send
+        }), () => {
+            vglobal.removeEventListener(type, send);
+            const index = this._eventListeners.findIndex((entry => entry.type === type && entry.source === 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);
+            isString(entry) ? singleEvent.type = entry : isObject(entry) && Object.assign(singleEvent, entry), 
+            singleEvent.debounce = 50, this.bindEvents(singleEvent);
+        })) : this.bindEvents(eventSpec);
+    }
+    hover(hoverState) {
+        const state = hoverState || DEFAULT_HOVER_STATE;
+        return this.addEventListener("pointerover", (evt => {
+            if (!evt.element) return;
+            evt.element.addState(state);
+        })), this.addEventListener("pointerout", (evt => {
+            if (!evt.element) return;
+            evt.element.removeState(state);
+        })), this;
+    }
+    cursor() {
+        this._cursorValue = {
+            user: CURSOR_DEFAULT,
+            element: null
+        }, this.addEventListener("mousemove", (evt => {
+            var _a, _b, _c;
+            const elementCursor = null === (_b = null === (_a = null == evt ? void 0 : evt.element) || void 0 === _a ? void 0 : _a.graphicItem) || void 0 === _b ? void 0 : _b.cursor, value = this._cursorValue, user = value ? isString(value) ? value : value.user : CURSOR_DEFAULT, nextValue = value && user === value.user && (elementCursor === value.element || isNil(elementCursor) && isNil(value.element)) ? value : {
+                user: user,
+                element: elementCursor
+            };
+            nextValue !== value && (this._cursorValue = nextValue, this.setCursor(nextValue.user && nextValue.user !== CURSOR_DEFAULT ? nextValue.user : null !== (_c = nextValue.element) && void 0 !== _c ? _c : nextValue.user));
+        }));
+    }
+    initEvent() {
+        const stage = this.renderer.stage();
+        stage && stage.on("*", this.delegateEvent);
+    }
+    addEventListener(type, handler, options) {
+        let callback = handler;
+        return options && !1 === options.trap || (callback = handler, callback.raw = handler), 
+        options && options.target && (callback.target = options.target), this.on(type, callback), 
+        this;
+    }
+    removeEventListener(type, handler) {
+        return handler ? this.off(type, handler) : this.off(type), this;
+    }
+    setCursor(cursor) {
+        if (this._options.domBridge && this._options.domBridge.setCursor) return void this._options.domBridge.setCursor(cursor);
+        const el = this.globalCursor() ? !isNil(document) && document.body : this.container;
+        return el ? isNil(cursor) ? el.style.removeProperty("cursor") : el.style.cursor = cursor : void 0;
+    }
+    globalCursor(_) {
+        if (arguments.length) {
+            if (this._globalCursor !== !!_) {
+                const prev = this.setCursor(null);
+                this._globalCursor = !!_, prev && this.setCursor(prev);
+            }
+            return this;
+        }
+        return this._globalCursor;
+    }
+    initializeRenderer() {
+        const width = this._options.width, height = this._options.height;
+        this.renderer = new CanvasRenderer(this), this.renderer.initialize(width, height, this._options, this._eventConfig).background(this._background);
+    }
+    initializeBuiltEvents() {
+        this._options.cursor && this.cursor(), this._options.hover && this.hover(), this._bindResizeEvent();
+    }
+    initialize() {
+        var _a;
+        this.grammars = new RecordedGrammars((grammar => grammar.id()), ((key, grammar) => this.logger.warn(`Grammar id '${key}' has been occupied`, grammar))), 
+        this._cachedGrammars = new RecordedTreeGrammars((grammar => grammar.id())), this._options.logger && Logger.setInstance(this._options.logger), 
+        this.logger = Logger.getInstance(null !== (_a = this._options.logLevel) && void 0 !== _a ? _a : 0), 
+        this._dataflow = new Dataflow, this.animate = new ViewAnimate(this), this._morph = new Morph, 
+        this._theme = ThemeManager.getDefaultTheme(), this._options.hooks && (Object.keys(this._options.hooks).forEach((key => {
+            this.on(key, this._options.hooks[key]);
+        })), this.hooks = this._options.hooks), this.container = null, this.renderer = null, 
+        this._globalCursor = !1, this._eventListeners = [], this._eventConfig = initializeEventConfig(this._options.eventConfig), 
+        this.globalCursor(this._eventConfig.globalCursor), this._theme = ThemeManager.getDefaultTheme(), 
+        this.parseBuiltIn(), configureEnvironment(this._options), this.initializeRenderer(), 
+        this._eventConfig.disable || this.initEvent(), this.initializeBuiltEvents(), this._currentDataflow = null, 
+        this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before, this.theme(this._theme);
+    }
+    normalBrowserEnv() {
+        return "browser" === this._options.mode;
+    }
+    pauseProgressive() {
+        return !1;
+    }
+    resumeProgressive() {
+        return !1;
+    }
+    restartProgressive() {
+        return !1;
+    }
+    findProgressiveMarks() {
+        const marks = [];
+        return this.traverseMarkTree((mark => {
+            marks.push(mark);
+        }), (mark => mark.markType !== GrammarMarkType.group && mark.isProgressive())), 
+        marks.length ? (this._progressiveMarks = marks, this.renderer && this.renderer.combineIncrementalLayers(), 
+        marks) : (this._progressiveMarks = null, null);
+    }
+    doPreProgressive() {
+        if (this._progressiveMarks && this._progressiveMarks.some((mark => mark.isDoingProgressive()))) {
+            const raf = vglobal.getRequestAnimationFrame();
+            this._progressiveRafId = raf(this.handleProgressiveFrame);
+        }
+    }
+    clearProgressive() {
+        if (this._progressiveRafId) {
+            vglobal.getCancelAnimationFrame()(this._progressiveRafId);
+        }
+        this._progressiveMarks && this._progressiveMarks.length && (this._progressiveMarks.forEach((entry => {
+            entry.clearProgressive();
+        })), this._progressiveMarks = null);
+    }
+    release() {
+        var _a, _b, _c;
+        this._unBindResizeEvent(), this.clearProgressive(), Factory.unregisterRuntimeTransforms(), 
+        this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow = null, 
+        null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), 
+        this.renderer = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach((listener => {
+            listener.source.removeEventListener(listener.type, listener.handler);
+        })), this._eventListeners = null;
+    }
+}
+//# sourceMappingURL=View.js.map