@visactor/vchart 1.1.0-beta.6 → 1.1.0-beta.7

package/build/index.js

@@ -5641,25 +5641,6 @@
         y: actualTop
       };
     }
-    const getScrollLeft = element => {
-        var _a, _b, _c;
-        return element === (null === (_a = null === globalThis || void 0 === globalThis ? void 0 : globalThis.document) || void 0 === _a ? void 0 : _a.body) ? (null === (_c = null === (_b = null === globalThis || void 0 === globalThis ? void 0 : globalThis.document) || void 0 === _b ? void 0 : _b.documentElement) || void 0 === _c ? void 0 : _c.scrollLeft) || element.scrollLeft : "html" === element.tagName.toLowerCase() ? 0 : element.scrollLeft;
-      },
-      getScrollTop = element => {
-        var _a, _b, _c;
-        return element === (null === (_a = null === globalThis || void 0 === globalThis ? void 0 : globalThis.document) || void 0 === _a ? void 0 : _a.body) ? (null === (_c = null === (_b = null === globalThis || void 0 === globalThis ? void 0 : globalThis.document) || void 0 === _b ? void 0 : _b.documentElement) || void 0 === _c ? void 0 : _c.scrollTop) || element.scrollTop : "html" === element.tagName.toLowerCase() ? 0 : element.scrollTop;
-      };
-    function getElementAbsoluteScrollOffset(element) {
-      let actualLeft = getScrollLeft(element),
-        current = element.parentElement;
-      for (; current;) actualLeft += getScrollLeft(current), current = current.parentElement;
-      let actualTop = getScrollTop(element);
-      for (current = element.parentElement; current;) actualTop += getScrollTop(current), current = current.parentElement;
-      return {
-        x: actualLeft,
-        y: actualTop
-      };
-    }
     function hasParentElement(element, target) {
       let parent = element.parentNode;
       for (; null !== parent;) {
@@ -47972,11 +47953,12 @@
         AttributeLevel[AttributeLevel["Default"] = 0] = "Default";
         AttributeLevel[AttributeLevel["Theme"] = 1] = "Theme";
         AttributeLevel[AttributeLevel["Chart"] = 2] = "Chart";
-        AttributeLevel[AttributeLevel["Series"] = 3] = "Series";
-        AttributeLevel[AttributeLevel["Mark"] = 4] = "Mark";
-        AttributeLevel[AttributeLevel["User_Chart"] = 5] = "User_Chart";
-        AttributeLevel[AttributeLevel["User_Series"] = 6] = "User_Series";
-        AttributeLevel[AttributeLevel["User_Mark"] = 7] = "User_Mark";
+        AttributeLevel[AttributeLevel["Base_Series"] = 3] = "Base_Series";
+        AttributeLevel[AttributeLevel["Series"] = 4] = "Series";
+        AttributeLevel[AttributeLevel["Mark"] = 5] = "Mark";
+        AttributeLevel[AttributeLevel["User_Chart"] = 6] = "User_Chart";
+        AttributeLevel[AttributeLevel["User_Series"] = 7] = "User_Series";
+        AttributeLevel[AttributeLevel["User_Mark"] = 8] = "User_Mark";
         AttributeLevel[AttributeLevel["Built_In"] = 99] = "Built_In";
     })(AttributeLevel || (AttributeLevel = {}));
     const STACK_FIELD_START = `${PREFIX}_STACK_START`;
@@ -51525,6 +51507,32 @@
         setDimensionIndex(value, opt = {}) {
             return this._chart?.setDimensionIndex(value, opt);
         }
+        convertDatumToPosition(datum, dataLinkInfo = {}) {
+            if (!this._chart) {
+                return null;
+            }
+            if (isEmpty(datum)) {
+                return null;
+            }
+            const { seriesId, seriesIndex = 0 } = dataLinkInfo;
+            let series;
+            if (isValid(seriesId)) {
+                series = this._chart.getSeriesInUserId(seriesId);
+            }
+            else if (isValid(seriesIndex)) {
+                series = this._chart.getSeriesInIndex([seriesIndex])?.[0];
+            }
+            if (series) {
+                const keys = Object.keys(datum);
+                const handledDatum = series
+                    .getViewData()
+                    .latestData.find((viewDatum) => keys.every(k => viewDatum[k] == datum[k]));
+                if (handledDatum) {
+                    return series.dataToPosition(handledDatum);
+                }
+            }
+            return null;
+        }
     }
 
     var STATE_VALUE_ENUM;
