@visactor/vrender-components 0.14.0-alpha.0 → 0.14.0-alpha.10

package/dist/index.js

@@ -273,9 +273,9 @@
             e.stopPropagation();
             const { direction } = this.attribute;
             this._prePos = direction === 'horizontal' ? e.clientX : e.clientY;
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.addEventListener('pointermove', this._onSliderPointerMove);
-                vrender.vglobal.addEventListener('pointerup', this._onSliderPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.addEventListener('pointermove', this._onSliderPointerMove);
+                vrender.global.addEventListener('pointerup', this._onSliderPointerUp);
             }
             else {
                 this._slider.addEventListener('pointermove', this._onSliderPointerMove);
@@ -306,9 +306,9 @@
         };
         _onSliderPointerUp = (e) => {
             e.preventDefault();
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.removeEventListener('pointermove', this._onSliderPointerMove);
-                vrender.vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.removeEventListener('pointermove', this._onSliderPointerMove);
+                vrender.global.removeEventListener('pointerup', this._onSliderPointerUp);
             }
             else {
                 this._slider.removeEventListener('pointermove', this._onSliderPointerMove);
@@ -341,6 +341,26 @@
         }
         return obj.visible !== false;
     };
+    function getMarksByName(root, name) {
+        if (!name) {
+            return [];
+        }
+        const group = root.find(node => node.name === name, true);
+        if (!group) {
+            return [];
+        }
+        return group.getChildren();
+    }
+    function getNoneGroupMarksByName(root, name) {
+        if (!name) {
+            return [];
+        }
+        const group = root.find(node => node.name === name, true);
+        if (!group) {
+            return [];
+        }
+        return group.findAll(node => node.type !== 'group', true);
+    }
 
     const defaultAlternativeColors = ['#ffffff', '#000000'];
     function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors) {
@@ -751,8 +771,10 @@
                 ? [this.stage.width, this.stage.height]
                 : undefined;
             const layout = position === 'auto';
-            for (let i = 0; i < this.positionList.length; i++) {
-                const p = layout ? this.positionList[i] : position;
+            let minifyBBoxI;
+            let minifyBBoxSize = Infinity;
+            for (let i = 0; i < this.positionList.length + 1; i++) {
+                const p = layout ? this.positionList[i === this.positionList.length ? minifyBBoxI : i] : position;
                 const { angle, offset, rectOffset } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, vutils.isArray(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth]);
                 if (vutils.isBoolean(bgVisible)) {
                     const offsetX = (vutils.isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
@@ -761,6 +783,8 @@
                         visible: bgVisible && (contentVisible || titleVisible),
                         x: offsetX,
                         y: 0,
+                        strokeBoundsBuffer: -1,
+                        boundsPadding: -2,
                         anchor: [0, 0],
                         symbolType: 'arrow2Left',
                         angle: angle,
@@ -779,7 +803,7 @@
                         y: 0,
                         width: popTipWidth,
                         height: poptipHeight,
-                        zIndex: -10
+                        zIndex: -8
                     }, 'rect');
                     if (!vutils.isEmpty(state?.panel)) {
                         bgRect.states = state.panel;
@@ -795,6 +819,14 @@
                     if (vutils.rectInsideAnotherRect(b, stageBounds, false)) {
                         break;
                     }
+                    else {
+                        const bbox = vutils.getRectIntersect(b, stageBounds, false);
+                        const size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
+                        if (size < minifyBBoxSize) {
+                            minifyBBoxSize = size;
+                            minifyBBoxI = i;
+                        }
+                    }
                 }
                 else {
                     break;
@@ -951,6 +983,7 @@
                     x: matrix.e,
                     y: matrix.f
                 });
+                drawContext.stage.tryInitInteractiveLayer();
                 const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
                 if (interactiveLayer) {
                     interactiveLayer.add(this.poptipComponent);
@@ -1298,6 +1331,9 @@
                 _clear(index >>> DIV, ~(1 << (index & MOD)));
             },
             getRange: ({ x1, y1, x2, y2 }) => {
+                if (x2 < 0 || y2 < 0 || x1 > w || y1 > h) {
+                    return true;
+                }
                 let r = y2;
                 let start;
                 let end;
@@ -1330,6 +1366,9 @@
                 return false;
             },
             setRange: ({ x1, y1, x2, y2 }) => {
+                if (x2 < 0 || y2 < 0 || x1 > w || y1 > h) {
+                    return;
+                }
                 let start;
                 let end;
                 let indexStart;
@@ -1501,6 +1540,28 @@
                 return DefaultPositions;
         }
     }
