@visactor/react-vchart 2.1.3-alpha.4 → 2.1.3

package/build/index.js

@@ -13316,12 +13316,12 @@
       cursor: 1,
       html: 1
     };
-    class Graphic extends Node {
+    class GraphicImpl extends Node {
       static mixin(source) {
         const keys = Object.keys(source);
         for (let i = 0; i < keys.length; ++i) {
           const propertyName = keys[i];
-          Object.defineProperty(Graphic.prototype, propertyName, Object.getOwnPropertyDescriptor(source, propertyName));
+          Object.defineProperty(this.prototype, propertyName, Object.getOwnPropertyDescriptor(source, propertyName));
         }
       }
       get AABBBounds() {
@@ -14560,13 +14560,26 @@
         return null;
       }
     }
+    GraphicImpl.userSymbolMap = {};
+    const GRAPHIC_CLASS_SYMBOL = Symbol.for("@visactor/vrender-core/graphic-class");
+    function createGraphicClassState() {
+      return {
+        Graphic: GraphicImpl
+      };
+    }
+    function getGraphicClassState() {
+      var _a;
+      const globalScope = globalThis;
+      return null !== (_a = globalScope[GRAPHIC_CLASS_SYMBOL]) && void 0 !== _a || (globalScope[GRAPHIC_CLASS_SYMBOL] = createGraphicClassState()), globalScope[GRAPHIC_CLASS_SYMBOL];
+    }
+    const Graphic = getGraphicClassState().Graphic;
     function backgroundNotImage(image) {
       return "string" == typeof image ? !(image.startsWith("<svg") || isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) : !(!image.fill && !image.stroke) || !("string" != typeof image.gradient || !Array.isArray(image.stops));
     }
     function isExternalTexture(texture) {
       return !!texture && ("string" == typeof texture ? !builtinTextureTypes.has(texture) && (texture.startsWith("<svg") || isValidUrl$1(texture) || texture.includes("/") || isBase64$1(texture)) : isObject$2(texture));
     }
-    Graphic.userSymbolMap = {}, Graphic.mixin(EventTarget);
+    Graphic.mixin(EventTarget);
 
     const defaultThemeObj = {
         arc: DefaultArcAttribute,
@@ -30111,6 +30124,7 @@
         FederatedWheelEvent: FederatedWheelEvent,
         FlexLayoutPlugin: FlexLayoutPlugin,
         GLYPH_NUMBER_TYPE: GLYPH_NUMBER_TYPE,
+        GRAPHIC_CLASS_SYMBOL: GRAPHIC_CLASS_SYMBOL,
         GRAPHIC_REGISTRY_SYMBOL: GRAPHIC_REGISTRY_SYMBOL,
         GRAPHIC_UPDATE_TAG_KEY: GRAPHIC_UPDATE_TAG_KEY,
         GROUP_NUMBER_TYPE: GROUP_NUMBER_TYPE,
@@ -30398,6 +30412,7 @@
         getDefaultCharacterConfig: getDefaultCharacterConfig,
         getExtraModelMatrix: getExtraModelMatrix,
         getFactoryState: getFactoryState,
+        getGraphicClassState: getGraphicClassState,
         getGraphicRegistryState: getGraphicRegistryState,
         getLegacyBindingContext: getLegacyBindingContext,
         getModelMatrix: getModelMatrix,
@@ -33472,7 +33487,7 @@
     }
 
     var _a;
-    const factoryRegistryKey = Symbol.for("@visactor/vchart/factory-registry@2.1.1"),
+    const factoryRegistryKey = Symbol.for("@visactor/vchart/factory-registry@2.1.3"),
       globalFactoryRegistry = globalThis;
     const factoryRegistry = null !== (_a = globalFactoryRegistry[factoryRegistryKey]) && void 0 !== _a ? _a : globalFactoryRegistry[factoryRegistryKey] = {
       charts: {},
@@ -33502,6 +33517,7 @@
       interactionTriggers: {},
       composedEventMap: {},
       tooltipProcessors: {},
+      runtimePluginInstallers: {},
       formatter: void 0
     };
 
@@ -33681,7 +33697,9 @@
     }, Factory.createTooltipProcessor = (type, tooltip) => {
       const Cror = Factory._tooltipProcessors[type];
       return Cror ? new Cror(tooltip) : null;
-    };
+    }, Factory._runtimePluginInstallers = factoryRegistry.runtimePluginInstallers, Factory.registerRuntimePluginInstaller = (type, installer) => {
+      Factory._runtimePluginInstallers[type] = installer;
+    }, Factory.getRuntimePluginInstaller = type => Factory._runtimePluginInstallers[type];
 
     function mergeTheme(target, ...sources) {
       return mergeSpec(transformThemeToMerge(target), ...sources.map(transformThemeToMerge));
@@ -44002,8 +44020,23 @@
       getStage() {
         return this._stage;
       }
+      _dedupeStagePlugin(pluginName) {
+        var _a;
+        const pluginService = null === (_a = this._stage) || void 0 === _a ? void 0 : _a.pluginService;
+        if (!(null == pluginService ? void 0 : pluginService.findPluginsByName)) return;
+        const plugins = pluginService.findPluginsByName(pluginName);
+        if (plugins.length <= 1) return;
+        const plugin = plugins[0];
+        pluginService.uninstall ? (pluginService.uninstall(pluginName), pluginService.register(plugin)) : plugins.slice(1).forEach(duplicatePlugin => {
+          pluginService.unRegister(duplicatePlugin);
+        });
+      }
+      _dedupePoptipPlugin() {
+        var _a;
+        (null === (_a = this._option.pluginList) || void 0 === _a ? void 0 : _a.includes("poptipForText")) && this._dedupeStagePlugin("poptipForText");
+      }
       initView() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (this._released) return;
         if (this.isInited = !0, this._stage) return;
         const {
@@ -44026,14 +44059,14 @@
             mode: mode,
             modeParams: modeParams
           });