@@ -54154,7 +54162,7 @@
     VChart.useMark([ComponentMark, GroupMark]);
     Factory.registerRegion('region', Region);
     Factory.registerLayout('base', Layout);
-    const version = "1.1.0-beta.6";
+    const version = "1.1.0-beta.7";
 
     var SeriesMarkNameEnum;
     (function (SeriesMarkNameEnum) {
@@ -55540,7 +55548,7 @@
             if (!dimensionInfo) {
                 return;
             }
-            if (opt.tooltip) {
+            if (opt.tooltip !== false) {
                 const tooltip = this._components.find(c => c.type === ComponentTypeEnum.tooltip);
                 if (tooltip.getVisible()) {
                     const dataFilter = {};
@@ -55559,7 +55567,7 @@
                     tooltip.showTooltip(dataFilter, opt.showTooltipOption);
                 }
             }
-            if (opt.crosshair) {
+            if (opt.crosshair !== false) {
                 const crosshair = this._components.find(c => c.type === ComponentTypeEnum.cartesianCrosshair);
                 if (crosshair && crosshair.clearAxisValue && crosshair.setAxisValue) {
                     dimensionInfo.forEach((d) => {
@@ -57303,8 +57311,8 @@
             this._rawDataStatistics?.reRunAllTransform();
             this.setSeriesField(this._spec.seriesField);
             this.getMarks().forEach(m => {
-                if (m.stateStyle.normal?.fill?.style) {
-                    m.setAttribute('stroke', m.stateStyle.normal.fill.style, 'normal', AttributeLevel.Chart);
+                if (m.stateStyle?.normal?.lineWidth) {
+                    m.setAttribute('stroke', this.getColorAttribute(), 'normal', AttributeLevel.Base_Series);
                 }
             });
         }
@@ -63370,6 +63378,7 @@
         _getDefaultStyle() {
             const defaultStyle = {
                 ...super._getDefaultStyle(),
+                lineWidth: 0,
                 path: ''
             };
             return defaultStyle;
@@ -69352,6 +69361,13 @@
     class PolygonMark extends BasePolygonMark {
         static type = MarkTypeEnum.polygon;
         type = PolygonMark.type;
+        _getDefaultStyle() {
+            const defaultStyle = {
+                ...super._getDefaultStyle(),
+                lineWidth: 0
+            };
+            return defaultStyle;
+        }
     }
 
     VChart.useMark([PolygonMark, TextMark, RuleMark]);
@@ -80524,6 +80540,7 @@
             const originData = (this._legendData.getLatestData() || []).map((datum) => {
                 const fill = datum.style('fill');
                 const stroke = datum.style('stroke');
+                const lineWidth = datum.style('lineWidth');
                 const symbolType = datum.style('symbolType');
                 const fillOpacity = datum.style('fillOpacity');
                 const strokeOpacity = datum.style('strokeOpacity');
@@ -80537,7 +80554,7 @@
                     shape: {
                         fill,
                         symbolType: symbolType ?? datum.shapeType ?? 'circle',
-                        stroke: fill === stroke ? null : stroke,
+                        stroke: lineWidth === 0 || fill === stroke ? null : stroke,
                         fillOpacity: isValidNumber(fillOpacity) ? fillOpacity : 1,
                         strokeOpacity: isValidNumber(strokeOpacity) ? strokeOpacity : 1,
                         opacity: isValidNumber(opacity) ? opacity : 1,
@@ -84537,7 +84554,7 @@
             };
             return actualTooltip;
         };
-        _getActualTooltipPosition = (actualTooltip, position, params, parentElement, changePositionOnly) => {
+        _getActualTooltipPosition = (actualTooltip, position, params, tooltipParentElement, changePositionOnly) => {
             const event = params.event;
             const { width: tooltipBoxWidth = 0, height: tooltipBoxHeight = 0 } = this._getTooltipBoxSize(actualTooltip, changePositionOnly) ?? {};
             const { offsetX, offsetY } = this._option;
@@ -84546,6 +84563,7 @@
             const canvasRect = params?.chart?.getCanvasRect();
             const canvasWidth = canvasRect?.width ?? DEFAULT_CHART_WIDTH;
             const canvasHeight = canvasRect?.height ?? DEFAULT_CHART_HEIGHT;
+            let isFixedPosition = false;
             let left;
             let top;
             let right;
@@ -84558,6 +84576,7 @@
                 bottom = getActualTooltipPositionValue(posBottom, event);
             }
             else if (isValid(position) && actualTooltip.activeType === 'mark') {
+                isFixedPosition = true;
                 const element = params.item;
                 const model = params.model;
                 const bounds = element?.getBounds();
@@ -84598,28 +84617,24 @@
                 width: 0,
                 height: 0
             };
-            const getDefaultOffest = () => ({ x: 0, y: 0 });
-            let absolutePosOffset = getDefaultOffest();
-            let scrollOffset = getDefaultOffest();
-            let parentElementScrollOffset = getDefaultOffest();
-            let parentElementPosOffset = getDefaultOffest();
+            const getDefaultPointValue = (defaultValue = 0) => ({ x: defaultValue, y: defaultValue });
+            let relativePosOffset = getDefaultPointValue();
+            let tooltipParentElementPos = getDefaultPointValue();
+            let chartElementScale = 1;
+            let tooltipParentElementScale = 1;
             if (isTrueBrowser(this._env) && !tooltipSpec.confine) {
                 containerSize.width = window.innerWidth;
                 containerSize.height = window.innerHeight;
                 if (!isCanvas) {
-                    const chartRenderer = (this._compiler.getCanvas() ?? this._chartContainer);
-                    parentElementPosOffset = getElementAbsolutePosition(parentElement);
-                    parentElementScrollOffset = getElementAbsoluteScrollOffset(parentElement);
-                    const chartPosOffset = getElementAbsolutePosition(chartRenderer);
-                    const chartScrollOffset = getElementAbsoluteScrollOffset(chartRenderer);
-                    absolutePosOffset = {
-                        x: chartPosOffset.x - parentElementPosOffset.x,
-                        y: chartPosOffset.y - parentElementPosOffset.y
-                    };
-                    scrollOffset = {
-                        x: chartScrollOffset.x - parentElementScrollOffset.x,
-                        y: chartScrollOffset.y - parentElementScrollOffset.y
+                    const chartElement = (this._compiler.getCanvas() ?? this._chartContainer);
+                    tooltipParentElementPos = tooltipParentElement.getBoundingClientRect();
+                    const chartPosOffset = chartElement.getBoundingClientRect();
+                    relativePosOffset = {
+                        x: chartPosOffset.x - tooltipParentElementPos.x,
+                        y: chartPosOffset.y - tooltipParentElementPos.y
                     };
+                    chartElementScale = getScale(chartElement);
+                    tooltipParentElementScale = getScale(tooltipParentElement);
                 }
             }
             else {
@@ -84634,7 +84649,7 @@
                 x = canvasWidth - tooltipBoxWidth - right;
             }
             else {
-                x = canvasX - scrollOffset.x + offsetX;
+                x = canvasX + offsetX;
             }
             if (isValidNumber(top)) {
                 y = top;
@@ -84643,28 +84658,38 @@
                 y = canvasHeight - tooltipBoxHeight - bottom;
             }
             else {
-                y = canvasY - scrollOffset.y + offsetY;
+                y = canvasY + offsetY;
             }
+            x *= chartElementScale;
+            y *= chartElementScale;
             if (isTrueBrowser(this._env)) {
-                x += absolutePosOffset.x;
-                y += absolutePosOffset.y;
+                x += relativePosOffset.x;
+                y += relativePosOffset.y;
             }
+            x /= tooltipParentElementScale;
+            y /= tooltipParentElementScale;
             const { width: containerWidth, height: containerHeight } = containerSize;
-            const parentElementTotalOffset = {
-                x: parentElementPosOffset.x - parentElementScrollOffset.x,
-                y: parentElementPosOffset.y - parentElementScrollOffset.y
-            };
-            if (x + tooltipBoxWidth + parentElementTotalOffset.x > containerWidth) {
-                x -= offsetX * 2 + tooltipBoxWidth;
+            if ((x + tooltipBoxWidth) * tooltipParentElementScale + tooltipParentElementPos.x > containerWidth) {
+                if (isFixedPosition) {
+                    x = (containerWidth - tooltipParentElementPos.x) / tooltipParentElementScale - tooltipBoxWidth;
+                }
+                else {
+                    x -= offsetX * 2 + tooltipBoxWidth;
+                }
             }
-            if (y + tooltipBoxHeight + parentElementTotalOffset.y > containerHeight) {
-                y -= offsetY * 2 + tooltipBoxHeight;
+            if ((y + tooltipBoxHeight) * tooltipParentElementScale + tooltipParentElementPos.y > containerHeight) {
+                if (isFixedPosition) {
+                    y = (containerHeight - tooltipParentElementPos.y) / tooltipParentElementScale - tooltipBoxHeight;
+                }
+                else {
+                    y -= offsetY * 2 + tooltipBoxHeight;
+                }
             }
-            if (x + parentElementTotalOffset.x < 0) {
-                x = 0 - parentElementTotalOffset.x;
+            if (x * tooltipParentElementScale + tooltipParentElementPos.x < 0) {
+                x = 0 - tooltipParentElementPos.x / tooltipParentElementScale;
             }
-            if (y + parentElementTotalOffset.y < 0) {
-                y = 0 - parentElementTotalOffset.y;
+            if (y * tooltipParentElementScale + tooltipParentElementPos.y < 0) {
+                y = 0 - tooltipParentElementPos.y / tooltipParentElementScale;
             }
             return { x, y };
         };
@@ -84735,6 +84760,12 @@
             this._initFromSpec();
         }
     }
+    const getScale = (element) => {
+        if (element.offsetWidth > 0) {
+            return element.getBoundingClientRect().width / element.offsetWidth;
+        }
+        return element.getBoundingClientRect().height / element.offsetHeight;
+    };
 
     const DEFAULT_SHAPE_SPACING = 8;
     const DEFAULT_KEY_SPACING = 26;
@@ -86013,7 +86044,12 @@
                 };
             }
             if (isValid(userSpec.parentElement)) {
-                this._spec.parentElement = userSpec.parentElement;
+                if (isString(userSpec.parentElement)) {
+                    this._spec.parentElement = globalThis.document?.getElementById(userSpec.parentElement);
+                }
+                else {
+                    this._spec.parentElement = userSpec.parentElement;
+                }
             }
             else if (isTrueBrowser(this._option.mode)) {
                 this._spec.parentElement = domDocument?.body;
@@ -86075,16 +86111,9 @@
                 return false;
             }
             const { x, y } = point;
-            const container = globalInstance.getContainer();
-            const { x: chartX, y: chartY } = getElementAbsolutePosition(container);
-            const { x: scrollOffsetX, y: scrollOffsetY } = getElementAbsoluteScrollOffset(container);
-            const canvasRect = chart.getCanvasRect();
-            const chartWidth = canvasRect?.width;
-            const chartHeight = canvasRect?.height;
-            if (x >= chartX - scrollOffsetX &&
-                x <= chartX + chartWidth - scrollOffsetX &&
-                y >= chartY - scrollOffsetY &&
-                y <= chartY + chartHeight - scrollOffsetY) {
+            const canvas = globalInstance.getCanvas();
+            const { x: chartX, y: chartY, width: chartWidth, height: chartHeight } = canvas.getBoundingClientRect();
+            if (x >= chartX && x <= chartX + chartWidth && y >= chartY && y <= chartY + chartHeight) {
                 return true;
             }
             return false;