@visactor/vchart-extension 2.1.3-alpha.5 → 2.1.4-alpha.0

package/build/index.js

@@ -1070,9 +1070,11 @@
 
     class ConversionFunnelChartSpecTransformer extends vchart.FunnelChartSpecTransformer {
         transformSpec(spec) {
+            var _a, _b, _c;
             const { conversionArrow, extensionMark = [], funnelBackground } = spec;
             if (conversionArrow && conversionArrow.arrows && conversionArrow.arrows.length) {
-                const marks = addArrowMark(conversionArrow);
+                const arrowTheme = (_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.getTheme) === null || _b === void 0 ? void 0 : _b.call(_a, 'series', 'funnel')) === null || _c === void 0 ? void 0 : _c.conversionArrow;
+                const marks = addArrowMark(conversionArrow, arrowTheme);
                 if (marks && marks.length) {
                     extensionMark.push(...marks);
                 }
@@ -1093,12 +1095,12 @@
             return seriesSpec;
         }
     }
-    function addArrowMark(arrowSpec) {
+    function addArrowMark(arrowSpec, theme) {
         const { arrows } = arrowSpec, style = __rest$4(arrowSpec, ["arrows"]);
         const leftArrows = arrows.filter(arrow => arrow.position === 'left');
         const rightArrows = arrows.filter(arrow => arrow.position === 'right');
-        const rightGroup = computeArrows$1(rightArrows, style);
-        const leftGroup = computeArrows$1(leftArrows, style);
+        const rightGroup = computeArrows$1(rightArrows, style, theme);
+        const leftGroup = computeArrows$1(leftArrows, style, theme);
         const result = [];
         if (rightGroup) {
             rightGroup.name = 'arrowRight';
@@ -1110,7 +1112,8 @@
         }
         return result;
     }
-    function computeArrows$1(arrows, style) {
+    function computeArrows$1(arrows, style, theme) {
+        var _a, _b, _c;
         if ((arrows === null || arrows === void 0 ? void 0 : arrows.length) === 0) {
             return null;
         }
@@ -1121,22 +1124,22 @@
             zIndex: vchart.LayoutZIndex.Mark + 1,
             children: []
         };
-        const lineMark = generateArrowLineSpec(line, margin);
+        const lineMark = generateArrowLineSpec(line, margin, (_a = theme === null || theme === void 0 ? void 0 : theme.line) === null || _a === void 0 ? void 0 : _a.style);
         if (lineMark) {
             result.push(lineMark);
         }
-        const arrowMark = generateArrowSymbolSpec(symbol, margin);
+        const arrowMark = generateArrowSymbolSpec(symbol, margin, (_b = theme === null || theme === void 0 ? void 0 : theme.symbol) === null || _b === void 0 ? void 0 : _b.style);
         if (arrowMark) {
             result.push(arrowMark);
         }
-        const textMark = generateArrowTextSpec(text, margin);
+        const textMark = generateArrowTextSpec(text, margin, (_c = theme === null || theme === void 0 ? void 0 : theme.text) === null || _c === void 0 ? void 0 : _c.style);
         if (textMark) {
             result.push(textMark);
         }
         rootGroup.children = result;
         return rootGroup;
     }
-    function generateArrowLineSpec(line = {}, margin) {
+    function generateArrowLineSpec(line = {}, margin, themeStyle = {}) {
         const { style = {} } = line, rest = __rest$4(line, ["style"]);
         const renderable = (arrow, ctx) => {
             var _a, _b;
@@ -1148,7 +1151,7 @@
             }
             return true;
         };
-        return Object.assign(Object.assign({ type: 'polygon', interactive: false }, rest), { dataKey: arrow => `${arrow.id}`, style: Object.assign(Object.assign(Object.assign({}, DEFAULT_ARROW_MARK_STYLE), style), { renderable, points: (arrow, ctx) => {
+        return Object.assign(Object.assign({ type: 'polygon', interactive: false }, rest), { dataKey: arrow => `${arrow.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, DEFAULT_ARROW_MARK_STYLE), themeStyle), style), { renderable, points: (arrow, ctx) => {
                     if (!renderable(arrow, ctx)) {
                         return [];
                     }
@@ -1157,9 +1160,9 @@
                     return points;
                 } }) });
     }
-    function generateArrowSymbolSpec(symbol = {}, margin) {
+    function generateArrowSymbolSpec(symbol = {}, margin, themeStyle = {}) {
         const { style = {} } = symbol, rest = __rest$4(symbol, ["style"]);
-        return Object.assign(Object.assign({ type: 'symbol', interactive: false, dataKey: arrow => `${arrow.id}` }, rest), { style: Object.assign(Object.assign(Object.assign({}, DEFAULT_ARROW_SYMBOL_MARK_STYLE), style), { x: (arrow, ctx) => {
+        return Object.assign(Object.assign({ type: 'symbol', interactive: false, dataKey: arrow => `${arrow.id}` }, rest), { style: Object.assign(Object.assign(Object.assign(Object.assign({}, DEFAULT_ARROW_SYMBOL_MARK_STYLE), themeStyle), style), { x: (arrow, ctx) => {
                     var _a, _b;
                     let points = arrow.layout.points;
                     points = prepareArrowPoints(arrow, ctx, margin);
@@ -1171,9 +1174,9 @@
                     return (_b = (_a = points[(points === null || points === void 0 ? void 0 : points.length) - 1]) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : NaN;
                 }, angle: (arrow) => (arrow.position === 'left' ? 90 : -90) }) });
     }
-    function generateArrowTextSpec(text = {}, margin) {
+    function generateArrowTextSpec(text = {}, margin, themeStyle = {}) {
         const { style = {}, formatMethod, textMargin = 4 } = text, rest = __rest$4(text, ["style", "formatMethod", "textMargin"]);
-        return Object.assign(Object.assign({ type: 'text', dataKey: arrow => `${arrow.id}`, interactive: false, animation: false }, rest), { style: Object.assign(Object.assign(Object.assign({}, DEFAULT_ARROW_TEXT_MARK_STYLE), { text: (arrow, ctx) => {
+        return Object.assign(Object.assign({ type: 'text', dataKey: arrow => `${arrow.id}`, interactive: false, animation: false }, rest), { style: Object.assign(Object.assign(Object.assign(Object.assign({}, DEFAULT_ARROW_TEXT_MARK_STYLE), themeStyle), { text: (arrow, ctx) => {
                     var _a, _b, _c, _d, _e, _f, _g;
                     const { text: textContent } = arrow;
                     let displayTextContent = textContent;
@@ -10313,7 +10316,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: {},
@@ -10343,6 +10346,7 @@
       interactionTriggers: {},
       composedEventMap: {},
       tooltipProcessors: {},
+      runtimePluginInstallers: {},
       formatter: void 0
     };
 
@@ -10522,7 +10526,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];
 
     const registerChartPlugin = plugin => {
       Factory.registerChartPlugin(plugin.type, plugin);
@@ -21819,41 +21825,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);
           }
         });
@@ -24587,7 +24598,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();