-          this._releaseVRenderAppRef = resolvedApp.releaseAppRef;
+          this._releaseVRenderAppRef = resolvedApp.releaseAppRef, null === (_a = this._option.runtimePluginInstallers) || void 0 === _a || _a.forEach(install => install(resolvedApp.app));
           try {
             this._stage = createStageFromApp(resolvedApp.app, Object.assign({
               background: background,
               width: this._width,
               height: this._height,
-              container: null !== (_a = this._container.dom) && void 0 !== _a ? _a : null,
-              canvas: null !== (_b = this._container.canvas) && void 0 !== _b ? _b : null,
+              container: null !== (_b = this._container.dom) && void 0 !== _b ? _b : null,
+              canvas: null !== (_c = this._container.canvas) && void 0 !== _c ? _c : null,
               dpr: dpr,
               viewBox: this._option.viewBox,
               canvasControled: this._option.canvasControled,
@@ -44056,12 +44089,12 @@
               },
               ReactDOM: this._option.ReactDOM,
               autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr)
-            }, null !== (_c = this._option.renderHooks) && void 0 !== _c ? _c : {}));
+            }, null !== (_d = this._option.renderHooks) && void 0 !== _d ? _d : {}));
           } catch (error) {
-            throw null === (_d = this._releaseVRenderAppRef) || void 0 === _d || _d.call(this), this._releaseVRenderAppRef = void 0, error;
+            throw null === (_e = this._releaseVRenderAppRef) || void 0 === _e || _e.call(this), this._releaseVRenderAppRef = void 0, error;
           }
         }
