@visactor/vchart 2.1.0-alpha.17 → 2.1.0-alpha.18

package/cjs/series/sankey/sankey.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.registerSankeySeries = exports.SankeySeries = void 0;
 
-const cartesian_1 = require("../cartesian/cartesian"), type_1 = require("../interface/type"), utils_1 = require("../../animation/utils"), config_1 = require("../../animation/config"), register_1 = require("../../data/register"), sankey_1 = require("../../data/transforms/sankey"), sankey_nodes_1 = require("../../data/transforms/sankey-nodes"), sankey_links_1 = require("../../data/transforms/sankey-links"), interface_1 = require("../../compile/mark/interface"), vdataset_1 = require("@visactor/vdataset"), layout_1 = require("../../constant/layout"), attribute_1 = require("../../constant/attribute"), event_1 = require("../../constant/event"), tooltip_helper_1 = require("./tooltip-helper"), vutils_1 = require("@visactor/vutils"), animation_1 = require("./animation"), color_ordinal_scale_1 = require("../../scale/color-ordinal-scale"), rect_1 = require("../../mark/rect"), text_1 = require("../../mark/text"), link_path_1 = require("../../mark/link-path"), constant_1 = require("./constant"), flatten_1 = require("../../data/transforms/flatten"), factory_1 = require("../../core/factory"), initialize_1 = require("../../data/initialize"), data_key_1 = require("../../data/transforms/data-key"), sankey_transformer_1 = require("./sankey-transformer"), util_1 = require("../../component/util"), util_2 = require("../../util"), glyph_1 = require("../../mark/utils/glyph"), sankey_2 = require("../../theme/builtin/common/series/sankey");
+const cartesian_1 = require("../cartesian/cartesian"), type_1 = require("../interface/type"), utils_1 = require("../../animation/utils"), config_1 = require("../../animation/config"), register_1 = require("../../data/register"), sankey_1 = require("../../data/transforms/sankey"), sankey_nodes_1 = require("../../data/transforms/sankey-nodes"), sankey_links_1 = require("../../data/transforms/sankey-links"), interface_1 = require("../../compile/mark/interface"), vdataset_1 = require("@visactor/vdataset"), layout_1 = require("../../constant/layout"), attribute_1 = require("../../constant/attribute"), event_1 = require("../../constant/event"), tooltip_helper_1 = require("./tooltip-helper"), vutils_1 = require("@visactor/vutils"), animation_1 = require("./animation"), color_ordinal_scale_1 = require("../../scale/color-ordinal-scale"), rect_1 = require("../../mark/rect"), text_1 = require("../../mark/text"), link_path_1 = require("../../mark/link-path"), constant_1 = require("./constant"), flatten_1 = require("../../data/transforms/flatten"), factory_1 = require("../../core/factory"), initialize_1 = require("../../data/initialize"), data_key_1 = require("../../data/transforms/data-key"), sankey_transformer_1 = require("./sankey-transformer"), util_1 = require("../../component/util"), util_2 = require("../../util"), glyph_1 = require("../../mark/utils/glyph"), sankey_2 = require("../../theme/builtin/common/series/sankey"), graphic_state_1 = require("../../util/graphic-state");
 
 class SankeySeries extends cartesian_1.CartesianSeries {
     constructor() {
@@ -41,9 +41,9 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             if (!allNodeElements || !allNodeElements.length) return;
             const allLinkElements = null === (_b = this._linkMark) || void 0 === _b ? void 0 : _b.getGraphics();
             allLinkElements && allLinkElements.length && (allNodeElements.forEach((el => {
-                el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                (0, graphic_state_1.removeGraphicState)(el, [ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE ]);
             })), allLinkElements.forEach((el => {
-                el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                (0, graphic_state_1.removeGraphicState)(el, [ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE ]);
             })), this._needClear = !1);
         }, this._handleNodeAdjacencyClick = graphic => {
             const nodeDatum = (0, util_2.getDatumOfGraphic)(graphic), highlightNodes = [ nodeDatum.key ];
@@ -53,11 +53,12 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                 allLinkElements.forEach(((linkEl, i) => {
                     const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl);
                     linkDatum.source === nodeDatum.key ? (highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                    linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : linkDatum.target === nodeDatum.key ? (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                    linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
-                    linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+                    (0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    (0, graphic_state_1.addGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : linkDatum.target === nodeDatum.key ? (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                    (0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    (0, graphic_state_1.addGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : ((0, 
+                    graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                    (0, graphic_state_1.addGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
                 }));
             }
             this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), 
@@ -68,10 +69,11 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                 const allLinkElements = this._linkMark.getGraphics();
                 if (!allLinkElements || !allLinkElements.length) return;
                 allLinkElements.forEach((linkEl => {
-                    linkEl === graphic ? (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    linkEl === graphic ? ((0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
                     (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                         ratio: 1
-                    })) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+                    })) : ((0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                    (0, graphic_state_1.addGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
                 }));
             }
             this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), 
@@ -130,9 +132,11 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                     allLinkElements.forEach(((linkEl, i) => {
                         var _a;
                         const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl);
-                        highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                        linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
-                        linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+                        highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? ((0, 
+                        graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                        (0, graphic_state_1.addGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : ((0, 
+                        graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                        (0, graphic_state_1.addGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
                     }));
                 }
                 this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
@@ -155,18 +159,19 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                         highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
                         highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
                         const ratio = selectedDatum.reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
-                        return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                        return (0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
                         void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                             ratio: ratio
                         });
                     }
                     if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
                     highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    (0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
                     void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                         ratio: upSelectedLink.value / linkDatum.value
                     });
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+                    (0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                    (0, graphic_state_1.addGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
                 })), this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
             }
             this._needClear = !0;
@@ -176,9 +181,9 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             const allLinkElements = this._linkMark.getGraphics();
             if (!allLinkElements || !allLinkElements.length) return;
             if ("source" === ((0, util_2.getDatumOfGraphic)(graphic) ? "parents" : "source")) this._linkMark && allLinkElements.forEach((linkEl => {
-                linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                (0, graphic_state_1.removeGraphicState)(linkEl, [ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE ]);
             })), this._nodeMark && allNodeElements.forEach((el => {
-                el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                (0, graphic_state_1.removeGraphicState)(el, [ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE ]);
             })); else {
                 const curLinkDatum = (0, util_2.getDatumOfGraphic)(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
                 (0, vutils_1.array)(curLinkDatum.datum).forEach((dividedLink => {
@@ -197,7 +202,8 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                     }
                 })), allLinkElements.forEach((linkEl => {
                     const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl), originalDatum = linkDatum.datum;
-                    if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return (0, 
+                    graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
                     void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                         ratio: 1
                     });
@@ -212,7 +218,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                             var _a;
                             return par.key === curLinkDatum.source && (null === (_a = entry.parents[index + 1]) || void 0 === _a ? void 0 : _a.key) === curLinkDatum.target;
                         })))).reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
-                        return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                        return (0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
                         void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                             ratio: ratio
                         });
@@ -220,11 +226,12 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                     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), 
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    (0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
                     void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                         ratio: upSelectedLink.value / linkDatum.value
                     });
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+                    (0, graphic_state_1.removeGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                    (0, graphic_state_1.addGraphicState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
                 })), this._highLightElements(allNodeElements, highlightNodes);
             }
             this._needClear = !0;
