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

package/esm/chart/base/base-chart.js

@@ -18,7 +18,7 @@ import { Factory } from "../../core/factory";
 
 import { Event } from "../../event/event";
 
-import { isArray, isValid, createID, calcPadding, normalizeLayoutPaddingSpec, array } from "../../util";
+import { isArray, isValid, createID, calcPadding, normalizeLayoutPaddingSpec, array, isCollectionMark, getDatumOfGraphic } from "../../util";
 
 import { BaseModel } from "../../model/base-model";
 
@@ -34,7 +34,7 @@ import { CompilableBase } from "../../compile/compilable-base";
 
 import { STATE_VALUE_ENUM } from "../../compile/mark/interface";
 
-import { ChartEvent, VGRAMMAR_HOOK_EVENT } from "../../constant/event";
+import { ChartEvent, HOOK_EVENT } from "../../constant/event";
 
 import { DimensionEventEnum } from "../../event/events/dimension";
 
@@ -46,6 +46,8 @@ import { updateDataViewInData } from "../../data/initialize";
 
 import { LayoutZIndex } from "../../constant/layout";
 
+import { Interaction } from "../../interaction/interaction";
+
 export class BaseChart extends CompilableBase {
     getSpec() {
         return this._spec;
@@ -68,8 +70,8 @@ export class BaseChart extends CompilableBase {
     setLayoutTag(tag, morphConfig, renderNextTick = !0) {
         this._layoutTag = tag;
         const compiler = this.getCompiler();
-        return (null == compiler ? void 0 : compiler.getVGrammarView()) && (compiler.getVGrammarView().updateLayoutTag(), 
-        tag && renderNextTick && compiler.renderNextTick(morphConfig)), this._layoutTag;
+        return compiler && (compiler.updateLayoutTag(), tag && renderNextTick && compiler.renderNextTick(morphConfig)), 
+        this._layoutTag;
     }
     getGlobalScale() {
         return this._globalScale;
@@ -144,13 +146,38 @@ export class BaseChart extends CompilableBase {
         this._createLayout(), transformer.forEachRegionInSpec(this._spec, this._createRegion.bind(this)), 
         transformer.forEachSeriesInSpec(this._spec, this._createSeries.bind(this)), transformer.forEachComponentInSpec(this._spec, this._createComponent.bind(this), this._option.getSpecInfo());
     }
+    _initInteractions() {
+        if (this._option.disableTriggerEvent) return;
+        this._interaction = new Interaction;
+        const series = this.getAllSeries(), mergedTriggers = [], mergedTriggersMarks = {};
+        series.forEach((s => {
+            const triggers = s.getInteractionTriggers();
+            if (triggers && triggers.length) {
+                const regionId = s.getRegion().id;
+                triggers.forEach((({trigger: trigger, marks: marks}) => {
+                    const interactionId = `${regionId}-${trigger.type}`;
+                    mergedTriggersMarks[interactionId] ? marks.forEach((m => {
+                        mergedTriggersMarks[interactionId].marks.push(m);
+                    })) : (mergedTriggersMarks[interactionId] = Object.assign(Object.assign({}, trigger), {
+                        marks: marks
+                    }), mergedTriggers.push(mergedTriggersMarks[interactionId]));
+                }));
+            }
+        })), mergedTriggers.forEach((trigger => {
+            const triggerInstance = Factory.createInteractionTrigger(trigger.type, Object.assign(Object.assign({}, trigger), {
+                event: this._event,
+                interaction: this._interaction
+            }));
+            triggerInstance && (triggerInstance.init(), this._interaction.addTrigger(triggerInstance));
+        }));
+    }
     init() {
         var _b, _d;
         null === (_b = this._beforeInit) || void 0 === _b || _b.call(this), this._regions.forEach((r => r.init({}))), 
         this._series.forEach((s => s.init({}))), this._components.forEach((c => c.init({
             dataSet: this._dataSet
         }))), this._initEvent(), null === (_d = this._initStack) || void 0 === _d || _d.call(this), 
-        this.reDataFlow();
+        this.reDataFlow(), this._initInteractions();
     }
     reDataFlow() {
         this._series.forEach((s => {
@@ -184,7 +211,7 @@ export class BaseChart extends CompilableBase {
             height: () => this._viewBox.y2 - this._viewBox.y1
         })), this._backgroundMark.setMarkConfig({
             zIndex: LayoutZIndex.SeriesGroup - 2
-        });
+        }), this.getCompiler().addRootMark(this._backgroundMark);
     }
     _createRegion(constructor, specInfo) {
         if (!constructor) return;
@@ -266,31 +293,31 @@ export class BaseChart extends CompilableBase {
             }
         }
     }
-    layout(params) {
+    layout() {
         var _a, _b, _c, _d;
-        if (null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeLayoutWithSceneGraph) || void 0 === _b || _b.call(_a), 
+        if (null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeLayoutWithSceneGraph) || void 0 === _b || _b.call(_a, this._option.globalInstance), 
         this.getLayoutTag()) {
             this._event.emit(ChartEvent.layoutStart, {
                 chart: this,
                 vchart: this._option.globalInstance
-            }), this.onLayoutStart(params);
+            }), this.onLayoutStart();
             const elements = this.getLayoutElements();
             this._layoutFunc(this, elements, this._layoutRect, this._viewBox), this._event.emit(ChartEvent.afterLayout, {
                 elements: elements,
                 chart: this
-            }), this.setLayoutTag(!1), this.onLayoutEnd(params), this._event.emit(ChartEvent.layoutEnd, {
+            }), this.setLayoutTag(!1), this.onLayoutEnd(), this._event.emit(ChartEvent.layoutEnd, {
                 chart: this,
                 vchart: this._option.globalInstance
             });
         }
-        null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterLayoutWithSceneGraph) || void 0 === _d || _d.call(_c);
+        null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterLayoutWithSceneGraph) || void 0 === _d || _d.call(_c, this._option.globalInstance);
     }
