@visactor/vrender-components 0.20.6-alpha.0 → 0.20.6-alpha.2

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, isNumberClose, normalizeAngle, flattenArray, cloneDeep, get, isRotateAABBIntersect, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, rotatePoint, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, isNumberClose, normalizeAngle, flattenArray, cloneDeep, get, last, isRotateAABBIntersect, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -4466,6 +4466,9 @@ class Graphic extends Node {
   get AABBBounds() {
     return this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode);
   }
+  get OBBBounds() {
+    return this.tryUpdateOBBBounds();
+  }
   get globalAABBBounds() {
     return this.tryUpdateGlobalAABBBounds();
   }
@@ -4478,7 +4481,7 @@ class Graphic extends Node {
   constructor() {
     let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var _a;
-    super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), params.background ? this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
+    super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background ? this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
   }
   setMode(mode) {
     "3d" === mode ? this.set3dMode() : this.set2dMode();
@@ -4512,13 +4515,22 @@ class Graphic extends Node {
     const bounds = this.doUpdateAABBBounds(full);
     return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
   }
+  tryUpdateOBBBounds() {
+    if (this._OBBBounds || (this._OBBBounds = new OBBBounds()), this.tryUpdateAABBBounds(), this.updateOBBBoundsStamp === this.updateAABBBoundsStamp) return this._OBBBounds;
+    if (this.updateOBBBoundsStamp = this.updateAABBBoundsStamp, !this.valid) return this._OBBBounds.clear(), this._OBBBounds;
+    return this.doUpdateOBBBounds();
+  }
   combindShadowAABBBounds(bounds) {
     if (this.shadowRoot) {
       const b = this.shadowRoot.AABBBounds.clone();
       bounds.union(b);
     }
   }
+  doUpdateOBBBounds() {
+    return this._OBBBounds;
+  }
   doUpdateAABBBounds(full) {
+    this.updateAABBBoundsStamp++;
     const graphicTheme = this.getGraphicTheme();
     this._AABBBounds.clear();
     const attribute = this.attribute,
@@ -5476,6 +5488,7 @@ class Group extends Graphic {
     }), application.graphicService.updateTempAABBBounds(aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, groupTheme, !1, this), originalAABBBounds.copy(aabbBounds), originalAABBBounds;
   }
   doUpdateAABBBounds() {
+    this.updateAABBBoundsStamp++;
     const bounds = super.doUpdateAABBBounds();
     return this.parent && this.parent.addChildUpdateBoundTag(), this._emitCustomEvent("AAABBBoundsChange"), bounds;
   }
@@ -5811,7 +5824,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,
@@ -5880,7 +5893,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],
@@ -9152,7 +9165,10 @@ class InteractiveDrawItemInterceptorContribution {
   }
   beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
     const baseGraphic = graphic.baseGraphic;
