@visactor/vchart 2.1.3-alpha.4 → 2.1.3

package/build/index.js

@@ -14658,12 +14658,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() {
@@ -15902,13 +15902,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,
@@ -33399,9 +33412,10 @@
         interactionTriggers: {},
         composedEventMap: {},
         tooltipProcessors: {},
+        runtimePluginInstallers: {},
         formatter: undefined
     });
-    const factoryRegistryVersion = "2.1.1";
+    const factoryRegistryVersion = "2.1.3";
     const factoryRegistryKey = Symbol.for(`@visactor/vchart/factory-registry@${factoryRegistryVersion}`);
     const globalFactoryRegistry = globalThis;
     const factoryRegistry = (_a = globalFactoryRegistry[factoryRegistryKey]) !== null && _a !== void 0 ? _a : (globalFactoryRegistry[factoryRegistryKey] = createFactoryRegistry());
@@ -33644,6 +33658,13 @@
         }
         return new Cror(tooltip);
     };
+    Factory._runtimePluginInstallers = factoryRegistry.runtimePluginInstallers;
+    Factory.registerRuntimePluginInstaller = (type, installer) => {
+        Factory._runtimePluginInstallers[type] = installer;
+    };
+    Factory.getRuntimePluginInstaller = (type) => {
+        return Factory._runtimePluginInstallers[type];
+    };
 
     function mergeTheme(target, ...sources) {
         return mergeSpec(transformThemeToMerge(target), ...sources.map(transformThemeToMerge));
@@ -37008,6 +37029,7 @@
     };
     const createStageFromApp = (app, params) => app.createStage(params);
 
+    const POPTIP_FOR_TEXT_PLUGIN_NAME = 'poptipForText';
     class Compiler {
         get stateAnimationConfig() {
             return this._stateAnimationConfig;
@@ -37072,8 +37094,36 @@
         getStage() {
             return this._stage;
         }
+        _dedupeStagePlugin(pluginName) {
+            var _a;
+            const pluginService = (_a = this._stage) === null || _a === void 0 ? void 0 : _a.pluginService;
+            if (!(pluginService === null || pluginService === void 0 ? void 0 : pluginService.findPluginsByName)) {
+                return;
+            }
+            const plugins = pluginService.findPluginsByName(pluginName);
+            if (plugins.length <= 1) {
+                return;
+            }
+            const plugin = plugins[0];
+            if (pluginService.uninstall) {
+                pluginService.uninstall(pluginName);
+                pluginService.register(plugin);
+            }
+            else {
+                plugins.slice(1).forEach(duplicatePlugin => {
+                    pluginService.unRegister(duplicatePlugin);
+                });
+            }
+        }
+        _dedupePoptipPlugin() {
+            var _a;
+            if (!((_a = this._option.pluginList) === null || _a === void 0 ? void 0 : _a.includes(POPTIP_FOR_TEXT_PLUGIN_NAME))) {
+                return;
+            }
+            this._dedupeStagePlugin(POPTIP_FOR_TEXT_PLUGIN_NAME);
+        }
         initView() {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if (this._released) {
                 return;
             }
@@ -37095,22 +37145,24 @@
                     modeParams
                 });
                 this._releaseVRenderAppRef = resolvedApp.releaseAppRef;
+                (_a = this._option.runtimePluginInstallers) === null || _a === void 0 ? void 0 : _a.forEach(install => install(resolvedApp.app));
                 try {
-                    this._stage = createStageFromApp(resolvedApp.app, Object.assign({ background, width: this._width, height: this._height, container: (_a = this._container.dom) !== null && _a !== void 0 ? _a : null, canvas: (_b = this._container.canvas) !== null && _b !== void 0 ? _b : null, dpr, viewBox: this._option.viewBox, canvasControled: this._option.canvasControled, beforeRender: (stage) => {
+                    this._stage = createStageFromApp(resolvedApp.app, Object.assign({ background, width: this._width, height: this._height, container: (_b = this._container.dom) !== null && _b !== void 0 ? _b : null, canvas: (_c = this._container.canvas) !== null && _c !== void 0 ? _c : null, dpr, viewBox: this._option.viewBox, canvasControled: this._option.canvasControled, beforeRender: (stage) => {
                             var _a, _b, _c;
                             (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.onBeforeRender();
                             (_c = (_b = this._option).beforeRender) === null || _c === void 0 ? void 0 : _c.call(_b, stage);
                         }, afterRender: this._option.afterRender, disableDirtyBounds: true, autoRender: true, ticker: this._option.ticker, pluginList: this._option.pluginList, enableHtmlAttribute: this._option.enableHtmlAttribute, optimize: this._option.optimize, supportsTouchEvents: this._option.supportsTouchEvents, supportsPointerEvents: this._option.supportsPointerEvents, event: {
                             clickInterval: clickInterval,
                             autoPreventDefault: autoPreventDefault
-                        }, ReactDOM: this._option.ReactDOM, autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr) }, ((_c = this._option.renderHooks) !== null && _c !== void 0 ? _c : {})));
+                        }, ReactDOM: this._option.ReactDOM, autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr) }, ((_d = this._option.renderHooks) !== null && _d !== void 0 ? _d : {})));
                 }
                 catch (error) {
-                    (_d = this._releaseVRenderAppRef) === null || _d === void 0 ? void 0 : _d.call(this);
+                    (_e = this._releaseVRenderAppRef) === null || _e === void 0 ? void 0 : _e.call(this);
                     this._releaseVRenderAppRef = undefined;
                     throw error;
                 }
             }