+    function clampText(text, width, height) {
+        const { x1, x2, y1, y2 } = text.AABBBounds;
+        const minX = Math.min(x1, x2);
+        const maxX = Math.max(x1, x2);
+        const minY = Math.min(y1, y2);
+        const maxY = Math.max(y1, y2);
+        let dx = 0;
+        let dy = 0;
+        if (minX < 0 && maxX - minX <= width) {
+            dx = -minX;
+        }
+        else if (maxX > width && minX - (maxX - width) >= 0) {
+            dx = width - maxX;
+        }
+        if (minY < 0 && maxY - minY <= height) {
+            dy = -minY;
+        }
+        else if (maxY > height && minY - (maxY - height) >= 0) {
+            dy = height - maxY;
+        }
+        return { dx, dy };
+    }
 
     const fadeIn = (textAttribute = {}) => {
         return {
@@ -1551,17 +1612,37 @@
         setBitmapTool(bmpTool) {
             this._bmpTool = bmpTool;
         }
-        _relationMap;
-        _prevRelationMap;
-        _textMap;
+        _graphicToText;
+        _idToGraphic;
         onAfterLabelOverlap;
         _lastHover;
         _lastSelect;
         _enableAnimation;
         render() {
-            const currentBaseMarks = this._checkMarks();
-            const labels = this.layout(currentBaseMarks);
-            this._smartInvert(labels);
+            this._prepare();
+            const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
+            let data = this.attribute.data;
+            if (vutils.isFunction(dataFilter)) {
+                data = dataFilter(data);
+            }
+            let labels;
+            if (vutils.isFunction(customLayoutFunc)) {
+                labels = customLayoutFunc(data, (d) => this._idToGraphic.get(d.id));
+            }
+            else {
+                labels = this.layout(data);
+                if (vutils.isFunction(customOverlapFunc)) {
+                    labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
+                }
+                else {
+                    if (overlap !== false) {
+                        labels = this._overlapping(labels);
+                    }
+                }
+            }
+            if (smartInvert !== false) {
+                this._smartInvert(labels);
+            }
             this._renderLabels(labels);
         }
         _bindEvent(target) {
@@ -1638,67 +1719,66 @@
             this._setStates(text);
             return text;
         }
-        _checkMarks() {
-            const baseMarks = this.getBaseMarks();
+        _prepare() {
+            const baseMarks = getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName);
             const currentBaseMarks = [];
             baseMarks.forEach(mark => {
                 if (mark.releaseStatus !== 'willRelease') {
                     currentBaseMarks.push(mark);
                 }
             });
-            this._prevRelationMap = new Map(this._relationMap);
-            this._relationMap?.clear();
-            return currentBaseMarks;
-        }
-        layout(currentMarks) {
-            const { textStyle, position, offset } = this.attribute;
-            let { data } = this.attribute;
-            if (vutils.isFunction(data)) {
-                data = data({});
+            this._idToGraphic?.clear();
+            this._baseMarks = currentBaseMarks;
+            if (!currentBaseMarks || currentBaseMarks.length === 0) {
+                return;
             }
+            const { data } = this.attribute;
             if (!data || data.length === 0) {
-                return [];
+                return;
             }
-            let labels = [];
-            if (vutils.isFunction(this.attribute.sort) && currentMarks && currentMarks.length) {
-                currentMarks = currentMarks.sort(this.attribute.sort);
+            if (!this._idToGraphic) {
+                this._idToGraphic = new Map();
             }
-            if (!this._relationMap) {
-                this._relationMap = new Map();
+            for (let i = 0; i < currentBaseMarks.length; i++) {
+                const textData = data[i];
+                const baseMark = currentBaseMarks[i];
+                if (textData && baseMark) {
+                    if (!vutils.isValid(textData.id)) {
+                        textData.id = `vrender-component-${this.name}-${i}`;
+                    }
+                    this._idToGraphic.set(textData.id, baseMark);
+                }
             }
+        }
+        layout(data = []) {
+            const { textStyle = {}, position, offset } = this.attribute;
+            const labels = [];
             for (let i = 0; i < data.length; i++) {
                 const textData = data[i];
-                const baseMark = currentMarks?.[i];
+                const baseMark = this._idToGraphic.get(textData.id);
                 const labelAttribute = {
                     ...textStyle,
-                    ...textData,
-                    _relatedIndex: i
+                    ...textData
                 };
-                this._relationMap.set(i, baseMark);
-                if (textData) {
-                    const text = vrender.createText(labelAttribute);
-                    text.update();
-                    const textBounds = this.getGraphicBounds(text);
-                    const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
-                    const textAttributes = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
-                    if (!textAttributes) {
-                        continue;
-                    }
-                    labelAttribute.x = textAttributes.x;
-                    labelAttribute.y = textAttributes.y;
-                    labels.push(labelAttribute);
+                const text = this._createLabelText(labelAttribute);
+                const textBounds = this.getGraphicBounds(text);
+                const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
+                const textLocation = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
+                if (!textLocation) {
+                    continue;
                 }
-            }
-            this._baseMarks = currentMarks;
-            if (this.attribute.overlap !== false) {
-                labels = this.overlapping(labels, this.attribute.overlap);
+                labelAttribute.x = textLocation.x;
+                labelAttribute.y = textLocation.y;
+                text.setAttributes(textLocation);
+                labels.push(text);
             }
             return labels;
         }
-        overlapping(labels, option = {}) {
+        _overlapping(labels) {
             if (labels.length === 0) {
                 return [];
             }
+            const option = this.attribute.overlap;
             const result = [];
             const baseMarkGroup = this.getBaseMarkGroup();
             const size = option.size ?? {
@@ -1708,7 +1788,7 @@
             if (size.width === 0 || size.height === 0) {
                 return labels;
             }
-            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true } = option;
+            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [] } = option;
             const bmpTool = this._bmpTool || bitmapTool(size.width, size.height);
             const bitmap = this._bitmap || bmpTool.bitmap();
             const checkBounds = strategy.some(s => s.type === 'bound');
@@ -1717,22 +1797,34 @@
                     mark.AABBBounds && bitmap.setRange(boundToRange(bmpTool, mark.AABBBounds, true));
                 });
             }
+            if (avoidMarks.length > 0) {
+                avoidMarks.forEach(avoid => {
+                    if (vutils.isString(avoid)) {
+                        getNoneGroupMarksByName(this.getRootNode(), avoid).forEach(avoidMark => {
+                            avoidMark.AABBBounds && bitmap.setRange(boundToRange(bmpTool, avoidMark.AABBBounds, true));
+                        });
+                    }
+                    else if (avoid.AABBBounds) {
+                        bitmap.setRange(boundToRange(bmpTool, avoid.AABBBounds, true));
+                    }
+                });
+            }
             for (let i = 0; i < labels.length; i++) {
                 if (labels[i].visible === false) {
                     continue;
                 }
-                const text = vrender.createText(labels[i]);
-                const baseMark = this._baseMarks?.[i];
+                const text = labels[i];
+                const baseMark = this._idToGraphic.get(text.attribute.id);
                 text.update();
                 if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
                     if (!checkBounds) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
-                        result.push({ ...text.attribute });
+                        result.push(text);
                         continue;
                     }
                     if (checkBounds && baseMark?.AABBBounds && canPlaceInside(text.AABBBounds, baseMark?.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
-                        result.push({ ...text.attribute });
+                        result.push(text);
                         continue;
                     }
                 }
@@ -1740,28 +1832,33 @@
                 for (let j = 0; j < strategy.length; j++) {
                     hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling);
                     if (hasPlace !== false) {
-                        result.push({
-                            ...text.attribute,
-                            x: hasPlace.x,
-                            y: hasPlace.y
-                        });
+                        text.setAttributes({ x: hasPlace.x, y: hasPlace.y });
+                        result.push(text);
                         break;
                     }
                 }
-                !hasPlace && !hideOnHit && result.push({ ...text.attribute });
+                if (!hasPlace && clampForce) {
+                    const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
+                    if (!(dx === 0 && dy === 0) &&
+                        canPlace(bmpTool, bitmap, {
+                            x1: text.AABBBounds.x1 + dx,
+                            x2: text.AABBBounds.x2 + dx,
+                            y1: text.AABBBounds.y1 + dy,
+                            y2: text.AABBBounds.y2 + dy
+                        })) {
+                        text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
+                        bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
+                        result.push(text);
+                        continue;
+                    }
+                }
+                !hasPlace && !hideOnHit && result.push(text);
             }
             if (vutils.isFunction(this.onAfterLabelOverlap)) {
                 this.onAfterLabelOverlap(bitmap);
             }
             return result;
         }
-        getBaseMarks() {
-            const baseMarkGroup = this.getBaseMarkGroup();
-            if (!baseMarkGroup) {
-                return;
-            }
-            return baseMarkGroup.getChildren();
-        }
         getBaseMarkGroup() {
             const { baseMarkGroupName } = this.attribute;
             if (!baseMarkGroupName) {
@@ -1786,17 +1883,16 @@
             const easing = animationConfig.easing ?? DefaultLabelAnimation.easing;
             const delay = animationConfig.delay ?? 0;
             const currentTextMap = new Map();
-            const prevTextMap = this._textMap || new Map();
+            const prevTextMap = this._graphicToText || new Map();
             const texts = [];
-            labels.forEach((label, index) => {
-                const text = this._createLabelText(label);
-                const relatedGraphic = this._relationMap.get(label._relatedIndex);
+            labels.forEach((text, index) => {
+                const relatedGraphic = this._idToGraphic.get(text.attribute.id);
                 const state = prevTextMap?.get(relatedGraphic) ? 'update' : 'enter';
                 if (state === 'enter') {
                     texts.push(text);
                     currentTextMap.set(relatedGraphic, text);
                     if (!disableAnimation && relatedGraphic) {
-                        const { from, to } = getAnimationAttributes(label, 'fadeIn');
+                        const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
                         relatedGraphic.onAnimateBind = () => {
                             text.setAttributes(from);
@@ -1846,7 +1942,7 @@
                     });
                 }
             });
-            this._textMap = currentTextMap;
+            this._graphicToText = currentTextMap;
         }
         _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
             const listener = (event) => {
@@ -1897,30 +1993,34 @@
             return listener;
         }
         _smartInvert(labels) {
-            if (this.attribute.smartInvert === false) {
-                return;
-            }
+            const option = (this.attribute.smartInvert || {});
+            const { textType, contrastRatiosThreshold, alternativeColors } = option;
             for (let i = 0; i < labels.length; i++) {
-                const label = labels?.[i];
+                const label = labels[i];
                 if (!label) {
                     continue;
                 }
-                const isInside = canPlaceInside(vrender.createText(label).AABBBounds, this._relationMap.get(label._relatedIndex)?.AABBBounds);
-                if (label.stroke && label.lineWidth > 0) {
-                    label.fill = labelSmartInvert(label.fill, label.stroke, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
+                const baseMark = this._idToGraphic.get(label.attribute.id);
+                const isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds);
+                if (label.attribute.stroke && label.attribute.lineWidth > 0) {
+                    label.setAttributes({
+                        fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+                    });
                 }
                 else if (isInside) {
-                    const baseMark = this._relationMap.get(label._relatedIndex);
                     const backgroundColor = baseMark.attribute.fill;
-                    const foregroundColor = label.fill;
-                    label.fill = labelSmartInvert(foregroundColor, backgroundColor, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
+                    const foregroundColor = label.attribute.fill;
+                    label.setAttributes({
+                        fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+                    });
                 }
-                else if (label.lineWidth > 0) {
-                    const baseMark = this._relationMap.get(label._relatedIndex);
-                    label.stroke = baseMark.attribute.fill;
-                    const backgroundColor = label.stroke;
-                    const foregroundColor = label.fill;
-                    label.fill = labelSmartInvert(foregroundColor, backgroundColor, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
+                else if (label.attribute.lineWidth > 0) {
+                    const backgroundColor = label.attribute.stroke;
+                    const foregroundColor = label.attribute.fill;
+                    label.setAttributes({
+                        stroke: baseMark.attribute.fill,
+                        fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+                    });
                 }
             }
         }
@@ -2375,6 +2475,7 @@
             },
             startSymbol: {
                 visible: false,
+                autoRotate: true,
                 symbolType: 'triangle',
                 size: 12,
                 refX: 0,
@@ -2387,6 +2488,7 @@
             },
             endSymbol: {
                 visible: false,
+                autoRotate: true,
                 symbolType: 'triangle',
                 size: 12,
                 refX: 0,
@@ -2458,6 +2560,7 @@
             this.add(line);
         }
         renderSymbol(attribute, dim) {
+            const { autoRotate = true } = attribute;
             let symbol;
             if (attribute?.visible) {
                 const startAngle = this._startAngle;
@@ -2486,7 +2589,7 @@
                     ...position,
                     symbolType: symbolType,
                     size,
-                    angle: rotate + refAngle,
+                    angle: autoRotate ? rotate + refAngle : 0,
                     strokeBoundsBuffer: 0,
                     ...style
                 });
@@ -2522,6 +2625,7 @@
         AXIS_ELEMENT_NAME["gridRegion"] = "axis-grid-region";
         AXIS_ELEMENT_NAME["line"] = "axis-line";
         AXIS_ELEMENT_NAME["background"] = "axis-background";
+        AXIS_ELEMENT_NAME["axisLabelBackground"] = "axis-label-background";
     })(exports.AXIS_ELEMENT_NAME || (exports.AXIS_ELEMENT_NAME = {}));
     exports.AxisStateValue = void 0;
     (function (AxisStateValue) {
@@ -2704,7 +2808,7 @@
             }
         };
         _renderInner(container) {
-            const { title, label, tick, line, grid, items, panel } = this.attribute;
+            const { title, label, tick, line, grid, items } = this.attribute;
             const axisContainer = vrender.createGroup({ x: 0, y: 0, zIndex: 1 });
             axisContainer.name = exports.AXIS_ELEMENT_NAME.axisContainer;
             axisContainer.id = this._getNodeId('container');
@@ -2728,7 +2832,9 @@
                     items.forEach((axisItems, layer) => {
                         const layerLabelGroup = this.renderLabels(labelGroup, axisItems, layer);
                         const labels = layerLabelGroup.getChildren();
-                        this.handleLabelsOverlap(labels, axisItems, layer, items.length);
+                        this.beforeLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
+                        this.handleLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
+                        this.afterLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
                     });
                 }
                 if (grid?.visible) {
@@ -2738,22 +2844,6 @@
             if (title?.visible) {
                 this.renderTitle(axisContainer);
             }
-            if (panel && panel.visible) {
-                const axisContainerBounds = axisContainer.AABBBounds;
-                const bgRect = vrender.createRect({
-                    x: axisContainerBounds.x1,
-                    y: axisContainerBounds.y1,
-                    width: axisContainerBounds.width(),
-                    height: axisContainerBounds.height(),
-                    ...panel.style
-                });
-                bgRect.name = exports.AXIS_ELEMENT_NAME.background;
-                bgRect.id = this._getNodeId('background');
-                if (!vutils.isEmpty(panel.state)) {
-                    bgRect.states = vutils.merge({}, DEFAULT_STATES$2, panel.state);
-                }
-                axisContainer.insertBefore(bgRect, axisContainer.firstChild);
-            }
         }
         renderTicks(container) {
             const tickLineItems = this.getTickLineItems();
@@ -2768,7 +2858,7 @@
                 line.name = exports.AXIS_ELEMENT_NAME.tick;
                 line.id = this._getNodeId(item.id);
                 if (vutils.isEmpty(this.attribute.tick?.state)) {
-                    line.states = null;
+                    line.states = DEFAULT_STATES$2;
                 }
                 else {
                     const data = this.data[index];
@@ -2794,7 +2884,7 @@
                         line.name = exports.AXIS_ELEMENT_NAME.subTick;
                         line.id = this._getNodeId(`${index}`);
                         if (vutils.isEmpty(subTick.state)) {
-                            line.states = null;
+                            line.states = DEFAULT_STATES$2;
                         }
                         else {
                             const subTickLineState = vutils.merge({}, DEFAULT_STATES$2, subTick.state);
@@ -2831,7 +2921,7 @@
                 text.name = exports.AXIS_ELEMENT_NAME.label;
                 text.id = this._getNodeId(`layer${layer}-label-${item.id}`);
                 if (vutils.isEmpty(this.attribute.label?.state)) {
-                    text.states = null;
+                    text.states = DEFAULT_STATES$2;
                 }
                 else {
                     const labelState = vutils.merge({}, DEFAULT_STATES$2, this.attribute.label.state);
@@ -3280,7 +3370,7 @@
                 ? orient === 'top' || orient === 'bottom'
                     ? null
                     : limitLength
-                : limitLength / Math.sin(label.attribute.angle);
+                : Math.abs(limitLength / Math.sin(label.attribute.angle));
             label.setAttributes({
                 maxLineWidth: limitLabelLength,
                 ellipsis
@@ -3288,6 +3378,67 @@
         });
     }
 
+    function alignAxisLabels(labels, start, containerSize, orient, align) {
+        if (orient === 'right' || orient === 'left') {
+            if (align === 'left') {
+                const flag = orient === 'right' ? 0 : -1;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        x: start + containerSize * flag,
+                        textAlign: 'left'
+                    });
+                });
+            }
+            else if (align === 'right') {
+                const flag = orient === 'right' ? 1 : 0;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        x: start + containerSize * flag,
+                        textAlign: 'right'
+                    });
+                });
+            }
+            else if (align === 'center') {
+                const flag = orient === 'right' ? 1 : -1;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        x: start + containerSize * 0.5 * flag,
+                        textAlign: 'center'
+                    });
+                });
+            }
+        }
+        else if (orient === 'bottom' || orient === 'top') {
+            if (align === 'top') {
+                const flag = orient === 'bottom' ? 0 : -1;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        y: start + containerSize * flag,
+                        textBaseline: 'top'
+                    });
+                });
+            }
+            else if (align === 'bottom') {
+                const flag = orient === 'bottom' ? 1 : 0;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        y: start + containerSize * flag,
+                        textBaseline: 'bottom'
+                    });
+                });
+            }
+            else if (align === 'middle') {
+                const flag = orient === 'bottom' ? 1 : -1;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        y: start + containerSize * 0.5 * flag,
+                        textBaseline: 'middle'
+                    });
+                });
+            }
+        }
+    }
+
     function getCirclePoints(center, count, radius, startAngle, endAngle) {
         const points = [];
         const range = endAngle - startAngle;
@@ -3305,6 +3456,25 @@
                 this.setMode(mode);
             }
         }