-        this._stage.enableIncrementalAutoRender(), this._stage.setTheme({
+        this._dedupePoptipPlugin(), this._stage.enableIncrementalAutoRender(), this._stage.setTheme({
           symbol: {
             shape: "circle",
             size: 8
@@ -48927,8 +48960,13 @@
           isTrueBrowseEnv = isTrueBrowser(mode);
         if (isTrueBrowseEnv ? registerBrowserEnv() : "node" === mode && registerNodeEnv(), isTrueBrowseEnv && dom && (this._container = isString$1(dom) ? vglobal.getElementById(dom) : dom), renderCanvas && (this._canvas = renderCanvas), stage && (this._stage = stage), "node" !== mode && !this._container && !this._canvas && !this._stage) return void (null === (_b = this._option) || void 0 === _b || _b.onError("please specify container or renderCanvas!"));
         this._viewBox = this._option.viewBox, this._currentThemeName = ThemeManager.getCurrentThemeName(), this._setNewSpec(spec), this._updateCurrentTheme(), this._currentSize = this.getCurrentSize();
-        const pluginList = [];
-        !1 !== poptip && pluginList.push("poptipForText"), "sankey" === spec.type && pluginList.push("scrollbar");
+        const pluginList = [],
+          runtimePluginInstallers = [];
+        if (!1 !== poptip) {
+          const poptipInstaller = Factory.getRuntimePluginInstaller("poptipForText");
+          poptipInstaller && (poptipInstaller(), runtimePluginInstallers.push(poptipInstaller)), pluginList.push("poptipForText");
+        }
+        "sankey" === spec.type && pluginList.push("scrollbar");
         const logger = new Logger(null !== (_c = this._option.logLevel) && void 0 !== _c ? _c : LoggerLevel.Error);
         Logger.setInstance(logger), (null === (_d = this._option) || void 0 === _d ? void 0 : _d.onError) && logger.addErrorHandler((...args) => {
           var _a, _b;
@@ -48939,7 +48977,8 @@
         }, Object.assign(Object.assign({
           mode: this._option.mode,
           stage: stage,
-          pluginList: pluginList
+          pluginList: pluginList,
+          runtimePluginInstallers: runtimePluginInstallers
         }, restOptions), {
           background: this._getBackground(),
           onError: this._onError
@@ -50929,7 +50968,7 @@
         const marks = this.getMarksWithoutRoot();
         marks.forEach(mark => {
           mark.clearBeforeReInit(), this._spec[mark.name] && this.initMarkStyleWithSpec(mark, this._spec[mark.name]);
-        }), this.initMarkStyle(), marks.forEach(mark => {
+        }), this.initMarkStyle(), this.initMarkState(), marks.forEach(mark => {
           mark.commit(!1);
         }), this._updateExtensionMarkSpec(), this._updateSpecData(), this._tooltipHelper && this._tooltipHelper.updateTooltipSpec();
         isAnimationEnabledForSeries(this) && this.initAnimation();
@@ -59227,41 +59266,46 @@
       getStatedGraphics(trigger) {
         return this._stateGraphicsByTrigger.get(trigger);
       }
+      _getMarkById(trigger) {
+        const markById = new Map();
+        return trigger.getMarks().forEach(mark => {
+          mark && markById.set(mark.id, mark);
+        }), markById;
+      }
+      _hasAnimationByGraphicState(graphic, markById) {
+        var _a, _b, _c;
+        const mark = null !== (_b = null === (_a = graphic.parent) || void 0 === _a ? void 0 : _a.mark) && void 0 !== _b ? _b : markById.get(graphic.context.markId);
+        return !!(null === (_c = null == mark ? void 0 : mark.hasAnimationByState) || void 0 === _c ? void 0 : _c.call(mark, "state"));
+      }
       updateStates(trigger, newStatedGraphics, prevStatedGraphics, state, reverseState) {
-        return this._disableTriggerEvent ? [] : newStatedGraphics && newStatedGraphics.length ? (state && reverseState ? prevStatedGraphics && prevStatedGraphics.length ? (this.toggleReverseStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, reverseState), this.toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state)) : this.addBothStateOfGraphics(trigger, newStatedGraphics, state, reverseState) : state && (prevStatedGraphics && prevStatedGraphics.length ? this.toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state) : this.addStateOfGraphics(trigger, newStatedGraphics, state)), newStatedGraphics) : [];
+        return this._disableTriggerEvent ? [] : newStatedGraphics && newStatedGraphics.length ? (state && reverseState ? prevStatedGraphics && prevStatedGraphics.length ? (this.toggleReverseStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, reverseState), this.toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state)) : this.addBothStateOfGraphics(trigger, newStatedGraphics, state, reverseState) : state && (prevStatedGraphics && prevStatedGraphics.length ? this.toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state) : this.addStateOfGraphics(trigger, newStatedGraphics, state)), newStatedGraphics) : (prevStatedGraphics && prevStatedGraphics.length && this.clearAllStatesOfTrigger(trigger, state, reverseState), []);
       }
       toggleReverseStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, reverseState) {
-        const markIdByState = trigger.getMarkIdByState();
+        const markIdByState = trigger.getMarkIdByState(),
+          markById = this._getMarkById(trigger);
         prevStatedGraphics.forEach(g => {
-          var _a;
           if (reverseState && markIdByState[reverseState] && markIdByState[reverseState].includes(g.context.markId)) {
-            const m = null === (_a = g.parent) || void 0 === _a ? void 0 : _a.mark,
-              hasAnimation = m.hasAnimationByState && m.hasAnimationByState("state");
+            const hasAnimation = this._hasAnimationByGraphicState(g, markById);
             addGraphicState(g, reverseState, !0, hasAnimation);
           }
         }), newStatedGraphics.forEach(g => {
-          var _a;
           if (reverseState && markIdByState[reverseState] && markIdByState[reverseState].includes(g.context.markId)) {
-            const m = null === (_a = g.parent) || void 0 === _a ? void 0 : _a.mark,
-              hasAnimation = m.hasAnimationByState && m.hasAnimationByState("state");
+            const hasAnimation = this._hasAnimationByGraphicState(g, markById);
             removeGraphicState(g, reverseState, hasAnimation);
           }
         });
       }
       toggleStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, state) {
-        const markIdByState = trigger.getMarkIdByState();
+        const markIdByState = trigger.getMarkIdByState(),
+          markById = this._getMarkById(trigger);
         prevStatedGraphics.forEach(g => {
-          var _a;
           if (state && markIdByState[state] && markIdByState[state].includes(g.context.markId)) {
-            const m = null === (_a = g.parent) || void 0 === _a ? void 0 : _a.mark,
-              hasAnimation = m.hasAnimationByState && m.hasAnimationByState("state");
+            const hasAnimation = this._hasAnimationByGraphicState(g, markById);
             removeGraphicState(g, state, hasAnimation);
           }
         }), newStatedGraphics.forEach(g => {
-          var _a;
           if (state && markIdByState[state] && markIdByState[state].includes(g.context.markId)) {
-            const m = null === (_a = g.parent) || void 0 === _a ? void 0 : _a.mark,
-              hasAnimation = m.hasAnimationByState && m.hasAnimationByState("state");
+            const hasAnimation = this._hasAnimationByGraphicState(g, markById);
             addGraphicState(g, state, !0, hasAnimation);
           }
         });
@@ -62401,6 +62445,10 @@
     function bindPoptip(container) {
       container.isBound(PopTipRenderContribution) || (container.bind(PopTipRenderContribution).toSelf().inSingletonScope(), container.bind(InteractiveSubRenderContribution).toService(PopTipRenderContribution)), container.isBound(PopTipPlugin) || (container.bind(PopTipPlugin).toSelf(), container.bind(AutoEnablePlugins).toService(PopTipPlugin)), container.isBound(PopTipForClipedTextPlugin) || (container.bind(PopTipForClipedTextPlugin).toSelf(), container.bind(AutoEnablePlugins).toService(PopTipForClipedTextPlugin));
     }
+    function installPoptipToApp(app) {
+      if (!app) throw new Error("installPoptipToApp requires an app instance");
+      configureRuntimeApplicationForApp(app), bindPoptip(getRuntimeInstallerBindingContext()), refreshRuntimeInstallerContributions(), installRuntimeGraphicRenderersToApp(app);
+    }
     function loadPoptip() {
       bindPoptip(getLegacyBindingContext()), bindPoptip(getRuntimeInstallerBindingContext()), refreshRuntimeInstallerContributions();
     }
@@ -73714,7 +73762,7 @@
     const GLYPH_INHERITED_STYLE_ATTRIBUTES = new Set(["fill", "fillOpacity", "stroke", "strokeOpacity", "opacity", "lineWidth", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "miterLimit", "shadowBlur", "shadowColor", "shadowOffsetX", "shadowOffsetY", "visible", "pickable", "cursor"]);
     class GlyphMark extends BaseMark {
       constructor() {
-        super(...arguments), this._setStateOfGraphic = g => {
+        super(...arguments), this._setStateOfGraphic = (g, hasAnimation) => {
           g.clearStates(), g.context.diffState !== DiffState.enter && g.context.diffState !== DiffState.update || (g.glyphStateProxy = (stateName, nexStates) => {
             var _a;
             const glyphAttrs = {
@@ -73723,7 +73771,7 @@
             return g.glyphStates ? g.glyphStates[stateName] || (g.glyphStates[stateName] = glyphAttrs) : g.glyphStates = {
               [stateName]: glyphAttrs
             }, glyphAttrs;
-          }, g.useStates(g.context.states));
+          }, g.useStates(g.context.states, hasAnimation));
         };
       }
       getSubMarks() {
@@ -73773,10 +73821,11 @@
       }
       _createGraphic(attrs = {}) {
         const glyph = createGlyph(attrs);
-        glyph.onBeforeAttributeUpdate = this._onGlyphAttributeUpdate(glyph), glyph.addEventListener("afterAttributeUpdate", event => {
-          var _a;
-          2 === (null === (_a = null == event ? void 0 : event.detail) || void 0 === _a ? void 0 : _a.type) && this._syncInheritedStyleAttrs(glyph, glyph.attribute);
-        });
+        glyph.onBeforeAttributeUpdate = this._onGlyphAttributeUpdate(glyph);
+        const onAttributeUpdate = glyph.onAttributeUpdate.bind(glyph);
+        glyph.onAttributeUpdate = context => {
+          onAttributeUpdate(context), 2 === (null == context ? void 0 : context.type) && this._syncInheritedStyleAttrs(glyph, glyph.attribute);
+        };
         const subMarks = this._subMarks;
         if (subMarks) {
           const subGraphics = [];
@@ -82537,17 +82586,22 @@
         heightVisual = null !== (_a = resolveOptionValue$2(op.heightVisual)) && void 0 !== _a && _a,
         isCone = null === (_b = resolveOptionValue$2(op.isCone)) || void 0 === _b || _b,
         range = resolveOptionValue$2(op.range),
-        max = data.reduce((m, d) => Math.max(m, Number.parseFloat(d[valueField]) || -1 / 0), -1 / 0),
-        min = data.reduce((m, d) => Math.min(m, Number.parseFloat(d[valueField]) || 1 / 0), 1 / 0),
-        rangeArr = [null !== (_c = null == range ? void 0 : range.min) && void 0 !== _c ? _c : min, null !== (_d = null == range ? void 0 : range.max) && void 0 !== _d ? _d : max];
+        max = data.reduce((m, d) => {
+          const value = Number.parseFloat(d[valueField]);
+          return isValidNumber$1(value) ? Math.max(m, value) : m;
+        }, -1 / 0),
+        rangeMin = null !== (_c = null == range ? void 0 : range.min) && void 0 !== _c ? _c : 0,
+        rangeMax = null !== (_d = null == range ? void 0 : range.max) && void 0 !== _d ? _d : max,
+        getValueRatio = value => isValidNumber$1(value) && isValidNumber$1(rangeMin) && isValidNumber$1(rangeMax) ? rangeMin === rangeMax ? value < rangeMin ? 0 : 1 : clamp$1((value - rangeMin) / (rangeMax - rangeMin), 0, 1) : 0;
       return data.forEach((d, i) => {
         var _a, _b;
         const currentValue = Number.parseFloat(d[valueField]),
           lastValue = Number.parseFloat(null === (_a = data[i - 1]) || void 0 === _a ? void 0 : _a[valueField]),
           nextValue = Number.parseFloat(null === (_b = data[i + 1]) || void 0 === _b ? void 0 : _b[valueField]),
           transformRatio = isValidNumber$1(nextValue * currentValue) && 0 !== currentValue ? nextValue / currentValue : 0,
-          reachRatio = isValidNumber$1(currentValue * lastValue) && 0 !== lastValue ? currentValue / lastValue : 0;
-        asLastValue && (d[asLastValue] = lastValue), asNextValue && (d[asNextValue] = nextValue), asTransformRatio && (d[asTransformRatio] = transformRatio), asReachRatio && (d[asReachRatio] = 0 === i ? 1 : reachRatio), asHeightRatio && (d[asHeightRatio] = !0 === heightVisual ? transformRatio : 1 / data.length), asValueRatio && (d[asValueRatio] = currentValue / rangeArr[1]), asNextValueRatio && (d[asNextValueRatio] = i === data.length - 1 ? isCone ? 0 : d[asValueRatio] : nextValue / rangeArr[1]), asLastValueRatio && (d[asLastValueRatio] = 0 === i ? 1 : lastValue / rangeArr[1]), asCurrentValue && (d[asCurrentValue] = currentValue);
+          reachRatio = isValidNumber$1(currentValue * lastValue) && 0 !== lastValue ? currentValue / lastValue : 0,
+          valueRatio = getValueRatio(currentValue);
+        asLastValue && (d[asLastValue] = lastValue), asNextValue && (d[asNextValue] = nextValue), asTransformRatio && (d[asTransformRatio] = transformRatio), asReachRatio && (d[asReachRatio] = 0 === i ? 1 : reachRatio), asHeightRatio && (d[asHeightRatio] = !0 === heightVisual ? transformRatio : 1 / data.length), asValueRatio && (d[asValueRatio] = valueRatio), asNextValueRatio && (d[asNextValueRatio] = i === data.length - 1 ? isCone ? 0 : d[asValueRatio] : getValueRatio(nextValue)), asLastValueRatio && (d[asLastValueRatio] = 0 === i ? 1 : getValueRatio(lastValue)), asCurrentValue && (d[asCurrentValue] = currentValue);
       }), data;
     };
     const funnelTransform = (originData, op) => {
@@ -84272,7 +84326,7 @@
             if (!allLinkElements || !allLinkElements.length) return;
             allLinkElements.forEach((linkEl, i) => {
               const linkDatum = getDatumOfGraphic(linkEl);
-              linkDatum.source === nodeDatum.key ? (highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : linkDatum.target === nodeDatum.key ? (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+              linkDatum.source === nodeDatum.key ? (highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0, this._hasLinkStateAnimation())) : linkDatum.target === nodeDatum.key ? (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0, this._hasLinkStateAnimation())) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation()));
             });
           }
           this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), this._needClear = !0;