+            this._dedupePoptipPlugin();
             this._stage.enableIncrementalAutoRender();
             this._stage.setTheme({
                 symbol: {
@@ -47812,7 +47864,13 @@
             this._updateCurrentTheme();
             this._currentSize = this.getCurrentSize();
             const pluginList = [];
+            const runtimePluginInstallers = [];
             if (poptip !== false) {
+                const poptipInstaller = Factory.getRuntimePluginInstaller('poptipForText');
+                if (poptipInstaller) {
+                    poptipInstaller();
+                    runtimePluginInstallers.push(poptipInstaller);
+                }
                 pluginList.push('poptipForText');
             }
             if (spec.type === "sankey") {
@@ -47830,7 +47888,8 @@
                 dom: (_e = this._container) !== null && _e !== void 0 ? _e : 'none',
                 canvas: renderCanvas
             }, Object.assign(Object.assign({ mode: this._option.mode, stage,
-                pluginList }, restOptions), { background: this._getBackground(), onError: this._onError }));
+                pluginList,
+                runtimePluginInstallers }, restOptions), { background: this._getBackground(), onError: this._onError }));
             this._compiler.setSize(this._currentSize.width, this._currentSize.height);
             this._eventDispatcher = new EventDispatcher(this, this._compiler);
             this._event = new Event$1(this._eventDispatcher, mode);
@@ -49347,7 +49406,7 @@
         });
     };
 
-    const version = "2.1.1";
+    const version = "2.1.3";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -51141,6 +51200,7 @@
                 this._spec[mark.name] && this.initMarkStyleWithSpec(mark, this._spec[mark.name]);
             });
             this.initMarkStyle();
+            this.initMarkState();
             marks.forEach(mark => {
                 mark.commit(false);
             });
@@ -61317,11 +61377,28 @@
         getStatedGraphics(trigger) {
             return this._stateGraphicsByTrigger.get(trigger);
         }
