@visactor/vchart 1.7.1-alpha.0 → 1.7.1

package/build/index.js

@@ -27528,6 +27528,20 @@
         const { x: x0, y: y0 } = point;
         return x0 < x + width && y0 < y + height && y0 > y && x0 > x;
     }
+    function isPointInTriangle(point, v1, v2, v3) {
+        const { x: x0, y: y0 } = point;
+        const { x: x1, y: y1 } = v1;
+        const { x: x2, y: y2 } = v2;
+        const { x: x3, y: y3 } = v3;
+        const divisor = (y2 - y3) * (x1 - x3) + (x3 - x2) * (y1 - y3);
+        if (!divisor) {
+            return false;
+        }
+        const a = ((y2 - y3) * (x0 - x3) + (x3 - x2) * (y0 - y3)) / divisor;
+        const b = ((y3 - y1) * (x0 - x3) + (x1 - x3) * (y0 - y3)) / divisor;
+        const c = 1 - a - b;
+        return a >= 0 && a <= 1 && b >= 0 && b <= 1 && c >= 0 && c <= 1;
+    }
     function isPercent(v) {
         if (!isString$1(v)) {
             return false;
@@ -28767,30 +28781,6 @@
       }), graphicAttributes[name] = storedAttrs, storedAttrs;
     }
     const transformsByType = {
-      [GrammarMarkType.largeRects]: [{
-        channels: ["x", "y", "y1", "x1", "width", "height"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          graphicAttributes.x = 0, graphicAttributes.y = 0;
-        }
-      }],
-      [GrammarMarkType.largeSymbols]: [{
-        channels: ["x", "y", "size"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          graphicAttributes.x = 0, graphicAttributes.y = 0;
-        }
-      }],
-      [GrammarMarkType.area]: [{
-        channels: ["x", "y", "x1", "y1"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          graphicAttributes.x = 0, graphicAttributes.y = 0, graphicAttributes.x1 = 0, graphicAttributes.y1 = 0;
-        }
-      }],
-      [GrammarMarkType.line]: [{
-        channels: ["x", "y", "defined"],
-        transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-          graphicAttributes.x = 0, graphicAttributes.y = 0;
-        }
-      }],
       [GrammarMarkType.rect]: [{
         channels: ["x", "y", "x1", "y1", "width", "height"],
         transform: (graphicAttributes, nextAttrs, storedAttrs) => {
@@ -28921,13 +28911,19 @@
           startIndex: index
         }));
       }), segments.length >= 2 ? segments.map(entry => {
-        const res = transformAttributes(GrammarMarkType.line, entry.attrs, element);
+        const res = transformAttributes(GrammarMarkType.line, parseCollectionMarkAttributes(entry.attrs), element);
         return res.points = points.slice(entry.startIndex, isNil$1(entry.endIndex) ? points.length : entry.endIndex), res;
       }) : null;
     }
     function getLinePointsFromSegments(segments) {
       return segments ? segments.reduce((points, segment) => points.concat(segment.points), []) : null;
     }