+        _renderInner(container) {
+            super._renderInner(container);
+            const { panel } = this.attribute;
+            if (panel && panel.visible) {
+                const axisContainer = this.axisContainer;
+                const axisContainerBounds = axisContainer.AABBBounds;
+                const bgRect = vrender.createRect({
+                    x: axisContainerBounds.x1,
+                    y: axisContainerBounds.y1,
+                    width: axisContainerBounds.width(),
+                    height: axisContainerBounds.height(),
+                    ...panel.style
+                });
+                bgRect.name = exports.AXIS_ELEMENT_NAME.background;
+                bgRect.id = this._getNodeId('background');
+                bgRect.states = vutils.merge({}, DEFAULT_STATES$1, panel.state ?? {});
+                axisContainer.insertBefore(bgRect, axisContainer.firstChild);
+            }
+        }
         renderLine(container) {
             const { start, end, line } = this.attribute;
             const { startSymbol, endSymbol, style, breakRange, breakShape, breakShapeStyle, state, ...restLineAttrs } = line;
@@ -3469,13 +3639,11 @@
                     textBaseline,
                     ...textStyle
                 },
-                state: vutils.isEmpty(state)
-                    ? null
-                    : {
-                        text: state.text,
-                        shape: state.shape,
-                        panel: state.background
-                    }
+                state: {
+                    text: vutils.merge({}, DEFAULT_STATES$1, state?.text),
+                    shape: vutils.merge({}, DEFAULT_STATES$1, state?.shape),
+                    panel: vutils.merge({}, DEFAULT_STATES$1, state?.background)
+                }
             };
             attrs.angle = angle;
             if (shape && shape.visible) {
@@ -3612,24 +3780,21 @@
             }
             return base;
         }