-    onLayoutStart(option) {
-        this.getAllModels().forEach((element => element.onLayoutStart(this._layoutRect, this._viewRect, option)));
+    onLayoutStart() {
+        this.getAllModels().forEach((element => element.onLayoutStart(this._layoutRect, this._viewRect)));
     }
-    onLayoutEnd(option) {
+    onLayoutEnd() {
         this.getAllModels().forEach((element => {
-            "series" !== element.modelType && element.onLayoutEnd(option);
+            "series" !== element.modelType && element.onLayoutEnd();
         }));
     }
     onEvaluateEnd(option) {
@@ -368,7 +395,8 @@ export class BaseChart extends CompilableBase {
                 Object.prototype.hasOwnProperty.call(tempSpec, "type") && (colorScaleSpec.type = tempSpec.type), 
                 Object.prototype.hasOwnProperty.call(tempSpec, "domain") && (colorScaleSpec.domain = tempSpec.domain), 
                 Object.prototype.hasOwnProperty.call(tempSpec, "range") && (colorScaleSpec.range = tempSpec.range), 
-                Object.prototype.hasOwnProperty.call(tempSpec, "specified") && (colorScaleSpec.specified = tempSpec.specified);
+                Object.prototype.hasOwnProperty.call(tempSpec, "specified") && (colorScaleSpec.specified = tempSpec.specified), 
+                Object.prototype.hasOwnProperty.call(tempSpec, "clamp") && (colorScaleSpec.clamp = tempSpec.clamp);
             }
         }
         return (null === (_a = colorScaleSpec.range) || void 0 === _a ? void 0 : _a.length) || (colorScaleSpec.range = getDataScheme(colorScheme), 
@@ -441,7 +469,8 @@ export class BaseChart extends CompilableBase {
         const componentCache = {}, checkVisibleComponents = {
             [ComponentTypeEnum.title]: !0,
             [ComponentTypeEnum.brush]: !0,
-            [ComponentTypeEnum.mapLabel]: !0
+            [ComponentTypeEnum.mapLabel]: !0,
+            [ComponentTypeEnum.indicator]: !0
         };
         this._components.forEach((c => {
             var _a, _b;
@@ -537,33 +566,28 @@ export class BaseChart extends CompilableBase {
         this.getCompiler().setSize(width, height);
     }
     compileBackground() {
-        var _a;
-        this._backgroundMark && (this._backgroundMark.compile({
-            context: {
-                model: this
-            }
-        }), null === (_a = this._backgroundMark.getProduct()) || void 0 === _a || _a.layout((() => {})));
+        this._backgroundMark && this._backgroundMark.compile();
     }
     compileRegions() {
         var _a, _b, _c, _d;
-        null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeRegionCompile) || void 0 === _b || _b.call(_a), 
+        null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeRegionCompile) || void 0 === _b || _b.call(_a, this._option.globalInstance), 
         this.getAllRegions().forEach((r => {
             r.compile();
-        })), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterRegionCompile) || void 0 === _d || _d.call(_c);
+        })), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterRegionCompile) || void 0 === _d || _d.call(_c, this._option.globalInstance);
     }
     compileSeries() {
         var _a, _b, _c, _d;
-        null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeSeriesCompile) || void 0 === _b || _b.call(_a), 
+        null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeSeriesCompile) || void 0 === _b || _b.call(_a, this._option.globalInstance), 
         this.getAllSeries().forEach((s => {
             s.compile();
-        })), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterSeriesCompile) || void 0 === _d || _d.call(_c);
+        })), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterSeriesCompile) || void 0 === _d || _d.call(_c, this._option.globalInstance);
     }
     compileComponents() {
         var _a, _b, _c, _d;
-        null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeComponentCompile) || void 0 === _b || _b.call(_a), 
+        null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeComponentCompile) || void 0 === _b || _b.call(_a, this._option.globalInstance), 
         this.getAllComponents().forEach((c => {
             c.compile();
-        })), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterComponentCompile) || void 0 === _d || _d.call(_c);
+        })), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterComponentCompile) || void 0 === _d || _d.call(_c, this._option.globalInstance);
     }
     release() {
         [ ...this._components, ...this._regions, ...this._series ].forEach((m => {
@@ -573,12 +597,8 @@ export class BaseChart extends CompilableBase {
         })), this._components = this._regions = this._series = [], this._spec = {}, this._dataSet = this._globalScale = this._layoutFunc = null, 
         this._layoutTag = !1, this._idMap.clear();
     }
-    onLayout(srView) {
-        const root = srView.rootMark;
-        this.layout({
-            group: root,
-            srView: srView
-        });
+    onLayout() {
+        this.layout();
     }
     updateState(state, filter) {
         const seriesArr = this.getAllSeries();
@@ -600,20 +620,16 @@ export class BaseChart extends CompilableBase {
         }
     }
     setSelected(datum, filter, region) {
-        this._setStateInDatum(STATE_VALUE_ENUM.STATE_SELECTED, !0, datum, filter, region);
+        this._setStateInDatum(STATE_VALUE_ENUM.STATE_SELECTED, datum, filter, region);
     }
     setHovered(datum, filter, region) {
-        this._setStateInDatum(STATE_VALUE_ENUM.STATE_HOVER, !0, datum, filter, region);
+        this._setStateInDatum(STATE_VALUE_ENUM.STATE_HOVER, datum, filter, region);
     }
     clearState(state) {
-        this.getAllRegions().forEach((r => {
-            r.interaction.clearEventElement(state, !0), r.interaction.resetInteraction(state, null);
-        }));
+        this._interaction.clearByState(state);
     }
     clearAllStates() {
-        this.getAllRegions().forEach((r => {
-            r.interaction.clearAllEventElement(), r.interaction.resetAllInteraction();
-        }));
+        this._interaction.clearAllStates();
     }
     clearSelected() {
         this.clearState(STATE_VALUE_ENUM.STATE_SELECTED);
@@ -626,56 +642,58 @@ export class BaseChart extends CompilableBase {
             this._event.on(event, (({value: value}) => {
                 this._disableMarkAnimation([ "exit", "update" ]);
                 const enableMarkAnimate = () => {
-                    this._enableMarkAnimation([ "exit", "update" ]), this._event.off(VGRAMMAR_HOOK_EVENT.AFTER_MARK_RENDER_END, enableMarkAnimate);
+                    this._enableMarkAnimation([ "exit", "update" ]), this._event.off(HOOK_EVENT.AFTER_MARK_RENDER_END, enableMarkAnimate);
                 };
-                this._event.on(VGRAMMAR_HOOK_EVENT.AFTER_MARK_RENDER_END, enableMarkAnimate);
+                this._event.on(HOOK_EVENT.AFTER_MARK_RENDER_END, enableMarkAnimate);
             }));
         }));
     }
     _enableMarkAnimation(states) {
         this.getAllMarks().forEach((mark => {
             const product = mark.getProduct();
-            product && product.animate && product.animate.enableAnimationState(states);
+            product && product.animate;
         }));
     }
     _disableMarkAnimation(states) {
         this.getAllMarks().forEach((mark => {
             const product = mark.getProduct();
-            product && product.animate && product.animate.disableAnimationState(states);
+            product && product.animate;
         }));
     }