+        _getMarkById(trigger) {
+            const markById = new Map();
+            trigger.getMarks().forEach(mark => {
+                if (mark) {
+                    markById.set(mark.id, mark);
+                }
+            });
+            return markById;
+        }
+        _hasAnimationByGraphicState(graphic, markById) {
+            var _a, _b, _c;
+            const mark = (_b = (_a = graphic.parent) === null || _a === void 0 ? void 0 : _a.mark) !== null && _b !== void 0 ? _b : markById.get(graphic.context.markId);
+            return !!((_c = mark === null || mark === void 0 ? void 0 : mark.hasAnimationByState) === null || _c === void 0 ? void 0 : _c.call(mark, 'state'));
+        }
         updateStates(trigger, newStatedGraphics, prevStatedGraphics, state, reverseState) {
             if (this._disableTriggerEvent) {
                 return [];
             }
             if (!newStatedGraphics || !newStatedGraphics.length) {
+                if (prevStatedGraphics && prevStatedGraphics.length) {
+                    this.clearAllStatesOfTrigger(trigger, state, reverseState);
+                }
                 return [];
             }
             if (state && reverseState) {
@@ -61345,42 +61422,36 @@
         }
         toggleReverseStateOfGraphics(trigger, newStatedGraphics, prevStatedGraphics, reverseState) {
             const markIdByState = trigger.getMarkIdByState();
+            const markById = this._getMarkById(trigger);
             prevStatedGraphics.forEach(g => {
-                var _a;
                 const hasReverse = reverseState && markIdByState[reverseState] && markIdByState[reverseState].includes(g.context.markId);
                 if (hasReverse) {
-                    const m = (_a = g.parent) === null || _a === void 0 ? void 0 : _a.mark;
-                    const hasAnimation = m.hasAnimationByState && m.hasAnimationByState('state');
+                    const hasAnimation = this._hasAnimationByGraphicState(g, markById);
                     addGraphicState(g, reverseState, true, hasAnimation);
                 }
             });
             newStatedGraphics.forEach(g => {
-                var _a;
                 const hasReverse = reverseState && markIdByState[reverseState] && markIdByState[reverseState].includes(g.context.markId);
                 if (hasReverse) {
-                    const m = (_a = g.parent) === null || _a === void 0 ? void 0 : _a.mark;
-                    const 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 markById = this._getMarkById(trigger);
             prevStatedGraphics.forEach(g => {
-                var _a;
                 const hasState = state && markIdByState[state] && markIdByState[state].includes(g.context.markId);
                 if (hasState) {
-                    const m = (_a = g.parent) === null || _a === void 0 ? void 0 : _a.mark;
-                    const hasAnimation = m.hasAnimationByState && m.hasAnimationByState('state');
+                    const hasAnimation = this._hasAnimationByGraphicState(g, markById);
                     removeGraphicState(g, state, hasAnimation);
                 }
             });
             newStatedGraphics.forEach(g => {
-                var _a;
                 const hasState = state && markIdByState[state] && markIdByState[state].includes(g.context.markId);
                 if (hasState) {
-                    const m = (_a = g.parent) === null || _a === void 0 ? void 0 : _a.mark;
-                    const hasAnimation = m.hasAnimationByState && m.hasAnimationByState('state');
+                    const hasAnimation = this._hasAnimationByGraphicState(g, markById);
                     addGraphicState(g, state, true, hasAnimation);
                 }
             });
@@ -65463,6 +65534,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();
     }
@@ -77930,7 +78005,7 @@
     class GlyphMark extends BaseMark {
         constructor() {
             super(...arguments);
-            this._setStateOfGraphic = (g) => {
+            this._setStateOfGraphic = (g, hasAnimation) => {
                 g.clearStates();
                 if (g.context.diffState === DiffState.enter || g.context.diffState === DiffState.update) {
                     g.glyphStateProxy = (stateName, nexStates) => {
@@ -77946,7 +78021,7 @@
                         }
                         return glyphAttrs;
                     };
-                    g.useStates(g.context.states);
+                    g.useStates(g.context.states, hasAnimation);
                 }
             };
         }
@@ -78025,12 +78100,13 @@
         _createGraphic(attrs = {}) {
             const glyph = createGlyph(attrs);
             glyph.onBeforeAttributeUpdate = this._onGlyphAttributeUpdate(glyph);
-            glyph.addEventListener('afterAttributeUpdate', (event) => {
-                var _a;
-                if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.type) === GLYPH_STATE_ATTRIBUTE_UPDATE_TYPE) {
+            const onAttributeUpdate = glyph.onAttributeUpdate.bind(glyph);
+            glyph.onAttributeUpdate = (context) => {
+                onAttributeUpdate(context);
+                if ((context === null || context === void 0 ? void 0 : context.type) === GLYPH_STATE_ATTRIBUTE_UPDATE_TYPE) {
                     this._syncInheritedStyleAttrs(glyph, glyph.attribute);
                 }
-            });
+            };
             const subMarks = this._subMarks;
             if (subMarks) {
                 const subGraphics = [];
@@ -89008,14 +89084,26 @@
         if (!data || data.length === 0) {
             return data;
         }
-        const { asTransformRatio, asReachRatio, asHeightRatio, asValueRatio, asNextValueRatio, asLastValueRatio, asLastValue, asCurrentValue, asNextValue, } = op;
+        const { asTransformRatio, asReachRatio, asHeightRatio, asValueRatio, asNextValueRatio, asLastValueRatio, asLastValue, asCurrentValue, asNextValue } = op;
         const valueField = resolveOptionValue$2(op.valueField);
         const heightVisual = (_a = resolveOptionValue$2(op.heightVisual)) !== null && _a !== void 0 ? _a : false;
         const isCone = (_b = resolveOptionValue$2(op.isCone)) !== null && _b !== void 0 ? _b : true;
         const range = resolveOptionValue$2(op.range);
-        const max = data.reduce((m, d) => Math.max(m, Number.parseFloat(d[valueField]) || -Infinity), -Infinity);
-        const min = data.reduce((m, d) => Math.min(m, Number.parseFloat(d[valueField]) || Infinity), Infinity);
-        const rangeArr = [(_c = range === null || range === void 0 ? void 0 : range.min) !== null && _c !== void 0 ? _c : min, (_d = range === null || range === void 0 ? void 0 : range.max) !== null && _d !== void 0 ? _d : max];
+        const max = data.reduce((m, d) => {
+            const value = Number.parseFloat(d[valueField]);
+            return isValidNumber$1(value) ? Math.max(m, value) : m;
+        }, -Infinity);
+        const rangeMin = (_c = range === null || range === void 0 ? void 0 : range.min) !== null && _c !== void 0 ? _c : 0;
+        const rangeMax = (_d = range === null || range === void 0 ? void 0 : range.max) !== null && _d !== void 0 ? _d : max;
+        const getValueRatio = (value) => {
+            if (!isValidNumber$1(value) || !isValidNumber$1(rangeMin) || !isValidNumber$1(rangeMax)) {
+                return 0;
+            }
+            if (rangeMin === rangeMax) {
+                return value < rangeMin ? 0 : 1;
+            }
+            return clamp$1((value - rangeMin) / (rangeMax - rangeMin), 0, 1);
+        };
         data.forEach((d, i) => {
             var _a, _b;
             const currentValue = Number.parseFloat(d[valueField]);
@@ -89023,15 +89111,16 @@
             const nextValue = Number.parseFloat((_b = data[i + 1]) === null || _b === void 0 ? void 0 : _b[valueField]);
             const transformRatio = !isValidNumber$1(nextValue * currentValue) || currentValue === 0 ? 0 : nextValue / currentValue;
             const reachRatio = !isValidNumber$1(currentValue * lastValue) || lastValue === 0 ? 0 : currentValue / lastValue;
+            const valueRatio = getValueRatio(currentValue);
             asLastValue && (d[asLastValue] = lastValue);
             asNextValue && (d[asNextValue] = nextValue);
             asTransformRatio && (d[asTransformRatio] = transformRatio);
             asReachRatio && (d[asReachRatio] = i === 0 ? 1 : reachRatio);
             asHeightRatio && (d[asHeightRatio] = heightVisual === true ? transformRatio : 1 / data.length);
-            asValueRatio && (d[asValueRatio] = currentValue / rangeArr[1]);
+            asValueRatio && (d[asValueRatio] = valueRatio);
             asNextValueRatio &&
-                (d[asNextValueRatio] = i === data.length - 1 ? (isCone ? 0 : d[asValueRatio]) : nextValue / rangeArr[1]);
-            asLastValueRatio && (d[asLastValueRatio] = i === 0 ? 1 : lastValue / rangeArr[1]);
+                (d[asNextValueRatio] = i === data.length - 1 ? (isCone ? 0 : d[asValueRatio]) : getValueRatio(nextValue));
+            asLastValueRatio && (d[asLastValueRatio] = i === 0 ? 1 : getValueRatio(lastValue));
             asCurrentValue && (d[asCurrentValue] = currentValue);
         });
         return data;
@@ -91222,18 +91311,18 @@
                                 highlightNodes.push(linkDatum.target);
                             }
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasLinkStateAnimation());
                         }
                         else if (linkDatum.target === nodeDatum.key) {
                             if (!highlightNodes.includes(linkDatum.source)) {
                                 highlightNodes.push(linkDatum.source);
                             }
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasLinkStateAnimation());
                         }
                         else {
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                         }
                     });
                 }