@@ -84285,7 +84339,7 @@
             allLinkElements.forEach(linkEl => {
               linkEl === graphic ? (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                 ratio: 1
-              })) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+              }, !0, this._hasLinkStateAnimation())) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation()));
             });
           }
           this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), this._needClear = !0;
@@ -84341,7 +84395,7 @@
               allLinkElements.forEach((linkEl, i) => {
                 var _a;
                 const linkDatum = getDatumOfGraphic(linkEl);
-                highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+                highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0, this._hasLinkStateAnimation())) : (removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation()));
               });
             }
             this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
@@ -84372,12 +84426,12 @@
                 const ratio = selectedDatum.reduce((sum, d) => sum + d.value, 0) / linkDatum.value;
                 return removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                   ratio: ratio
-                });
+                }, !0, this._hasLinkStateAnimation());
               }
               if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                 ratio: upSelectedLink.value / linkDatum.value
-              });
-              removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+              }, !0, this._hasLinkStateAnimation());
+              removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation());
             }), this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
           }
           this._needClear = !0;
@@ -84417,7 +84471,7 @@
                 originalDatum = linkDatum.datum;
               if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                 ratio: 1
-              });
+              }, !0, this._hasLinkStateAnimation());
               const selectedDatum = originalDatum ? originalDatum.filter(entry => {
                 const parentKeysList = entry.parents.map(item => item.key);
                 return parentKeysList.includes(curLinkDatum.source) && parentKeysList.includes(curLinkDatum.target);
@@ -84430,13 +84484,13 @@
                 })).reduce((sum, d) => sum + d.value, 0) / linkDatum.value;
                 return removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                   ratio: ratio