-        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
-            if (vutils.isEmpty(labelShapes)) {
-                return;
+        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            const orient = this.attribute.orient;
+            if (orient === 'left' || orient === 'right') {
+                rotateYAxis(orient, labelShapes);
             }
-            const { verticalLimitSize, label, title, line, tick, orient } = this.attribute;
-            const labelSpace = label.space ?? 4;
-            let limitLength = verticalLimitSize;
-            let titleHeight = 0;
-            let titleSpacing = 0;
-            const axisLineWidth = line?.visible ? line.style.lineWidth ?? 1 : 0;
-            const tickLength = tick?.visible ? tick.length ?? 4 : 0;
-            if (title?.visible) {
-                titleHeight = measureTextSize(title.text, title.textStyle).height;
-                titleSpacing = title.space;
+            else if (orient === 'bottom' || orient === 'top') {
+                rotateXAxis(orient, labelShapes);
             }
-            if (limitLength) {
-                limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
+        }
+        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            if (vutils.isEmpty(labelShapes)) {
+                return;
             }
+            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 } = label;
             if (vutils.isFunction(layoutFunc)) {
                 layoutFunc(labelShapes, labelData, layer, this);
@@ -3657,6 +3822,79 @@
                 }
             }
         }
+        afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            const { verticalLimitSize, orient } = this.attribute;
+            const isHorizontal = orient === 'bottom' || orient === 'top';
+            const axisLabelContainerBounds = labelContainer.AABBBounds;
+            let axisLabelContainerSize = isHorizontal ? axisLabelContainerBounds.height() : axisLabelContainerBounds.width();
+            const { verticalMinSize } = this.attribute;
+            if (vutils.isValidNumber(verticalMinSize) && (!vutils.isValidNumber(verticalLimitSize) || verticalMinSize <= verticalLimitSize)) {
+                const minSize = this._getAxisLabelLimitLength(verticalMinSize, layerCount);
+                axisLabelContainerSize = Math.max(axisLabelContainerSize, minSize);
+                let x;
+                let y;
+                if (orient === 'left') {
+                    x = axisLabelContainerBounds.x2 - axisLabelContainerSize;
+                    y = axisLabelContainerBounds.y1;
+                }
+                else if (orient === 'right') {
+                    x = axisLabelContainerBounds.x1;
+                    y = axisLabelContainerBounds.y1;
+                }
+                else if (orient === 'top') {
+                    x = axisLabelContainerBounds.x1;
+                    y = axisLabelContainerBounds.y2 - axisLabelContainerSize;
+                }
+                else if (orient === 'bottom') {
+                    x = axisLabelContainerBounds.x1;
+                    y = axisLabelContainerBounds.y1;
+                }
+                const bgRect = vrender.createRect({
+                    x,
+                    y,
+                    width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
+                    height: isHorizontal ? axisLabelContainerSize : axisLabelContainerBounds.height(),
+                    pickable: false
+                });
+                bgRect.name = exports.AXIS_ELEMENT_NAME.axisLabelBackground;
+                bgRect.id = this._getNodeId('axis-label-background');
+                labelContainer.insertBefore(bgRect, labelContainer.firstChild);
+            }
+            if (vutils.isValid(this.attribute.label.containerAlign)) {
+                let start;
+                if (orient === 'left') {
+                    start = axisLabelContainerBounds.x2;
+                }
+                else if (orient === 'right') {
+                    start = axisLabelContainerBounds.x1;
+                }
+                else if (orient === 'top') {
+                    start = axisLabelContainerBounds.y2;
+                }
+                else if (orient === 'bottom') {
+                    start = axisLabelContainerBounds.y1;
+                }
+                alignAxisLabels(labelShapes, start, axisLabelContainerSize, orient, this.attribute.label.containerAlign);
+            }
+        }
+        _getAxisLabelLimitLength(limitSize, layerCount) {
+            const { label, title, line, tick } = this.attribute;
+            const labelSpace = label.space ?? 4;
+            let limitLength = limitSize;
+            let titleHeight = 0;
+            let titleSpacing = 0;
+            const axisLineWidth = line?.visible ? line.style.lineWidth ?? 1 : 0;
+            const tickLength = tick?.visible ? tick.length ?? 4 : 0;
+            if (title?.visible) {
+                titleHeight = measureTextSize(title.text, title.textStyle).height;
+                const padding = vutils.normalizePadding(title.padding);
+                titleSpacing = title.space + padding[0] + padding[2];
+            }
+            if (limitLength) {
+                limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
+            }
+            return limitLength;
+        }
     }
 
     class CircleAxis extends AxisBase {
@@ -3753,13 +3991,11 @@
                     textAlign: 'center',
                     ...textStyle
                 },
