@visactor/vrender-components 0.20.9-alpha.2 → 0.21.0-alpha.1

package/dist/index.es.js

@@ -2318,8 +2318,14 @@ function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter)
   return needTestLetter && (index = testLetter(desc, index)), index;
 }
 function testLetter(string, index) {
+  let negativeWrongMatch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
   let i = index;
-  for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return index;
+  for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return negativeWrongMatch ? testLetter2(string, index) : index;
+  return i;
+}
+function testLetter2(string, index) {
+  let i = index;
+  for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i++, i >= string.length) return i;
   return i;
 }
 function measureTextCanvas(text, character) {
@@ -2417,7 +2423,7 @@ let ATextMeasure = class {
       width: length
     };
   }
-  clipText(text, options, width, wordBreak) {
+  clipText(text, options, width, wordBreak, keepAllBreak) {
     if (0 === text.length) return {
       str: "",
       width: 0
@@ -2433,8 +2439,8 @@ let ATextMeasure = class {
     };
     const data = this._clipText(text, options, width, 0, text.length - 1, "end", !1);
     if (wordBreak && data.str !== text) {
-      const index = testLetter(text, data.str.length);
-      index !== data.str.length && (data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
+      let index = testLetter(text, data.str.length, keepAllBreak);
+      index !== data.str.length && (index > data.str.length && (data.wordBreaked = index, index = data.str.length), data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
     }
     return data;
   }
@@ -5824,7 +5830,7 @@ function drawPathProxy(graphic, context, x, y, drawContext, params, fillCb, stro
   const path = "function" == typeof graphic.pathProxy ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
   return renderCommandList(path.commandList, context, x, y), context.setShadowBlendStyle && context.setShadowBlendStyle(graphic, graphic.attribute, themeAttributes), doStroke && (strokeCb ? strokeCb(context, graphic.attribute, themeAttributes) : sVisible && (context.setStrokeStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.stroke())), doFill && (fillCb ? fillCb(context, graphic.attribute, themeAttributes) : fVisible && (context.setCommonStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.fill())), !0;
 }
-function intersect$2(x0, y0, x1, y1, x2, y2, x3, y3) {
+function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
   const x10 = x1 - x0,
     y10 = y1 - y0,
     x32 = x3 - x2,
@@ -5893,7 +5899,7 @@ function calculateArcCornerRadius(arc, startAngle, endAngle, innerRadius, outerR
     yire = innerRadius * sin(innerEndAngle);
   let xore, yore, xirs, yirs;
   if ((maxInnerCornerRadius > epsilon || maxOuterCornerRadius > epsilon) && (xore = outerRadius * cos(outerEndAngle), yore = outerRadius * sin(outerEndAngle), xirs = innerRadius * cos(innerStartAngle), yirs = innerRadius * sin(innerStartAngle), deltaAngle < pi)) {
-    const oc = intersect$2(xors, yors, xirs, yirs, xore, yore, xire, yire);
+    const oc = intersect(xors, yors, xirs, yirs, xore, yore, xire, yire);
     if (oc) {
       const ax = xors - oc[0],
         ay = yors - oc[1],
@@ -6252,7 +6258,8 @@ let DefaultGraphicService = class {
       onAddIncremental: new SyncHook(["graphic", "group", "stage"]),
       onClearIncremental: new SyncHook(["graphic", "group", "stage"]),
       beforeUpdateAABBBounds: new SyncHook(["graphic", "stage", "willUpdate", "aabbBounds"]),
-      afterUpdateAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds", "globalAABBBounds", "selfChange"])
+      afterUpdateAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds", "globalAABBBounds", "selfChange"]),
+      clearAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds"])
     }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds();
   }
   onAttributeUpdate(graphic) {
@@ -6279,6 +6286,9 @@ let DefaultGraphicService = class {
   afterUpdateAABBBounds(graphic, stage, bounds, params, selfChange) {
     this.hooks.afterUpdateAABBBounds.taps.length && this.hooks.afterUpdateAABBBounds.call(graphic, stage, bounds, params, selfChange);
   }
+  clearAABBBounds(graphic, stage, b) {
+    this.hooks.clearAABBBounds.taps.length && this.hooks.clearAABBBounds.call(graphic, stage, b);
+  }
   updatePathProxyAABBBounds(aabbBounds, graphic) {
     const path = "function" == typeof graphic.pathProxy ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
     if (!path) return !1;
@@ -6341,12 +6351,11 @@ let DefaultGraphicService = class {
   validCheck(attribute, theme, aabbBounds, graphic) {
     if (!graphic) return !0;
     if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
-    if (graphic.shadowRoot) return !0;
-    if (!graphic.valid) return aabbBounds.clear(), !1;
+    if (graphic.shadowRoot || graphic.isContainer) return !0;
     const {
       visible = theme.visible
     } = attribute;
-    return !!visible || (aabbBounds.clear(), !1);
+    return !(!graphic.valid || !visible) || (aabbBounds.empty() || (graphic.parent && aabbBounds.transformWithMatrix(graphic.parent.globalTransMatrix), application.graphicService.clearAABBBounds(graphic, graphic.stage, aabbBounds), aabbBounds.clear()), !1);
   }
   updateTempAABBBounds(aabbBounds) {
     const tb1 = this.tempAABBBounds1,
@@ -9613,20 +9622,22 @@ class Text extends Graphic {
           });
           break;
         }
-        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-word" === wordBreak);
-        if ("" !== str && "" === clip.str) {
+        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
+        if ("" !== str && "" === clip.str || clip.wordBreaked) {
           if (ellipsis) {
             const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
             clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
           } else clip.str = "", clip.width = 0;
           needCut = !1;
         }
-        if (linesLayout.push({
+        linesLayout.push({
           str: clip.str,
           width: clip.width
-        }), clip.str.length === str.length) ;else if (needCut) {
-          const newStr = str.substring(clip.str.length);
-          lines.splice(i + 1, 0, newStr);
+        });
+        let cutLength = clip.str.length;
+        if (!clip.wordBreaked || "" !== str && "" === clip.str || (needCut = !0, cutLength = clip.wordBreaked), clip.str.length === str.length) ;else if (needCut) {
+          let newStr = str.substring(cutLength);
+          "keep-all" === wordBreak && (newStr = newStr.replace(/^\s+/g, "")), lines.splice(i + 1, 0, newStr);
         }
       }
       let maxWidth = 0;
@@ -16831,7 +16842,7 @@ class LabelBase extends AbstractComponent {
     _smartInvert(labels) {
         var _a, _b, _c, _d, _e;
         const option = (isObject(this.attribute.smartInvert) ? this.attribute.smartInvert : {});
-        const { textType, contrastRatiosThreshold, alternativeColors, mode } = option;
+        const { textType, contrastRatiosThreshold, alternativeColors, mode, interactInvertType } = option;
         const fillStrategy = (_a = option.fillStrategy) !== null && _a !== void 0 ? _a : 'invertBase';
         const strokeStrategy = (_b = option.strokeStrategy) !== null && _b !== void 0 ? _b : 'base';
         const brightColor = (_c = option.brightColor) !== null && _c !== void 0 ? _c : '#ffffff';
@@ -16850,17 +16861,19 @@ class LabelBase extends AbstractComponent {
             const foregroundColor = label.attribute.fill;
             const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode);
             const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
-            if (outsideEnable || this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds)) {
+            const isInside = this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds);
+            const isIntersect = !isInside && label.AABBBounds && baseMark.AABBBounds && baseMark.AABBBounds.intersects(label.AABBBounds);
+            if (isInside || outsideEnable || (isIntersect && interactInvertType === 'inside')) {
                 const fill = smartInvertStrategy(fillStrategy, backgroundColor, invertColor, similarColor);
                 fill && label.setAttributes({ fill });
-                if (label.attribute.lineWidth === 0) {
+                if (label.attribute.lineWidth === 0 || label.attribute.strokeOpacity === 0) {
                     continue;
                 }
                 const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
                 stroke && label.setAttributes({ stroke });
             }
-            else if (label.AABBBounds && baseMark.AABBBounds && baseMark.AABBBounds.intersects(label.AABBBounds)) {
-                if (label.attribute.lineWidth === 0) {
+            else if (isIntersect && interactInvertType !== 'none') {
+                if (label.attribute.lineWidth === 0 || label.attribute.strokeOpacity === 0) {
                     continue;
                 }
                 if (label.attribute.stroke) {
@@ -17348,7 +17361,8 @@ class ArcLabel extends LabelBase {
         const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
         const flag = isQuadrantLeft(quadrant) ? -1 : 1;
         let cx = 0;
-        let limit = (flag > 0 ? plotLayout.x2 - pointB.x + this._alignOffset : pointB.x - plotLayout.x1 - this._alignOffset) -
+        let limit = (flag > 0 ? plotLayout.x2 - pointB.x : pointB.x - plotLayout.x1) +
+            this._alignOffset -
             this._line2MinLength -
             spaceWidth;
         if (labelLayoutAlign === 'labelLine') {
@@ -18386,6 +18400,25 @@ function getPolygonPath(points, closed) {
     }
     return path;
 }
+function textIntersect(textA, textB, sep) {
+    let a = textA.OBBBounds;
+    let b = textB.OBBBounds;
+    if (a && b && !a.empty() && !b.empty()) {
+        return a.intersects(b);
+    }
+    a = textA.AABBBounds;
+    b = textB.AABBBounds;
+    return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
+}
+function hasOverlap(items, pad) {
+    for (let i = 1, n = items.length, a = items[0], b; i < n; a = b, ++i) {
+        b = items[i];
+        if (textIntersect(a, b, pad)) {
+            return true;
+        }
+    }
+    return false;
+}
 
 const dispatchHoverState = (e, container, lastHover) => {
     const target = e.target;
@@ -18814,7 +18847,7 @@ const methods$1 = {
     greedy: function (items, sep) {
         let a;
         return items.filter((b, i) => {
-            if (!i || !intersect$1(a, b, sep)) {
+            if (!i || !textIntersect(a, b, sep)) {
                 a = b;
                 return 1;
             }
@@ -18822,23 +18855,6 @@ const methods$1 = {
         });
     }
 };
-function intersect$1(textA, textB, sep) {
-    let a = textA.OBBBounds;
-    let b = textB.OBBBounds;
-    if (a && b && !a.empty() && !b.empty()) {
-        return a.intersects(b);
-    }
-    a = textA.AABBBounds;
-    b = textB.AABBBounds;
-    return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
-}
-function hasOverlap$1(items, pad) {
-    for (let i = 1, n = items.length, a = items[0], b; i < n; a = b, ++i) {
-        if (intersect$1(a, (b = items[i]), pad)) {
-            return true;
-        }
-    }
-}
 function hasBounds(item) {
     let bounds;
     if (!item.OBBBounds.empty()) {
@@ -18853,6 +18869,23 @@ function reset(items) {
     items.forEach(item => item.setAttribute('opacity', 1));
     return items;
 }
+function forceItemVisible$1(sourceItem, items, check, comparator, inverse = false) {
+    if (check && !sourceItem.attribute.opacity) {
+        const remainLength = items.length;
+        if (remainLength > 1) {
+            sourceItem.setAttribute('opacity', 1);
+            for (let i = 0; i < remainLength; i++) {
+                const item = inverse ? items[remainLength - 1 - i] : items[i];
+                if (comparator(item)) {
+                    item.setAttribute('opacity', 0);
+                }
+                else {
+                    break;
+                }
+            }
+        }
+    }
+}
 function autoHide(labels, config) {
     if (isEmpty(labels)) {
         return;
@@ -18865,28 +18898,22 @@ function autoHide(labels, config) {
     items = reset(source);
     const { method = 'parity', separation: sep = 0 } = config;
     const reduce = isFunction(method) ? method : methods$1[method] || methods$1.parity;
-    if (items.length >= 3 && hasOverlap$1(items, sep)) {
+    if (items.length >= 3 && hasOverlap(items, sep)) {
         do {
             items = reduce(items, sep);
-        } while (items.length >= 3 && hasOverlap$1(items, sep));
-        const checkLast = items.length < 3 || config.lastVisible;
-        if (checkLast) {
-            const lastSourceItem = last(source);
-            if (!lastSourceItem.attribute.opacity) {
-                const remainLength = items.length;
-                if (remainLength > 1) {
-                    lastSourceItem.setAttribute('opacity', 1);
-                    for (let i = remainLength - 1; i >= 0; i--) {
-                        if (intersect$1(items[i], lastSourceItem, sep)) {
-                            items[i].setAttribute('opacity', 0);
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                }
-            }
-        }
+        } while (items.length >= 3 && hasOverlap(items, sep));
+        const shouldCheck = (length, visibility) => length < 3 || visibility;
+        const checkFirst = shouldCheck(items.length, config.firstVisible);
+        let checkLast = shouldCheck(items.length, config.lastVisible);
+        const firstSourceItem = source[0];
+        const lastSourceItem = last(source);
+        if (textIntersect(firstSourceItem, lastSourceItem, sep)) {
+            lastSourceItem.setAttribute('opacity', 0);
+            checkLast = false;
+        }
+        forceItemVisible$1(firstSourceItem, items, checkFirst, (item) => textIntersect(item, firstSourceItem, sep));
+        forceItemVisible$1(lastSourceItem, items, checkLast, (item) => textIntersect(item, lastSourceItem, sep) ||
+            (checkFirst && item !== firstSourceItem ? textIntersect(item, firstSourceItem, sep) : false), true);
     }
     source.forEach(item => {
         item.setAttribute('visible', !!item.attribute.opacity);
@@ -19682,7 +19709,7 @@ class LineAxis extends AxisBase {
         }
         const { verticalLimitSize, label, orient } = this.attribute;
         const limitLength = this._getAxisLabelLimitLength(verticalLimitSize, layerCount);
-        const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, lastVisible, autoWrap: autoWrap$1, overflowLimitLength } = label;
+        const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, lastVisible, firstVisible, autoWrap: autoWrap$1, overflowLimitLength } = label;
         if (isFunction(layoutFunc)) {
             layoutFunc(labelShapes, labelData, layer, this);
         }
@@ -19724,7 +19751,8 @@ class LineAxis extends AxisBase {
                     orient,
                     method: autoHideMethod,
                     separation: autoHideSeparation,
-                    lastVisible
+                    lastVisible,
+                    firstVisible
                 });
             }
         }
@@ -20202,18 +20230,6 @@ const labelOverlap = (prevLabel, nextLabel, gap = 0) => {
     const nextBounds = new AABBBounds(nextLabel).expand(gap / 2);
     return prevBounds.intersects(nextBounds);
 };
-function intersect(a, b, sep) {
-    return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
-}
-function hasOverlap(items, pad) {
-    for (let i = 1, n = items.length, a = items[0], b; i < n; a = b, ++i) {
-        b = items[i];
-        if (intersect(a.AABBBounds, b.AABBBounds, pad)) {
-            return true;
-        }
-    }
-    return false;
-}
 const MIN_TICK_GAP = 12;
 const calculateFlushPos = (basePosition, size, rangePosition, otherEnd) => {
     return rangePosition < basePosition
@@ -20324,6 +20340,30 @@ function getScaleTicks(op, scale, count, getTicks) {
     }
     return scaleTicks;
 }
+function forceItemVisible(sourceItem, items, check, comparator, inverse = false) {
+    if (check && !items.includes(sourceItem)) {
+        let remainLength = items.length;
+        if (remainLength > 1) {
+            if (inverse) {
+                items.push(sourceItem);
+            }
+            else {
+                items.unshift(sourceItem);
+            }
+            for (let i = 0; i < remainLength; i++) {
+                const index = inverse ? remainLength - 1 - i : i;
+                if (comparator(items[index])) {
+                    items.splice(index, 1);
+                    i--;
+                    remainLength--;
+                }
+                else {
+                    break;
+                }
+            }
+        }
+    }
+}
 const DEFAULT_CONTINUOUS_TICK_COUNT = 5;
 const continuousTicks = (scale, op) => {
     var _a, _b;
@@ -20367,17 +20407,41 @@ const continuousTicks = (scale, op) => {
             return scale.ticks(count, { noDecimals, customTicks });
         });
     }
-    if (op.sampling) {
+    const domain = scale.domain();
+    if (op.labelFirstVisible && domain[0] !== scaleTicks[0] && !scaleTicks.includes(domain[0])) {
+        scaleTicks.unshift(domain[0]);
+    }
+    if (op.labelLastVisible &&
+        domain[domain.length - 1] !== scaleTicks[scaleTicks.length - 1] &&
+        !scaleTicks.includes(domain[domain.length - 1])) {
+        scaleTicks.push(domain[domain.length - 1]);
+    }
+    if (op.sampling && scaleTicks.length > 1) {
         if (op.coordinateType === 'cartesian' || (op.coordinateType === 'polar' && op.axisOrientType === 'radius')) {
             const { labelGap = 4, labelFlush } = op;
             let items = getCartesianLabelBounds(scale, scaleTicks, op).map((bounds, i) => ({
                 AABBBounds: bounds,
                 value: scaleTicks[i]
             }));
+            const source = [...items];
+            const firstSourceItem = source[0];
+            const lastSourceItem = last(source);
             const samplingMethod = breakData && breakData() ? methods.greedy : methods.parity;
             while (items.length >= 3 && hasOverlap(items, labelGap)) {
                 items = samplingMethod(items, labelGap);
             }
+            const shouldCheck = (length, visibility) => length < 3 || visibility;
+            const checkFirst = shouldCheck(items.length, op.labelFirstVisible);
+            let checkLast = shouldCheck(items.length, op.labelLastVisible);
+            if (textIntersect(firstSourceItem, lastSourceItem, labelGap)) {
+                if (items.includes(lastSourceItem) && items.length > 1) {
+                    items.splice(items.indexOf(lastSourceItem), 1);
+                    checkLast = false;
+                }
+            }
+            forceItemVisible(firstSourceItem, items, checkFirst, (item) => textIntersect(item, firstSourceItem, labelGap));
+            forceItemVisible(lastSourceItem, items, checkLast, (item) => textIntersect(item, lastSourceItem, labelGap) ||
+                (checkFirst && item !== firstSourceItem ? textIntersect(item, firstSourceItem, labelGap) : false), true);
             const ticks = items.map(item => item.value);
             if (ticks.length < 3 && labelFlush) {
                 if (ticks.length > 1) {
@@ -20399,7 +20463,7 @@ const methods = {
     greedy: function (items, sep) {
         let a;
         return items.filter((b, i) => {
-            if (!i || !intersect(a.AABBBounds, b.AABBBounds, sep)) {
+            if (!i || !textIntersect(a, b, sep)) {
                 a = b;
                 return true;
             }
@@ -24619,11 +24683,11 @@ class DiscreteLegend extends LegendBase {
                     });
                 }
                 else {
-                    valueShape.setAttribute('x', valueSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2));
+                    valueShape.setAttribute('x', labelSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2));
                 }
             }
             else {
-                valueShape.setAttribute('x', valueSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2));
+                valueShape.setAttribute('x', labelSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2));
             }
             focusStartX = valueSpace + (valueShape.AABBBounds.empty() ? 0 : valueShape.AABBBounds.x2);
             innerGroup.add(valueShape);
@@ -24695,8 +24759,8 @@ class DiscreteLegend extends LegendBase {
             ? new ScrollBar(Object.assign(Object.assign({ direction: 'horizontal', disableTriggerEvent, range: [0, 0.5], height: 12 }, compStyle), { width: compSize }))
             : new ScrollBar(Object.assign(Object.assign({ direction: 'vertical', width: 12, range: [0, 0.5] }, compStyle), { height: compSize, disableTriggerEvent }));
     }
-    _updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight) {
-        const { maxHeight, pager } = this.attribute;
+    _updatePositionOfPager(renderStartY, compWidth, compHeight) {
+        const { pager } = this.attribute;
         const { totalPage, isHorizontal } = this._itemContext;
         const position = (pager && pager.position) || 'middle';
         this._pagerComponent.setTotal(totalPage);
@@ -24712,7 +24776,7 @@ class DiscreteLegend extends LegendBase {
                 y = renderStartY + compHeight / 2 - this._pagerComponent.AABBBounds.height() / 2;
             }
             this._pagerComponent.setAttributes({
-                x: contentWidth,
+                x: compWidth - this._pagerComponent.AABBBounds.width(),
                 y
             });
         }
@@ -24729,7 +24793,7 @@ class DiscreteLegend extends LegendBase {
             }
             this._pagerComponent.setAttributes({
                 x,
-                y: maxHeight - this._pagerComponent.AABBBounds.height()
+                y: compHeight - this._pagerComponent.AABBBounds.height()
             });
         }
     }
@@ -24777,7 +24841,6 @@ class DiscreteLegend extends LegendBase {
                 return e.detail.current;
             };
         const onScroll = (e) => {
-            e.nativeEvent.preventDefault();
             const scrollComponent = this._pagerComponent;
             const preScrollRange = scrollComponent.getScrollRange();
             const { direction } = scrollComponent.attribute;
@@ -24810,7 +24873,9 @@ class DiscreteLegend extends LegendBase {
             this._pagerComponent.addEventListener('scrollDrag', onPaging);
             this._pagerComponent.addEventListener('scrollUp', onPaging);
             if (this.attribute.pager.roamScroll) {
-                this.addEventListener('wheel', onScroll);
+                const THROTTLE_TIME = 50;
+                this.addEventListener('wheel', (e) => e.nativeEvent.preventDefault());
+                this.addEventListener('wheel', throttle(onScroll, THROTTLE_TIME));
             }
         }
         else {
@@ -24864,7 +24929,7 @@ class DiscreteLegend extends LegendBase {
             this._itemContext.pages = pages;
             const total = Math.ceil(pages / maxRow);
             this._itemContext.totalPage = total;
-            this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
+            this._updatePositionOfPager(renderStartY, compWidth, compHeight);
         }
         else {
             compWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol;
@@ -24895,7 +24960,7 @@ class DiscreteLegend extends LegendBase {
             });
             const total = Math.ceil(pages / maxCol);
             this._itemContext.totalPage = total;
-            this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
+            this._updatePositionOfPager(renderStartY, compWidth, compHeight);
         }
         if (defaultCurrent > 1) {
             if (isHorizontal) {
@@ -25133,6 +25198,10 @@ class DiscreteLegend extends LegendBase {
         }
         return newConfig;
     }
+    release() {
+        super.release();
+        this.removeAllEventListeners();
+    }
 }
 DiscreteLegend.defaultAttributes = {
     layout: 'horizontal',
@@ -29090,6 +29159,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.20.9-alpha.2";
+const version = "0.21.0-alpha.1";
 
-export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };
+export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };

package/es/axis/line.js

@@ -252,7 +252,7 @@ export class LineAxis extends AxisBase {
     }
     handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
         if (isEmpty(labelShapes)) return;
-        const {verticalLimitSize: verticalLimitSize, label: label, orient: orient} = this.attribute, limitLength = this._getAxisLabelLimitLength(verticalLimitSize, layerCount), {layoutFunc: layoutFunc, autoRotate: autoRotate, autoRotateAngle: autoRotateAngle, autoLimit: autoLimit, limitEllipsis: limitEllipsis, autoHide: autoHide, autoHideMethod: autoHideMethod, autoHideSeparation: autoHideSeparation, lastVisible: lastVisible, autoWrap: autoWrap, overflowLimitLength: overflowLimitLength} = label;
+        const {verticalLimitSize: verticalLimitSize, label: label, orient: orient} = this.attribute, limitLength = this._getAxisLabelLimitLength(verticalLimitSize, layerCount), {layoutFunc: layoutFunc, autoRotate: autoRotate, autoRotateAngle: autoRotateAngle, autoLimit: autoLimit, limitEllipsis: limitEllipsis, autoHide: autoHide, autoHideMethod: autoHideMethod, autoHideSeparation: autoHideSeparation, lastVisible: lastVisible, firstVisible: firstVisible, autoWrap: autoWrap, overflowLimitLength: overflowLimitLength} = label;
         if (isFunction(layoutFunc)) layoutFunc(labelShapes, labelData, layer, this); else {
             if (autoRotate) autoRotateFunc(labelShapes, {
                 labelRotateAngle: autoRotateAngle,
@@ -281,7 +281,8 @@ export class LineAxis extends AxisBase {
                 orient: orient,
                 method: autoHideMethod,
                 separation: autoHideSeparation,
-                lastVisible: lastVisible
+                lastVisible: lastVisible,
+                firstVisible: firstVisible
             });
         }
     }