-    _setStateInDatum(stateKey, checkReverse, datum, filter, region) {
-        const keys = (datum = datum ? array(datum) : null) ? Object.keys(datum[0]) : null;
+    _setStateInDatum(stateKey, d, filter, region) {
+        if (!d) return void this._interaction.clearByState(stateKey);
+        const datum = array(d), keys = Object.keys(datum[0]), pickGraphics = [];
         this.getRegionsInQuerier(region).forEach((r => {
-            datum ? (r.getSeries().forEach((s => {
+            r.getSeries().forEach((s => {
                 s.getMarks().forEach((m => {
-                    if (m.getProduct() && (!filter || isFunction(filter) && filter(s, m))) {
-                        const isCollect = m.getProduct().isCollectionMark(), elements = m.getProduct().elements;
-                        let pickElements = [];
-                        if (isCollect) pickElements = elements.filter((e => {
-                            const elDatum = e.getDatum();
-                            datum.every(((d, index) => keys.every((k => d[k] == elDatum[index][k]))));
+                    const graphics = m.getGraphics();
+                    if (graphics && graphics.length && (!filter || isFunction(filter) && filter(s, m))) {
+                        if (isCollectionMark(m.type)) graphics.filter((g => {
+                            const elDatum = getDatumOfGraphic(g), isPicked = elDatum && datum.every(((d, index) => keys.every((k => {
+                                var _a;
+                                return d[k] == (null === (_a = elDatum[index]) || void 0 === _a ? void 0 : _a[k]);
+                            }))));
+                            isPicked && pickGraphics.push(g);
                         })); else if (datum.length > 1) {
                             const datumTemp = datum.slice();
-                            pickElements = elements.filter((e => {
-                                if (0 === datumTemp.length) return !1;
-                                const elDatum = e.getDatum(), index = datumTemp.findIndex((d => keys.every((k => d[k] == elDatum[k]))));
-                                return index >= 0 && (datumTemp.splice(index, 1), !0);
+                            graphics.forEach((g => {
+                                const elDatum = getDatumOfGraphic(g), index = datumTemp.findIndex((d => keys.every((k => d[k] == (null == elDatum ? void 0 : elDatum[k])))));
+                                index >= 0 && (datumTemp.splice(index, 1), pickGraphics.push(g));
                             }));
                         } else {
-                            const el = elements.find((e => keys.every((k => datum[0][k] == e.getDatum()[k]))));
-                            el && (pickElements = [ el ]);
+                            const el = graphics.find((e => keys.every((k => {
+                                var _a;
+                                return datum[0][k] == (null === (_a = getDatumOfGraphic(e)) || void 0 === _a ? void 0 : _a[k]);
+                            }))));
+                            el && pickGraphics.push(el);
                         }
-                        pickElements.forEach((element => {
-                            r.interaction.startInteraction(stateKey, element);
-                        }));
                     }
                 }));
-            })), checkReverse && r.interaction.reverseEventElement(stateKey)) : r.interaction.clearEventElement(stateKey, !0);
-        }));
+            }));
+        })), this._interaction.updateStateOfGraphics(stateKey, pickGraphics);
     }
     setDimensionIndex(value, opt) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         let dimensionInfo = null;
         Array.from(this._event.getComposedEventMap().values()).forEach((e => {
             const {eventType: eventType, event: event} = e;
@@ -701,11 +719,7 @@ export class BaseChart extends CompilableBase {
         }
         if (!1 !== opt.crosshair) {
             const crosshair = this.getComponentsByType(ComponentTypeEnum.cartesianCrosshair)[0];
-            crosshair && crosshair.clearAxisValue && crosshair.setAxisValue && (isUnableValue ? (null === (_c = crosshair.clearAxisValue) || void 0 === _c || _c.call(crosshair), 
-            null === (_d = crosshair.hide) || void 0 === _d || _d.call(crosshair)) : dimensionInfo.forEach((d => {
-                const {axis: axis, value: value} = d;
-                crosshair.clearAxisValue(), crosshair.setAxisValue(value, axis), crosshair.layoutByValue();
-            })));
+            crosshair && crosshair.clearAxisValue && crosshair.setAxisValue && (isUnableValue ? crosshair.hideCrosshair() : crosshair.showCrosshair(dimensionInfo));
         }
     }
     getColorScheme() {