@@ -91253,11 +91342,11 @@
                     allLinkElements.forEach(linkEl => {
                         if (linkEl === graphic) {
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
+                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 }, true, this._hasLinkStateAnimation());
                         }
                         else {
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                            addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                         }
                     });
                 }
@@ -91371,11 +91460,11 @@
                             const linkDatum = getDatumOfGraphic(linkEl);
                             if (highlightLinks.includes((_a = linkDatum.key) !== null && _a !== void 0 ? _a : linkDatum.index)) {
                                 removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                                addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                                addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasLinkStateAnimation());
                             }
                             else {
                                 removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                                addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                                addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                             }
                         });
                     }
@@ -91424,7 +91513,7 @@
                             }, 0);
                             const ratio = val / linkDatum.value;
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
+                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         if (upSelectedLink) {
@@ -91437,11 +91526,11 @@
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
                             addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                                 ratio: upSelectedLink.value / linkDatum.value
-                            });
+                            }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                        addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                         return;
                     });
                     if (this._nodeMark) {
@@ -91509,7 +91598,7 @@
                         const originalDatum = linkDatum.datum;
                         if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) {
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
+                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         const selectedDatum = originalDatum
@@ -91537,7 +91626,7 @@
                             }, 0);
                             const ratio = val / linkDatum.value;
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
+                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         const upSelectedLink = upstreamLinks.find((upLink) => upLink.source === linkDatum.source && upLink.target === linkDatum.target);
@@ -91551,11 +91640,11 @@
                             removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
                             addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                                 ratio: upSelectedLink.value / linkDatum.value