+    function parseCollectionMarkAttributes(itemNextAttrs) {
+      const result = {};
+      return itemNextAttrs ? (Object.keys(itemNextAttrs).forEach(key => {
+        "x" !== key && "y" !== key && "x1" !== key && "y1" !== key && "defined" !== key && "size" !== key && "width" !== key && "height" !== key && "context" !== key && (result[key] = itemNextAttrs[key]);
+      }), result) : result;
+    }
 
     let Element$1 = class Element {
       constructor(mark) {
@@ -29094,7 +29090,7 @@
             enableSegments = this.mark.getSpec().enableSegments,
             itemNextAttrs = items.map(item => item.nextAttrs),
             isProgressive = this.mark.isProgressive();
-          if (nextAttrs = Object.assign({}, nextAttrs), delete nextAttrs.x, delete nextAttrs.y, markType === GrammarMarkType.line || markType === GrammarMarkType.area) {
+          if (nextAttrs = parseCollectionMarkAttributes(nextAttrs), markType === GrammarMarkType.line || markType === GrammarMarkType.area) {
             const linePoints = getLinePoints(items, !0, lastPoints, markType === GrammarMarkType.area);
             if (enableSegments && !isProgressive) {
               const points = linePoints && 0 !== linePoints.length ? linePoints : getLinePointsFromSegments(lastSegments),
@@ -58630,7 +58626,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.7.1-alpha.0";
+    const version = "1.7.1";
 
     class ChartData {
         get dataList() {
@@ -59224,7 +59220,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._event = new Event$1(option.eventDispatcher, option.mode);
             this._dataSet = option.dataSet;
             this._chartData = new ChartData(this._dataSet, (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError);
-            this._modelOption = Object.assign(Object.assign({}, option), { mode: this._option.mode, map: this._idMap, getChartLayoutRect: () => this._layoutRect, getChartViewRect: () => this._viewRect, getChart: () => this, globalScale: this._globalScale, onError: (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError });
+            this._modelOption = Object.assign(Object.assign({}, option), { mode: this._option.mode, map: this._idMap, getChartLayoutRect: () => this._layoutRect, getChartViewRect: () => this._viewRect, getChart: () => this, globalScale: this._globalScale, onError: (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError, getSeriesData: this._chartData.getSeriesData.bind(this._chartData) });
             this._spec = spec;
         }
         created() {
@@ -59302,11 +59298,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         _createSeries(seriesSpec) {
-            seriesSpec.forEach((_spec, index) => {
-                const spec = Object.assign({}, _spec);
-                if (!spec.data) {
-                    spec.data = this._chartData.getSeriesData(spec.dataId, spec.dataIndex);
-                }
+            seriesSpec.forEach((spec, index) => {
                 if (this._option.animation === false) {
                     spec.animation = false;
                 }
@@ -59323,7 +59315,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!region) {
                     return;
                 }
-                const series = Factory.createSeries(spec.type, spec, Object.assign(Object.assign({}, this._modelOption), { region, specIndex: index, globalScale: this._globalScale, getSeriesData: this._chartData.getSeriesData.bind(this._chartData), sourceDataList: this._chartData.dataList }));
+                const series = Factory.createSeries(spec.type, spec, Object.assign(Object.assign({}, this._modelOption), { region, specIndex: index, globalScale: this._globalScale, sourceDataList: this._chartData.dataList }));
                 if (series) {
                     series.created();
                     this._series.push(series);
@@ -61091,13 +61083,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initData() {
-            var _a, _b, _c, _d;
-            if (this._spec.data) {
-                this._rawData = dataToDataView(this._spec.data, this._dataSet, this._option.sourceDataList, {
-                    onError: (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError
+            var _a, _b, _c, _d, _e;
+            const d = (_a = this._spec.data) !== null && _a !== void 0 ? _a : this._option.getSeriesData(this._spec.dataId, this._spec.dataIndex);
+            if (d) {
+                this._rawData = dataToDataView(d, this._dataSet, this._option.sourceDataList, {
+                    onError: (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError
                 });
             }
-            (_b = this._rawData) === null || _b === void 0 ? void 0 : _b.target.addListener('change', this.rawDataUpdate.bind(this));
+            (_c = this._rawData) === null || _c === void 0 ? void 0 : _c.target.addListener('change', this.rawDataUpdate.bind(this));
             this._addDataIndexAndKey();
             if (this._rawData) {
                 if (this._stack) {
@@ -61113,9 +61106,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._viewDataFilter.target.removeListener('change', viewData.reRunAllTransform);
                 }
             }
-            if (this._invalidType === 'zero' && ((_c = this._rawData) === null || _c === void 0 ? void 0 : _c.dataSet)) {
+            if (this._invalidType === 'zero' && ((_d = this._rawData) === null || _d === void 0 ? void 0 : _d.dataSet)) {
                 registerDataSetInstanceTransform(this._rawData.dataSet, 'invalidTravel', invalidTravel);
-                (_d = this._rawData) === null || _d === void 0 ? void 0 : _d.transform({
+                (_e = this._rawData) === null || _e === void 0 ? void 0 : _e.transform({
                     type: 'invalidTravel',
                     options: {
                         config: () => {
@@ -61361,7 +61354,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
             else if (!parentMark && (!isNil$1(spec.dataId) || !isNil$1(spec.dataIndex))) {
-                const dataView = this._option.getSeriesData(spec.id, spec.dataIndex);
+                const dataView = this._option.getSeriesData(spec.dataId, spec.dataIndex);
                 if (dataView === this._rawData) {
                     mark.setDataView(this.getViewData(), this.getViewDataProductId());
                 }
@@ -66324,6 +66317,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 y: (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.centerY) !== null && _d !== void 0 ? _d : this._region.getLayoutRect().height / 2
             };
         }
+        _buildMarkAttributeContext() {
+            super._buildMarkAttributeContext();
+            this._markAttributeContext.getCenter = () => {
+                return {
+                    x: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2; },
+                    y: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().height / 2; }
+                };
+            };
+        }
         setAttrFromSpec() {
             var _a, _b, _c, _d, _e, _f, _g;
             super.setAttrFromSpec();
@@ -68539,9 +68541,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _createSeries(seriesSpec) {
             seriesSpec.forEach((spec, index) => {
-                if (!spec.data) {
-                    spec.data = this._chartData.getSeriesData(spec.dataId, spec.dataIndex);
-                }
                 if (spec.type === exports.SeriesTypeEnum.link) {
                     spec.dotSeriesSpec = this._spec.series[spec.dotSeriesIndex];
                 }
@@ -77593,10 +77592,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           nodeMap: nodeMap
         };
       }
-      computeNodeLinks(data) {
-        if (!("links" in data)) return this._isHierarchic = !0, this.computeHierarchicNodeLinks(data.nodes);
-        let nodes = [];
-        const links = [],
+      computeSourceTargetNodeLinks(data) {
+        const nodes = [],
+          links = [],
           nodeMap = {};
         data.nodes && data.nodes.forEach((node, index) => {
           const nodeElement = {
@@ -77611,7 +77609,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           nodeMap[nodeElement.key] = nodeElement, nodes.push(nodeElement);
         });
         const invalidLinks = [];
-        if (data.links.forEach((link, index) => {
+        return data.links.forEach((link, index) => {
           if (isNil$1(link.source) || isNil$1(link.target)) return;
           if (data.nodes && (!nodeMap[link.source] || !nodeMap[link.target])) return;
           data.nodes || nodeMap[link.source] || (nodeMap[link.source] = {
@@ -77642,11 +77640,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }), this.options.divideNodeValueToLink && invalidLinks.length && invalidLinks.forEach(link => {
           const values = [calcDivideValue(nodeMap[link.source]), calcDivideValue(nodeMap[link.target], !0)].filter(entry => !isNil$1(entry));
           values.length && (link.value = minInArray(values));
-        }), this.options.linkSortBy) for (let i = 0, len = nodes.length; i < len; i++) nodes[i].sourceLinks.sort(this.options.linkSortBy), nodes[i].targetLinks.sort(this.options.linkSortBy);
+        }), {
+          nodeMap: nodeMap,
+          nodes: nodes,
+          links: links
+        };
+      }
+      computeNodeLinks(data) {
+        let res;
+        "links" in data ? res = this.computeSourceTargetNodeLinks(data) : (this._isHierarchic = !0, res = this.computeHierarchicNodeLinks(data.nodes));
+        let nodes = res.nodes;
+        const links = res.links;
+        if (this.options.linkSortBy) for (let i = 0, len = nodes.length; i < len; i++) nodes[i].sourceLinks.sort(this.options.linkSortBy), nodes[i].targetLinks.sort(this.options.linkSortBy);
         return this.options.dropIsolatedNode && (nodes = nodes.filter(node => node.targetLinks.length || node.sourceLinks.length)), {
           nodes: nodes,
           links: links,
-          nodeMap: nodeMap
+          nodeMap: res.nodeMap
         };
       }
       computeNodeValues(nodes) {
@@ -81278,10 +81287,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const axisComponent = product.getGroupGraphicItem();
                 const spec = mergeSpec(Object.assign({}, this.getLayoutStartPoint()), this._axisStyle, attrs, { line: { visible: false } });
                 const updateBounds = axisComponent.getBoundsWithoutRender(spec);
+                hasBounds = true;
+                this._latestBounds = updateBounds;
                 if (isFinite(updateBounds.width())) {
                     result = this._appendAxisUnit(updateBounds, isX);
-                    hasBounds = true;
-                    this._latestBounds = updateBounds;
                 }
             }
             if (!hasBounds) {
@@ -84031,8 +84040,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 let changePositionOnly = !!params.changePositionOnly;
                 if (!params.changePositionOnly || ((_a = this._cacheActualTooltip) === null || _a === void 0 ? void 0 : _a.activeType) !== activeType) {
                     changePositionOnly = false;
-                    this._cacheViewSpec = undefined;
-                    this._cacheActualTooltip = undefined;
+                    this._clearCacheOfContent();
                 }
                 if (changePositionOnly && this._cacheViewSpec && this._cacheActualTooltip) {
                     return this.changeTooltipPosition(changePositionOnly, data, params);
@@ -84046,8 +84054,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     return TooltipResult.failed;
                 }
                 if (!visible) {
-                    this._cacheViewSpec = undefined;
-                    this._cacheActualTooltip = undefined;
+                    this._clearAllCache();
                     if (tooltipSpec.handler) {
                         return (_c = (_b = (_a = tooltipSpec.handler).hideTooltip) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : TooltipResult.success;
                     }
@@ -84101,6 +84108,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!spec || !actualTooltip) {
                     return TooltipResult.failed;
                 }
+                if (spec.enterable) {
+                    if (!this._isPointerEscaped && this._isPointerMovingToTooltip(params)) {
+                        if (!this._isTooltipPaused) {
+                            this._isTooltipPaused = true;
+                            this._cachePointerTimer = setTimeout(() => {
+                                this._isPointerEscaped = true;
+                            }, 300);
+                        }
+                        return TooltipResult.success;
+                    }
+                    this._isTooltipPaused = false;
+                    this._isPointerEscaped = false;
+                    clearTimeout(this._cachePointerTimer);
+                    this._cachePointerPosition = this._getPointerPositionRelativeToTooltipParent(params);
+                }
                 const activeType = actualTooltip.activeType;
                 if (spec.handler) {
                     return (_c = (_b = (_a = spec.handler).showTooltip) === null || _b === void 0 ? void 0 : _b.call(_a, activeType, data, params)) !== null && _c !== void 0 ? _c : TooltipResult.success;
@@ -84141,6 +84163,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const { offsetX, offsetY } = this._option;
                 const tooltipSpec = this._cacheViewSpec;
                 if (!tooltipSpec) {
+                    this._cacheTooltipPosition = undefined;
                     return invalidPosition;
                 }
                 const { activeType, data } = actualTooltip;
@@ -84407,7 +84430,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         detectTopLast();
                         break;
                 }
-                return { x, y };
+                const result = { x, y };
+                this._cacheTooltipPosition = result;
+                this._cacheTooltipSize = { width: tooltipBoxWidth, height: tooltipBoxHeight };
+                return result;
             };
             this._component = component;
             this._chartOption = component.getOption();
@@ -84422,8 +84448,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         release() {
             var _a, _b, _c;
-            this._cacheViewSpec = undefined;
-            this._cacheActualTooltip = undefined;
+            this._clearAllCache();
             const spec = (_a = this._component.getSpec()) !== null && _a !== void 0 ? _a : {};
             if (spec.handler) {
                 (_c = (_b = spec.handler).release) === null || _c === void 0 ? void 0 : _c.call(_b);
@@ -84432,6 +84457,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._removeTooltip();
             this._isReleased = true;
         }
+        _clearAllCache() {
+            this._clearCacheOfContent();
+            this._clearCacheOfPosition();
+        }
+        _clearCacheOfContent() {
+            this._cacheViewSpec = undefined;
+            this._cacheActualTooltip = undefined;
+        }
+        _clearCacheOfPosition() {
+            this._isTooltipPaused = false;
+            this._isPointerEscaped = false;
+            clearTimeout(this._cachePointerTimer);
+            this._cachePointerTimer = -1;
+            this._cachePointerPosition = undefined;
+            this._cacheTooltipPosition = undefined;
+            this._cacheTooltipSize = undefined;
+        }
         _throttle(callback) {
             const tooltipSpec = this._component.getSpec();
             let wait;
@@ -84464,6 +84506,68 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 height: (_f = (_e = this._attributes) === null || _e === void 0 ? void 0 : _e.panel) === null || _f === void 0 ? void 0 : _f.height
             };
         }
+        _getPointerPositionRelativeToTooltipParent(params) {
+            var _a, _b;
+            let { canvasX: x, canvasY: y } = params.event;
+            const invalidPosition = {
+                x: Infinity,
+                y: Infinity
+            };
+            const tooltipSpec = this._cacheViewSpec;
+            const isCanvas = tooltipSpec.renderMode === 'canvas';
+            const tooltipParentElement = this._getParentElement(tooltipSpec);
+            let relativePosOffset = { x: 0, y: 0 };
+            let tooltipParentElementRect = { x: 0, y: 0 };
+            let chartElementScale = 1;
+            let tooltipParentElementScale = 1;
+            if (isTrueBrowser(this._env) && !tooltipSpec.confine) {
+                if (!isCanvas) {
+                    tooltipParentElementRect = (_a = tooltipParentElement === null || tooltipParentElement === void 0 ? void 0 : tooltipParentElement.getBoundingClientRect()) !== null && _a !== void 0 ? _a : invalidPosition;
+                    const chartElement = ((_b = this._compiler.getCanvas()) !== null && _b !== void 0 ? _b : this._chartContainer);
+                    const chartElementRect = chartElement === null || chartElement === void 0 ? void 0 : chartElement.getBoundingClientRect();
+                    relativePosOffset = {
+                        x: chartElementRect.x - tooltipParentElementRect.x,
+                        y: chartElementRect.y - tooltipParentElementRect.y
+                    };
+                    chartElementScale = getScale(chartElement, chartElementRect);
+                    tooltipParentElementScale = getScale(tooltipParentElement, tooltipParentElementRect);
+                }
+            }
+            x *= chartElementScale;
+            y *= chartElementScale;
+            if (isTrueBrowser(this._env)) {
+                x += relativePosOffset.x;
+                y += relativePosOffset.y;
+            }
+            x /= tooltipParentElementScale;
+            y /= tooltipParentElementScale;
+            return { x, y };
+        }
+        _isPointerMovingToTooltip(params) {
+            if (!this._cacheTooltipPosition || !this._cacheTooltipSize || !this._cachePointerPosition) {
+                return false;
+            }
+            const { width: tooltipWidth, height: tooltipHeight } = this._cacheTooltipSize;
+            const { x: tooltipX = 0, y: tooltipY } = this._cacheTooltipPosition;
+            const pos = this._getPointerPositionRelativeToTooltipParent(params);
+            if (isPointInRect(pos, {
+                x: tooltipX,
+                y: tooltipY,
+                width: tooltipWidth,
+                height: tooltipHeight
+            })) {
+                return true;
+            }
+            const a = { x: tooltipX, y: tooltipY };
+            const b = { x: a.x + tooltipWidth, y: a.y };
+            const c = { x: a.x, y: a.y + tooltipHeight };
+            const d = { x: b.x, y: c.y };
+            const oldPos = this._cachePointerPosition;
+            return (isPointInTriangle(pos, oldPos, a, b) ||
+                isPointInTriangle(pos, oldPos, c, d) ||
+                isPointInTriangle(pos, oldPos, a, d) ||
+                isPointInTriangle(pos, oldPos, b, c));
+        }
         _getParentElement(spec) {
             return spec.parentElement;
         }
@@ -86239,19 +86343,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b;
             if (this._spec.enterable && this._spec.renderMode === 'html') {
                 const { event } = params;
-                let target;
+                let newTarget;
                 if (isValid$1(event.nativeEvent)) {
                     const nativeEvent = event.nativeEvent;
-                    target = nativeEvent.target;
+                    newTarget = nativeEvent.relatedTarget;
                     if (nativeEvent.composedPath && nativeEvent.composedPath().length > 0) {
-                        target = nativeEvent.composedPath()[0];
+                        newTarget = nativeEvent.composedPath()[0];
                     }
                 }
                 else {
-                    target = event.target;
+                    newTarget = event.relatedTarget;
                 }
                 const container = (_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.getTooltipContainer) === null || _b === void 0 ? void 0 : _b.call(_a);
-                if (isValid$1(container) && isValid$1(target) && hasParentElement(target, container)) {
+                if (isValid$1(container) && isValid$1(newTarget) && hasParentElement(newTarget, container)) {
                     return true;
                 }
             }