-    if (!baseGraphic.stage) {
+    let intree = !!baseGraphic.stage,
+      _g = baseGraphic.parent;
+    for (; intree && _g && _g.stage !== _g;) intree = !!_g.stage, _g = _g.parent;
+    if (!intree) {
       const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
       if (interactiveLayer) {
         this.getShadowRoot(interactiveLayer).removeChild(graphic);
@@ -9501,6 +9517,35 @@ class Text extends Graphic {
   getGraphicTheme() {
     return getTheme(this).text;
   }
+  doUpdateOBBBounds() {
+    const graphicTheme = this.getGraphicTheme();
+    this._OBBBounds.clear();
+    const attribute = this.attribute,
+      {
+        angle = graphicTheme.angle
+      } = attribute;
+    if (!angle) {
+      const b = this.AABBBounds;
+      return this._OBBBounds.setValue(b.x1, b.y1, b.x2, b.y2), this._OBBBounds;
+    }
+    this.obbText || (this.obbText = new Text({})), this.obbText.setAttributes(Object.assign(Object.assign({}, attribute), {
+      angle: 0
+    }));
+    const bounds1 = this.obbText.AABBBounds,
+      {
+        x: x,
+        y: y
+      } = attribute,
+      boundsCenter = {
+        x: (bounds1.x1 + bounds1.x2) / 2,
+        y: (bounds1.y1 + bounds1.y2) / 2
+      },
+      center = rotatePoint(boundsCenter, angle, {
+        x: x,
+        y: y
+      });
+    return this._OBBBounds.copy(bounds1), this._OBBBounds.translate(center.x - boundsCenter.x, center.y - boundsCenter.y), this._OBBBounds.angle = angle, this._OBBBounds;
+  }
   updateAABBBounds(attribute, textTheme, aabbBounds) {
     const {
       text = textTheme.text
@@ -11933,13 +11978,14 @@ class Arc extends Graphic {
     return super.needUpdateTag(key, ARC_UPDATE_TAG_KEY);
   }
   toCustomPath() {
+    var _a, _b, _c, _d;
     const attribute = this.attribute,
       {
         startAngle: startAngle,
         endAngle: endAngle
       } = this.getParsedAngle();
-    let innerRadius = attribute.innerRadius - (attribute.innerPadding || 0),
-      outerRadius = attribute.outerRadius - (attribute.outerPadding || 0);
+    let innerRadius = (null !== (_a = attribute.innerRadius) && void 0 !== _a ? _a : 0) - (null !== (_b = attribute.innerPadding) && void 0 !== _b ? _b : 0),
+      outerRadius = (null !== (_c = attribute.outerRadius) && void 0 !== _c ? _c : 0) - (null !== (_d = attribute.outerPadding) && void 0 !== _d ? _d : 0);
     const deltaAngle = abs(endAngle - startAngle),
       clockwise = endAngle > startAngle;
     if (outerRadius < innerRadius) {
@@ -14139,7 +14185,7 @@ class ScrollBar extends AbstractComponent {
             let currentScrollValue;
             let currentPos;
             let delta = 0;
-            const { width, height } = this.getSliderRenderBounds();
+            const { width, height } = this._getSliderRenderBounds();
             if (direction === 'vertical') {
                 currentPos = y;
                 delta = currentPos - this._prePos;
@@ -14241,7 +14287,7 @@ class ScrollBar extends AbstractComponent {
         const rail = group.createOrUpdateChild('scrollbar-rail', Object.assign({ x: 0, y: 0, width,
             height }, railStyle), 'rect');
         this._rail = rail;
-        const sliderRenderBounds = this.getSliderRenderBounds();
+        const sliderRenderBounds = this._getSliderRenderBounds();
         const sliderPos = this._getSliderPos(clampRange(range, limitRange[0], limitRange[1]));
         const sliderSize = sliderPos[1] - sliderPos[0];
         this._sliderSize = sliderSize;
@@ -14271,7 +14317,7 @@ class ScrollBar extends AbstractComponent {
             y: containerAABBBounds.y1
         };
     }
-    getSliderRenderBounds() {
+    _getSliderRenderBounds() {
         if (this._sliderRenderBounds) {
             return this._sliderRenderBounds;
         }
@@ -14291,14 +14337,14 @@ class ScrollBar extends AbstractComponent {
     _getDefaultSliderCornerRadius() {
         const { direction, round } = this.attribute;
         if (round) {
-            const { width, height } = this.getSliderRenderBounds();
+            const { width, height } = this._getSliderRenderBounds();
             return direction === 'horizontal' ? height : width;
         }
         return 0;
     }
     _getSliderPos(range) {
         const { direction } = this.attribute;
-        const { width, height, x1, y1 } = this.getSliderRenderBounds();
+        const { width, height, x1, y1 } = this._getSliderRenderBounds();
         if (direction === 'horizontal') {
             return [width * range[0] + x1, width * range[1] + x1];
         }
@@ -14310,7 +14356,7 @@ class ScrollBar extends AbstractComponent {
         }
         const { limitRange = [0, 1], direction } = this.attribute;
         const [min, max] = clampRange(limitRange, 0, 1);
-        const { width, height, x1, y1 } = this.getSliderRenderBounds();
+        const { width, height, x1, y1 } = this._getSliderRenderBounds();
         const sliderSize = this._sliderSize;
         return direction === 'horizontal'
             ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
@@ -17315,7 +17361,9 @@ 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 : pointB.x - plotLayout.x1) - this._line2MinLength - spaceWidth;
+        let limit = (flag > 0 ? plotLayout.x2 - pointB.x + this._alignOffset : pointB.x - plotLayout.x1 - this._alignOffset) -
+            this._line2MinLength -
+            spaceWidth;
         if (labelLayoutAlign === 'labelLine') {
             cx = (radius + line1MinLength + this._line2MinLength) * flag + center.x;
             limit = (flag > 0 ? plotLayout.x2 - cx : cx - plotLayout.x1) - spaceWidth;
@@ -18351,6 +18399,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;
@@ -18772,12 +18839,86 @@ class AxisBase extends AbstractComponent {
     }
 }
 
-function rotate(x, y, deg, originX, originY) {
-    return {
-        x: (x - originX) * Math.cos(deg) + (y - originY) * Math.sin(deg) + originX,
-        y: (x - originX) * Math.sin(deg) + (originY - y) * Math.cos(deg) + originY
-    };
+const methods$1 = {
+    parity: function (items) {
+        return items.filter((item, i) => (i % 2 ? item.setAttribute('opacity', 0) : 1));
+    },
+    greedy: function (items, sep) {
+        let a;
+        return items.filter((b, i) => {
+            if (!i || !textIntersect(a, b, sep)) {
+                a = b;
+                return 1;
+            }
+            return b.setAttribute('opacity', 0);
+        });
+    }
+};
+function hasBounds(item) {
+    let bounds;
+    if (!item.OBBBounds.empty()) {
+        bounds = item.OBBBounds;
+    }
+    else {
+        bounds = item.AABBBounds;
+    }
+    return bounds.width() > 1 && bounds.height() > 1;
+}
+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;
+    }
+    const source = labels.filter(hasBounds);
+    if (isEmpty(source)) {
+        return;
+    }
+    let items;
+    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(items, sep)) {
+        do {
+            items = reduce(items, sep);
+        } 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);
+    });
 }
+
 function genNormalBounds(item) {
     const bounds = item.AABBBounds;
     return {
@@ -18796,7 +18937,10 @@ function genRotateBounds(items) {
             return;
         }
         const bounds = genNormalBounds(item);
-        const rotatedCenter = rotate(bounds.centerX, bounds.centerY, bounds.angle, item.attribute.x, item.attribute.y);
+        const rotatedCenter = rotatePoint({ x: item.attribute.x, y: item.attribute.y }, bounds.angle, {
+            x: bounds.centerX,
+            y: bounds.centerY
+        });
         const deltaX = rotatedCenter.x - bounds.centerX;
         const deltaY = rotatedCenter.y - bounds.centerY;
         bounds.x1 += deltaX;
@@ -18809,6 +18953,10 @@ function genRotateBounds(items) {
     });
 }
 function itemIntersect(item1, item2) {
+    var _a, _b;
+    if (!((_a = item1.OBBBounds) === null || _a === void 0 ? void 0 : _a.empty()) && !((_b = item2.OBBBounds) === null || _b === void 0 ? void 0 : _b.empty())) {
+        return item1.OBBBounds.intersects(item2.OBBBounds);
+    }
     return (isRectIntersect(item1.AABBBounds, item2.AABBBounds, false) &&
         (item1.rotatedBounds && item2.rotatedBounds
             ? isRotateAABBIntersect(item1.rotatedBounds, item2.rotatedBounds, true)
@@ -18826,86 +18974,6 @@ function isAngleHorizontal(angle) {
     return !hasAngle || Math.abs(sin) <= DELTA_ANGLE;
 }
 
-const methods$1 = {
-    parity: function (items) {
-        return items.filter((item, i) => (i % 2 ? item.setAttribute('opacity', 0) : 1));
-    },
-    greedy: function (items, sep) {
-        let a;
-        return items.filter((b, i) => {
-            if (!i || !intersect$1(a, b, sep)) {
-                a = b;
-                return 1;
-            }
-            return b.setAttribute('opacity', 0);
-        });
-    }
-};
-function intersect$1(textA, textB, sep) {
-    const a = textA.AABBBounds;
-    const b = textB.AABBBounds;
-    return (sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2) &&
-        (textA.rotatedBounds && textB.rotatedBounds
-            ? sep >
-                Math.max(textB.rotatedBounds.x1 - textA.rotatedBounds.x2, textA.rotatedBounds.x1 - textB.rotatedBounds.x2, textB.rotatedBounds.y1 - textA.rotatedBounds.y2, textA.rotatedBounds.y1 - textB.rotatedBounds.y2)
-            : true));
-}
-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) {
-    const b = item.AABBBounds;
-    return b.width() > 1 && b.height() > 1;
-}
-function reset(items) {
-    items.forEach(item => item.setAttribute('opacity', 1));
-    return items;
-}
-function autoHide(labels, config) {
-    if (isEmpty(labels)) {
-        return;
-    }
-    const source = labels.filter(hasBounds);
-    if (isEmpty(source)) {
-        return;
-    }
-    let items;
-    items = reset(source);
-    genRotateBounds(items);
-    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)) {
-        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;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    source.forEach(item => {
-        item.setAttribute('visible', !!item.attribute.opacity);
-    });
-}
-
 function autoRotate(items, rotateConfig) {
     if (isEmpty(items)) {
         return;
@@ -19640,7 +19708,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);
         }
@@ -19682,7 +19750,8 @@ class LineAxis extends AxisBase {
                     orient,
                     method: autoHideMethod,
                     separation: autoHideSeparation,
-                    lastVisible
+                    lastVisible,
+                    firstVisible
                 });
             }
         }
@@ -20160,18 +20229,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
@@ -20282,6 +20339,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;
@@ -20325,6 +20406,13 @@ const continuousTicks = (scale, op) => {
             return scale.ticks(count, { noDecimals, customTicks });
         });
     }
+    const domain = scale.domain();
+    if (op.labelFirstVisible && domain[0] !== scaleTicks[0]) {
+        scaleTicks.unshift(domain[0]);
+    }
+    if (op.labelLastVisible && domain[domain.length - 1] !== scaleTicks[scaleTicks.length - 1]) {
+        scaleTicks.push(domain[domain.length - 1]);
+    }
     if (op.sampling) {
         if (op.coordinateType === 'cartesian' || (op.coordinateType === 'polar' && op.axisOrientType === 'radius')) {
             const { labelGap = 4, labelFlush } = op;
@@ -20332,10 +20420,23 @@ const continuousTicks = (scale, op) => {
                 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)) {
+                items.push(firstSourceItem);
+                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) {
@@ -20357,7 +20458,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;
             }
@@ -20854,8 +20955,25 @@ class BaseGrid extends AbstractComponent {
                 ? alternateColor
                 : [alternateColor, 'transparent'];
             const getColor = (index) => colors[index % colors.length];
-            for (let index = 0; index < items.length - 1; index++) {
-                const [prev, curr] = [items[index].points, items[index + 1].points];
+            const originalItems = this.attribute.items;
+            const firstItem = originalItems[0];
+            const lastItem = originalItems[originalItems.length - 1];
+            const noZero = !isNumberClose(firstItem.value, 0) && !isNumberClose(lastItem.value, 0);
+            const noOne = !isNumberClose(firstItem.value, 1) && !isNumberClose(lastItem.value, 1);
+            const allPoints = [];
+            const isDesc = firstItem.value > lastItem.value;
+            if ((isDesc && noOne) || (!isDesc && noZero)) {
+                allPoints.push(this.getGridPointsByValue(isDesc ? 1 : 0));
+            }
+            items.forEach((item) => {
+                allPoints.push(item.points);
+            });
+            if ((isDesc && noZero) || (!isDesc && noOne)) {
+                allPoints.push(this.getGridPointsByValue(isDesc ? 0 : 1));
+            }
+            for (let index = 0; index < allPoints.length - 1; index++) {
+                const prev = allPoints[index];
+                const curr = allPoints[index + 1];
                 const path = getRegionPath(prev, curr, gridAttrs);
                 const shape = graphicCreator.path({
                     path,
@@ -20941,6 +21059,10 @@ class LineAxisGrid extends BaseGrid {
         }
         return gridPoints;
     }
+    getGridPointsByValue(value) {
+        const basePoint = this.getTickCoord(value);
+        return this._getGridPoint(this.attribute.type, basePoint);
+    }
     getGridAttribute(isSubGrid) {
         const { type: gridType, alignWithLabel = true } = this.attribute;
         const tickSegment = this._parseTickSegment();
@@ -20969,7 +21091,7 @@ class LineAxisGrid extends BaseGrid {
         else {
             gridAttribute = merge({}, this.attribute, this.attribute.subGrid);
             const subGridItems = [];
-            const { count: subCount = 4 } = this.attribute.subGrid || {};
+            const { count: subCount = 4 } = gridAttribute;
             const tickLineCount = this.data.length;
             if (tickLineCount >= 2) {
                 const points = this._getPointsOfSubGrid(tickSegment, alignWithLabel);
@@ -20978,23 +21100,22 @@ class LineAxisGrid extends BaseGrid {
                     const next = points[i + 1];
                     subGridItems.push({
                         id: `sub-${i}-0`,
-                        points: this._getGridPoint(gridType, this.getTickCoord(pre.value)),
+                        points: this.getGridPointsByValue(pre.value),
                         datum: {}
                     });
                     for (let j = 0; j < subCount; j++) {
                         const percent = (j + 1) / (subCount + 1);
                         const value = (1 - percent) * pre.value + percent * next.value;
-                        const point = this.getTickCoord(value);
                         subGridItems.push({
                             id: `sub-${i}-${j + 1}`,
-                            points: this._getGridPoint(gridType, point),
+                            points: this.getGridPointsByValue(value),
                             datum: {}
                         });
                     }
                     if (i === points.length - 2) {
                         subGridItems.push({
                             id: `sub-${i}-${subCount + 1}`,
-                            points: this._getGridPoint(gridType, this.getTickCoord(next.value)),
+                            points: this.getGridPointsByValue(next.value),
                             datum: {}
                         });
                     }
@@ -21012,6 +21133,11 @@ class CircleAxisGrid extends BaseGrid {
     constructor(attributes, options) {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, BaseGrid.defaultAttributes, attributes), options);
     }
+    getGridPointsByValue(value) {
+        const basePoint = this.getTickCoord(value);
+        const { radius, innerRadius = 0 } = this.attribute;
+        return [basePoint, this.getVerticalCoord(basePoint, radius - innerRadius, true)];
+    }
     getGridAttribute(isSubGrid) {
         let gridAttribute;
         let items = [];
@@ -24517,7 +24643,7 @@ class DiscreteLegend extends LegendBase {
         let focusSpace = 0;
         if (focus) {
             const focusSize = get(focusIconStyle, 'size', DEFAULT_SHAPE_SIZE);
-            focusShape = graphicCreator.symbol(Object.assign(Object.assign({ x: 0, y: -focusSize / 2 - 1, strokeBoundsBuffer: 0 }, focusIconStyle), { visible: true, pickMode: 'imprecise', boundsPadding: parsedPadding }));
+            focusShape = graphicCreator.symbol(Object.assign(Object.assign({ x: 0, y: -focusSize / 2 - 1, strokeBoundsBuffer: 0, boundsPadding: parsedPadding }, focusIconStyle), { visible: true, pickMode: 'imprecise' }));
             this._appendDataToShape(focusShape, LEGEND_ELEMENT_NAME.focus, item, itemGroup);
             focusSpace = focusSize;
         }
@@ -24700,15 +24826,6 @@ class DiscreteLegend extends LegendBase {
             : (e) => {
                 return e.detail.current;
             };
-        const onScroll = (e) => {
-            e.preventDefault();
-            const scrollComponent = this._pagerComponent;
-            const preScrollRange = scrollComponent.getScrollRange();
-            const { direction } = scrollComponent.attribute;
-            const { width, height } = scrollComponent.getSliderRenderBounds();
-            const currentScrollValue = direction === 'vertical' ? e.deltaY / height : e.deltaX / width;
-            scrollComponent.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], true);
-        };
         const onPaging = (e) => {
             const newPage = pageParser(e);
             if (newPage === this._itemContext.currentPage) {
@@ -24733,9 +24850,6 @@ class DiscreteLegend extends LegendBase {
         if (this._itemContext.isScrollbar) {
             this._pagerComponent.addEventListener('scrollDrag', onPaging);
             this._pagerComponent.addEventListener('scrollUp', onPaging);
-            if (this.attribute.pager.roamScroll) {
-                this.addEventListener('wheel', onScroll);
-            }
         }
         else {
             this._pagerComponent.addEventListener('toPrev', onPaging);
@@ -29014,6 +29128,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.20.6-alpha.0";
+const version = "0.20.6-alpha.2";
 
-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 };