-                            });
+                            }, true, this._hasLinkStateAnimation());
                             return;
                         }
                         removeGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                        addGraphicState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasLinkStateAnimation());
                         return;
                     });
                     this._highLightElements(allNodeElements, highlightNodes);
@@ -91567,6 +91656,16 @@
             var _a;
             return (_a = this._spec.direction) !== null && _a !== void 0 ? _a : 'horizontal';
         }
+        _hasStateAnimation(mark) {
+            var _a;
+            return isAnimationEnabledForSeries(this) && !!((_a = mark === null || mark === void 0 ? void 0 : mark.hasAnimationByState) === null || _a === void 0 ? void 0 : _a.call(mark, 'state'));
+        }
+        _hasLinkStateAnimation() {
+            return this._hasStateAnimation(this._linkMark);
+        }
+        _hasNodeStateAnimation() {
+            return this._hasStateAnimation(this._nodeMark);
+        }
         getCategoryField() {
             return this._categoryField;
         }
@@ -91860,10 +91959,10 @@
             graphics.forEach(g => {
                 removeGraphicState(g, [exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS]);
                 if (highlightNodes.includes(getDatumOfGraphic(g).key)) {
-                    addGraphicState(g, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                    addGraphicState(g, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true, this._hasNodeStateAnimation());
                 }
                 else {
-                    addGraphicState(g, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                    addGraphicState(g, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true, this._hasNodeStateAnimation());
                 }
             });
         }
@@ -106828,8 +106927,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerLayout(GridLayout.type, GridLayout);
     };
 
+    const installPoptip = (app) => {
+        if (app) {
+            installPoptipToApp(app);
+        }
+        else {
+            loadPoptip();
+        }
+    };
     const registerPoptip = () => {
-        loadPoptip();
+        Factory.registerRuntimePluginInstaller('poptipForText', installPoptip);
+        installPoptip();
     };
 
     const TOOLTIP_PREFIX = 'vchart-tooltip';