-                state: vutils.isEmpty(state)
-                    ? null
-                    : {
-                        text: state.text,
-                        shape: state.shape,
-                        panel: state.background
-                    }
+                state: {
+                    text: vutils.merge({}, DEFAULT_STATES$1, state?.text),
+                    shape: vutils.merge({}, DEFAULT_STATES$1, state?.shape),
+                    panel: vutils.merge({}, DEFAULT_STATES$1, state?.background)
+                }
             };
             const { angle } = restAttrs;
             attrs.angle = angle;
@@ -3911,7 +4147,13 @@
             }
             return base;
         }
-        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
+        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
+        }
+        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
+        }
+        afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             return;
         }
     }
@@ -4124,7 +4366,7 @@
             }
         },
         middleHandlerStyle: {
-            visible: false,
+            visible: true,
             background: {
                 size: 8,
                 style: {
@@ -4142,12 +4384,14 @@
             }
         },
         startHandlerStyle: {
+            visible: true,
             symbolType: 'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',
             fill: 'white',
             stroke: '#B0C8F9',
             lineWidth: 0.5
         },
         endHandlerStyle: {
+            visible: true,
             symbolType: 'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',
             fill: 'white',
             stroke: '#B0C8F9',
@@ -4219,7 +4463,7 @@
         _layoutAttrFromConfig;
         constructor(attributes) {
             super(vutils.merge({}, DataZoom.defaultAttributes, attributes));
-            const { start, end, size, orient, showDetail, position, previewData, previewCallbackX, previewCallbackY, previewCallbackX1, previewCallbackY1 } = this.attribute;
+            const { start, end, size, orient, showDetail, position, previewData, previewCallbackX, previewCallbackY, previewCallbackX1, previewCallbackY1, updateStateCallback } = this.attribute;
             const { width, height } = size;
             start && (this.state.start = start);
             end && (this.state.end = end);
@@ -4240,6 +4484,7 @@
             vutils.isFunction(previewCallbackY) && (this._previewCallbackY = previewCallbackY);
             vutils.isFunction(previewCallbackX1) && (this._previewCallbackX1 = previewCallbackX1);
             vutils.isFunction(previewCallbackY1) && (this._previewCallbackY1 = previewCallbackY1);
+            vutils.isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
         }
         bindEvents() {
             const { showDetail, brushSelect } = this.attribute;
@@ -4268,9 +4513,9 @@
             if (this._selectedPreviewGroup) {
                 this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
             }
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.addEventListener('pointermove', this._onHandlerPointerMove.bind(this));
-                vrender.vglobal.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
+            if (vrender.global.env === 'browser') {
+                vrender.global.addEventListener('pointermove', this._onHandlerPointerMove.bind(this));
+                vrender.global.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
             }
             this.addEventListener('pointermove', this._onHandlerPointerMove);
             this.addEventListener('pointerup', this._onHandlerPointerUp);
@@ -4514,7 +4759,7 @@
             if (this._layoutAttrFromConfig) {
                 return this._layoutAttrFromConfig;
             }
-            const { position: positionConfig, size, orient, middleHandlerStyle } = this.attribute;
+            const { position: positionConfig, size, orient, middleHandlerStyle, startHandlerStyle, endHandlerStyle } = this.attribute;
             const { width: widthConfig, height: heightConfig } = size;
             const middleHandlerSize = middleHandlerStyle?.background?.size ?? 10;
             let width;
@@ -4543,6 +4788,24 @@
                 height = heightConfig;
                 position = positionConfig;
             }
+            const startHandlerSize = startHandlerStyle?.size ?? (this._isHorizontal ? height : width);
+            const endHandlerSize = endHandlerStyle?.size ?? (this._isHorizontal ? height : width);
+            if (startHandlerStyle?.visible) {
+                if (this._isHorizontal) {
+                    width -= (startHandlerSize + endHandlerSize) / 2;
+                    position = {
+                        x: position.x + startHandlerSize / 2,
+                        y: position.y
+                    };
+                }
+                else {
+                    height -= (startHandlerSize + endHandlerSize) / 2;
+                    position = {
+                        x: position.x,
+                        y: position.y + startHandlerSize
+                    };
+                }
+            }
             this._layoutAttrFromConfig = {
                 position,
                 width,
@@ -4797,10 +5060,9 @@
             else {
                 this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild('selectedPreviewArea', { curveType: 'basis' }, 'area');
             }
-            const { position, size, selectedBackgroundChartStyle } = this.attribute;
-            const { width, height } = size;
+            const { selectedBackgroundChartStyle } = this.attribute;
             const { start, end } = this.state;
-            this.computeBasePoints();
+            const { position, width, height } = this.getLayoutAttrFromConfig();
             this._selectedPreviewGroupClip.setAttributes({
                 x: this._isHorizontal ? position.x + start * width : position.x,
                 y: this._isHorizontal ? position.y : position.y + start * height,
@@ -4850,6 +5112,7 @@
                 this.state.end = end;
                 if (startAttr !== this.state.start || endAttr !== this.state.end) {
                     this.setAttributes({ start, end });
+                    this._updateStateCallback && this._updateStateCallback(start, end);
                 }
             }
         }
@@ -6233,7 +6496,9 @@
             const innerGroupBounds = innerGroup.AABBBounds;
             const innerGroupWidth = innerGroupBounds.width();
             const innerGroupHeight = innerGroupBounds.height();
-            const itemGroupWidth = this._itemWidthByUser || innerGroupWidth + parsedPadding[1] + parsedPadding[3];
+            const itemGroupWidth = vutils.isValid(this.attribute.item.width)
+                ? this.attribute.item.width
+                : innerGroupWidth + parsedPadding[1] + parsedPadding[3];
             const itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
             itemGroup.attribute.width = itemGroupWidth;
             itemGroup.attribute.height = itemGroupHeight;
@@ -6925,9 +7190,9 @@
             e.stopPropagation();
             this._currentHandler = e.target;
             this._prePos = this._isHorizontal ? e.clientX : e.clientY;
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.addEventListener('pointermove', this._onHandlerPointerMove);
-                vrender.vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.addEventListener('pointermove', this._onHandlerPointerMove);
+                vrender.global.addEventListener('pointerup', this._onHandlerPointerUp);
             }
             else {
                 this._currentHandler.addEventListener('pointermove', this._onHandlerPointerMove);
@@ -6969,9 +7234,9 @@
         _onHandlerPointerUp = (e) => {
             e.preventDefault();
             this._currentHandler = null;
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.removeEventListener('pointermove', this._onHandlerPointerMove);
-                vrender.vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.removeEventListener('pointermove', this._onHandlerPointerMove);
+                vrender.global.removeEventListener('pointerup', this._onHandlerPointerUp);
             }
             else {
                 const currentTarget = e.target;
@@ -6983,9 +7248,9 @@
         _onTrackPointerdown = (e) => {
             e.stopPropagation();
             this._prePos = this._isHorizontal ? e.clientX : e.clientY;
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.addEventListener('pointermove', this._onTrackPointerMove);
-                vrender.vglobal.addEventListener('pointerup', this._onTrackPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.addEventListener('pointermove', this._onTrackPointerMove);
+                vrender.global.addEventListener('pointerup', this._onTrackPointerUp);
             }
             else {
                 this._track.addEventListener('pointermove', this._onTrackPointerMove);
@@ -7037,9 +7302,9 @@
         };
         _onTrackPointerUp = (e) => {
             e.preventDefault();
-            if (vrender.vglobal.env === 'browser') {
-                vrender.vglobal.removeEventListener('pointermove', this._onTrackPointerMove);
-                vrender.vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
+            if (vrender.global.env === 'browser') {
+                vrender.global.removeEventListener('pointermove', this._onTrackPointerMove);
+                vrender.global.removeEventListener('pointerup', this._onTrackPointerUp);
             }
             else {
                 this._track.removeEventListener('pointermove', this._onTrackPointerMove);
@@ -8580,7 +8845,7 @@
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
             this._isReachEnd = false;
             this._tickTime = Date.now();
-            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this, true));
+            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this, true));
         };
         _play = (isFirstPlay) => {
             const now = Date.now();
@@ -8603,7 +8868,7 @@
                 (this._direction === 'reverse' && this._dataIndex <= this._minIndex)) {
                 this._isReachEnd = true;
             }
-            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this, false));
+            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this, false));
         };
         _updateDataIndex = (dataIndex) => {
             this._dataIndex = dataIndex;
@@ -8612,7 +8877,7 @@
         _playEnd = () => {
             this._isPlaying = false;
             this._controller.togglePlay();
-            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
+            vrender.global.getCancelAnimationFrame()(this._rafId);
             this._activeIndex = -1;
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
         };
@@ -8621,7 +8886,7 @@
                 return;
             }
             this._isPlaying = false;
-            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
+            vrender.global.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
         };
@@ -8732,7 +8997,7 @@
             }
             this._startTime = Date.now() - this._elapsed;
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
-            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
+            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this));
         };
         _play = () => {
             this._elapsed = Date.now() - this._startTime;
@@ -8742,11 +9007,11 @@
                 this._playEnd();
                 return;
             }
-            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
+            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this));
         };
         _playEnd = () => {
             this._isPlaying = false;
-            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
+            vrender.global.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
         };
@@ -8756,7 +9021,7 @@
             }
             this._isPlaying = false;
             this._elapsed = Date.now() - this._startTime;
-            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
+            vrender.global.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
         };
@@ -9501,7 +9766,7 @@
         }
     }
 
-    const version = "0.14.0-alpha.0";
+    const version = "0.14.0-alpha.10";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;