-                });
+                }, !0, this._hasLinkStateAnimation());
               }
               const upSelectedLink = upstreamLinks.find(upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target);
               if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), void addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                 ratio: upSelectedLink.value / linkDatum.value
-              });
-              removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+              }, !0, this._hasLinkStateAnimation());
+              removeGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), addGraphicState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasLinkStateAnimation());
             }), this._highLightElements(allNodeElements, highlightNodes);
           }
           this._needClear = !0;
@@ -84446,6 +84500,16 @@
         var _a;
         return null !== (_a = this._spec.direction) && void 0 !== _a ? _a : "horizontal";
       }
+      _hasStateAnimation(mark) {
+        var _a;
+        return isAnimationEnabledForSeries(this) && !!(null === (_a = null == mark ? void 0 : mark.hasAnimationByState) || void 0 === _a ? void 0 : _a.call(mark, "state"));
+      }
+      _hasLinkStateAnimation() {
+        return this._hasStateAnimation(this._linkMark);
+      }
+      _hasNodeStateAnimation() {
+        return this._hasStateAnimation(this._nodeMark);
+      }
       getCategoryField() {
         return this._categoryField;
       }
@@ -84690,7 +84754,7 @@
       }
       _highLightElements(graphics, highlightNodes) {
         graphics && graphics.length && graphics.forEach(g => {
-          removeGraphicState(g, [STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS]), highlightNodes.includes(getDatumOfGraphic(g).key) ? addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0) : addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+          removeGraphicState(g, [STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS]), highlightNodes.includes(getDatumOfGraphic(g).key) ? addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0, this._hasNodeStateAnimation()) : addGraphicState(g, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0, this._hasNodeStateAnimation());
         });
       }
       initTooltip() {
@@ -96452,8 +96516,11 @@
       Factory.registerLayout(GridLayout.type, GridLayout);
     };
 
+    const installPoptip = app => {
+      app ? installPoptipToApp(app) : loadPoptip();
+    };
     const registerPoptip = () => {
-      loadPoptip();
+      Factory.registerRuntimePluginInstaller("poptipForText", installPoptip), installPoptip();
     };
 
     const TOOLTIP_PREFIX = "vchart-tooltip";
@@ -101055,7 +101122,7 @@
 
     const VChartSimple = createChart('VChartSimple');
 
-    const version = "2.1.1";
+    const version = "2.1.3";
 
     exports.Area = Area;
     exports.AreaChart = AreaChart;