@@ -252,7 +259,6 @@ class SankeySeries extends cartesian_1.CartesianSeries {
         this.setSeriesField(null !== (_a = this._spec.seriesField) && void 0 !== _a ? _a : this._spec.categoryField);
     }
     initData() {
-        var _a, _b, _c, _d;
         super.initData();
         const viewData = this.getViewData(), rawData = this.getRawData();
         if (rawData && viewData) {
@@ -262,38 +268,41 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                 type: "sankeyFormat"
             }, !1), viewData.transform({
                 type: "sankeyLayout",
-                options: {
-                    view: () => ({
-                        x0: this._viewBox.x1,
-                        x1: this._viewBox.x2,
-                        y0: this._viewBox.y1,
-                        y1: this._viewBox.y2
-                    }),
-                    sourceField: this._spec.sourceField,
-                    targetField: this._spec.targetField,
-                    valueField: this._spec.valueField,
-                    direction: this.direction,
-                    crossNodeAlign: this._spec.crossNodeAlign,
-                    nodeAlign: null !== (_a = this._spec.nodeAlign) && void 0 !== _a ? _a : "justify",
-                    nodeGap: null !== (_b = this._spec.nodeGap) && void 0 !== _b ? _b : 8,
-                    nodeWidth: null !== (_c = this._spec.nodeWidth) && void 0 !== _c ? _c : 10,
-                    linkWidth: this._spec.linkWidth,
-                    minStepWidth: this._spec.minStepWidth,
-                    minNodeHeight: null !== (_d = this._spec.minNodeHeight) && void 0 !== _d ? _d : 4,
-                    maxNodeHeight: this._spec.maxNodeHeight,
-                    minLinkHeight: this._spec.minLinkHeight,
-                    maxLinkHeight: this._spec.maxLinkHeight,
-                    iterations: this._spec.iterations,
-                    nodeKey: this._spec.nodeKey,
-                    linkSortBy: this._spec.linkSortBy,
-                    nodeSortBy: this._spec.nodeSortBy,
-                    setNodeLayer: this._spec.setNodeLayer,
-                    dropIsolatedNode: this._spec.dropIsolatedNode,
-                    nodeHeight: this._spec.nodeHeight,
-                    linkHeight: this._spec.linkHeight,
-                    equalNodeHeight: this._spec.equalNodeHeight,
-                    linkOverlap: this._spec.linkOverlap,
-                    inverse: this._spec.inverse
+                options: () => {
+                    var _a, _b, _c, _d;
+                    return {
+                        view: () => ({
+                            x0: this._viewBox.x1,
+                            x1: this._viewBox.x2,
+                            y0: this._viewBox.y1,
+                            y1: this._viewBox.y2
+                        }),
+                        sourceField: this._spec.sourceField,
+                        targetField: this._spec.targetField,
+                        valueField: this._spec.valueField,
+                        direction: this.direction,
+                        crossNodeAlign: this._spec.crossNodeAlign,
+                        nodeAlign: null !== (_a = this._spec.nodeAlign) && void 0 !== _a ? _a : "justify",
+                        nodeGap: null !== (_b = this._spec.nodeGap) && void 0 !== _b ? _b : 8,
+                        nodeWidth: null !== (_c = this._spec.nodeWidth) && void 0 !== _c ? _c : 10,
+                        linkWidth: this._spec.linkWidth,
+                        minStepWidth: this._spec.minStepWidth,
+                        minNodeHeight: null !== (_d = this._spec.minNodeHeight) && void 0 !== _d ? _d : 4,
+                        maxNodeHeight: this._spec.maxNodeHeight,
+                        minLinkHeight: this._spec.minLinkHeight,
+                        maxLinkHeight: this._spec.maxLinkHeight,
+                        iterations: this._spec.iterations,
+                        nodeKey: this._spec.nodeKey,
+                        linkSortBy: this._spec.linkSortBy,
+                        nodeSortBy: this._spec.nodeSortBy,
+                        setNodeLayer: this._spec.setNodeLayer,
+                        dropIsolatedNode: this._spec.dropIsolatedNode,
+                        nodeHeight: this._spec.nodeHeight,
+                        linkHeight: this._spec.linkHeight,
+                        equalNodeHeight: this._spec.equalNodeHeight,
+                        linkOverlap: this._spec.linkOverlap,
+                        inverse: this._spec.inverse
+                    };
                 },
                 level: initialize_1.TransformLevel.sankeyLayout
             });
@@ -476,8 +485,9 @@ class SankeySeries extends cartesian_1.CartesianSeries {
     }
     _highLightElements(graphics, highlightNodes) {
         graphics && graphics.length && graphics.forEach((g => {
-            g.removeState([ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS ]), 
-            highlightNodes.includes((0, util_2.getDatumOfGraphic)(g).key) ? g.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0) : g.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+            (0, graphic_state_1.removeGraphicState)(g, [ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS ]), 
+            highlightNodes.includes((0, util_2.getDatumOfGraphic)(g).key) ? (0, graphic_state_1.addGraphicState)(g, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0) : (0, 
+            graphic_state_1.addGraphicState)(g, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
         }));
     }
     initTooltip() {