@visactor/vrender-components 0.14.3-alpha.0 → 0.14.3-alpha.1

package/dist/index.js

@@ -1587,7 +1587,7 @@
         setBitmapTool(bmpTool) {
             this._bmpTool = bmpTool;
         }
-        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray) {
+        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
             const arcs = [];
             return arcs;
         }
@@ -1701,15 +1701,20 @@
                 labels.push(text);
             }
             if (this.attribute.type === 'arc') {
-                const arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray);
+                const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), { text: '...' });
+                const ellipsisText = this._createLabelText(ellipsisLabelAttribute);
+                const ellipsisTextBounds = this.getGraphicBounds(ellipsisText);
+                const ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
+                const arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
                 for (let i = 0; i < data.length; i++) {
                     const textData = data[i];
-                    const basedArc = arcs.find(arc => arc.labelText === textData.text);
+                    const basedArc = arcs.find(arc => arc.refDatum.id === textData.id);
                     const labelAttribute = {
                         visible: basedArc.labelVisible,
                         x: basedArc.labelPosition.x,
                         y: basedArc.labelPosition.y,
                         angle: basedArc.angle,
+                        maxLineWidth: basedArc.labelLimit,
                         points: (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointA) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointB) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointC)
                             ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
                             : undefined
@@ -1774,20 +1779,6 @@
                         continue;
                     }
                 }
-                if (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 });
-                        result.push(text);
-                        continue;
-                    }
-                }
                 let hasPlace = false;
                 for (let j = 0; j < strategy.length; j++) {
                     hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling);
@@ -1847,13 +1838,13 @@
             const prevTextMap = this._graphicToText || new Map();
             const texts = [];
             labels.forEach((text, index) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
                 const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
                     ? vrender.createLine({
                         visible: (_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : true,
                         stroke: (_f = (_e = (_d = text.attribute) === null || _d === void 0 ? void 0 : _d.line) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.fill,
-                        lineWidth: 1,
-                        points: (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.points
+                        lineWidth: (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.lineWidth) !== null && _k !== void 0 ? _k : 1,
+                        points: (_l = text.attribute) === null || _l === void 0 ? void 0 : _l.points
                     })
                     : undefined;
                 const relatedGraphic = this._idToGraphic.get(text.attribute.id);
@@ -1895,7 +1886,7 @@
                         prevText.animate().to(text.attribute, duration, easing);
                         if (prevLabel.labelLine) {
                             prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
-                                points: (_j = text.attribute) === null || _j === void 0 ? void 0 : _j.points
+                                points: (_m = text.attribute) === null || _m === void 0 ? void 0 : _m.points
                             }), duration, easing);
                         }
                         if (animationConfig.increaseEffect !== false &&
@@ -1909,7 +1900,7 @@
                     else {
                         prevLabel.text.setAttributes(text.attribute);
                         if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
-                            prevLabel.labelLine.setAttributes({ points: (_k = text.attribute) === null || _k === void 0 ? void 0 : _k.points });
+                            prevLabel.labelLine.setAttributes({ points: (_o = text.attribute) === null || _o === void 0 ? void 0 : _o.points });
                         }
                     }
                 }
@@ -2386,15 +2377,18 @@
             }
             return { x: 0, y: 0 };
         }
-        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray) {
+        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
+            var _a;
             this._arcLeft.clear();
             this._arcRight.clear();
+            this._ellipsisWidth = ellipsisWidth;
             const { width, height } = attribute;
+            const centerOffset = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _a !== void 0 ? _a : 0;
             currentMarks.forEach((currentMark, index) => {
                 var _a, _b;
                 const graphicAttribute = currentMark.attribute;
                 const radiusRatio = this.computeLayoutOuterRadius(graphicAttribute.outerRadius, width, height);
-                const radius = this.computeRadius(radiusRatio, width, height);
+                const radius = this.computeRadius(radiusRatio, width, height, centerOffset);
                 const center = { x: (_a = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.y) !== null && _b !== void 0 ? _b : 0 };
                 const item = data[index];
                 const textBounds = textBoundsArray[index];
@@ -2404,7 +2398,7 @@
                 const arcMiddle = circlePoint(center.x, center.y, graphicAttribute.outerRadius, arcMiddleAngle);
                 const outerArcMiddle = circlePoint(center.x, center.y, radius + attribute.line.line1MinLength, arcMiddleAngle);
                 const arc = new ArcInfo(item, arcMiddle, outerArcMiddle, arcQuadrant, intervalAngle, arcMiddleAngle);
-                arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius), arc.middleAngle);
+                arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius, centerOffset), arc.middleAngle);
                 arc.labelSize = {
                     width: textBounds.x2 - textBounds.x1,
                     height: textBounds.y2 - textBounds.y1
@@ -2430,8 +2424,9 @@
             return arcs;
         }
         _layoutInsideLabels(arcs, attribute, currentMarks) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
+            const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
             const innerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.innerRadius, attribute.width, attribute.height);
             const outerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
             const labelConfig = attribute;
@@ -2439,8 +2434,8 @@
             arcs.forEach((arc) => {
                 var _a, _b;
                 const { labelSize, radian } = arc;
-                const innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, 1);
-                const outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, 1);
+                const innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, centerOffset, 1);
+                const outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, centerOffset, 1);
                 const minRadian = connectLineRadian(outerRadius, labelSize.height);
                 let limit;
                 if (radian < minRadian) {
@@ -2539,13 +2534,14 @@
             return arcs;
         }
         _computeX(arc, attribute, currentMarks) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
+            const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
             const plotLayout = { width: center.x * 2, height: center.y * 2 };
             const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
             const line1MinLength = attribute.line.line1MinLength;
             const line2MinLength = attribute.line.line2MinLength;
-            const labelLayoutAlign = (_e = attribute.layout) === null || _e === void 0 ? void 0 : _e.align;
+            const labelLayoutAlign = (_f = attribute.layout) === null || _f === void 0 ? void 0 : _f.align;
             const spaceWidth = attribute.spaceWidth;
             const { labelPosition, quadrant, pointB } = arc;
             if (!vutils.isValidNumber(pointB.x * pointB.y)) {
@@ -2553,7 +2549,7 @@
                 labelPosition.x = NaN;
                 arc.labelLimit = 0;
             }
-            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
+            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
             const flag = isQuadrantLeft(quadrant) ? -1 : 1;
             let cx = 0;
             const restWidth = flag > 0 ? plotLayout.width - pointB.x : pointB.x;
@@ -2577,16 +2573,17 @@
                     break;
             }
             labelWidth = Math.max(this._ellipsisWidth, labelWidth);
+            arc.labelLimit = labelWidth;
             arc.pointC = { x: cx, y: labelPosition.y };
+            const targetCenterOffset = 0.5 * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width);
             if (labelLayoutAlign === 'edge') {
                 const alignOffset = 0;
-                labelPosition.x = flag > 0 ? plotLayout.width + alignOffset : alignOffset;
+                labelPosition.x = (flag > 0 ? plotLayout.width + alignOffset : alignOffset) - flag * targetCenterOffset;
             }
             else {
                 const alignOffset = 0;
-                labelPosition.x = cx + alignOffset + flag * (spaceWidth + 0.5 * arc.labelSize.width);
+                labelPosition.x = cx + alignOffset + flag * (spaceWidth + 0.5 * targetCenterOffset);
             }
-            arc.labelLimit = labelWidth;
         }
         _computeAlignOffset(align, labelWidth, alignFlag) {
             switch (align) {
@@ -2770,7 +2767,7 @@
             return -1;
         }
         _computePointB(arc, r, attribute, currentMarks) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const labelConfig = attribute;
             const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
             const line1MinLength = labelConfig.line.line1MinLength;
@@ -2783,7 +2780,8 @@
             }
             else {
                 const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
-                const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
+                const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
+                const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
                 const { labelPosition, quadrant } = arc;
                 const outerR = Math.max(radius + line1MinLength, currentMarks[0].attribute.outerRadius);
                 const rd = r - outerR;
@@ -2807,13 +2805,14 @@
             }
         }
         _computeYRange(arc, attribute, currentMarks) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
             const plotRect = { width: center.x * 2, height: center.y * 2 };
             const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
             const line1MinLength = attribute.line.line1MinLength;
             const { width, height } = plotRect;
-            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
+            const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
+            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
             const r = this._computeLayoutRadius(height / 2, attribute, currentMarks);
             const cx = Math.abs(arc.center.x - width / 2);
             const cy = arc.center.y - height / 2;
@@ -2872,11 +2871,13 @@
             arc.labelYRange = [min, max];
         }
         _computeLayoutRadius(halfYLength, attribute, currentMarks) {
+            var _a;
             const labelConfig = attribute;
             const layoutArcGap = labelConfig.layoutArcGap;
             const line1MinLength = labelConfig.line.line1MinLength;
             const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
-            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
+            const centerOffset = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _a !== void 0 ? _a : 0;
+            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
             const outerR = radius + line1MinLength;
             const a = outerR - layoutArcGap;
             return Math.max((a ** 2 + halfYLength ** 2) / (2 * a), outerR);
@@ -2942,8 +2943,9 @@
                 }
             }
         }
-        computeRadius(r, width, height, k) {
-            return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (vutils.isNil(k) ? 1 : k);
+        computeRadius(r, width, height, centerOffset, k) {
+            var _a;
+            return ((_a = this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (vutils.isNil(k) ? 1 : k) + centerOffset) !== null && _a !== void 0 ? _a : 0);
         }
         computeLayoutRadius(width, height) {
             return Math.min(width / 2, height / 2);
@@ -2951,9 +2953,10 @@
         computeLayoutOuterRadius(r, width, height) {
             return r / (Math.min(width, height) / 2);
         }
-        computeDatumRadius(width, height, outerRadius) {
+        computeDatumRadius(width, height, outerRadius, centerOffset) {
+            var _a;
             const outerRadiusRatio = this.computeLayoutOuterRadius(outerRadius, width, height);
-            return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio;
+            return (_a = this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio + centerOffset) !== null && _a !== void 0 ? _a : 0;
         }
     }
     ArcLabel.defaultAttributes = {
@@ -3838,10 +3841,8 @@
             textStyle = vutils.isFunction(textStyle)
                 ? vutils.merge({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer))
                 : textStyle;
-            textStyle = vutils.merge({
-                textAlign: this.getTextAlign(vector),
-                textBaseline: this.getTextBaseline(vector, inside)
-            }, textStyle);
+            const labelAlign = this.getLabelAlign(vector, inside, textStyle.angle);
+            textStyle = vutils.merge(labelAlign, textStyle);
             if (vutils.isFunction(textStyle.text)) {
                 textStyle.text = textStyle.text({
                     label: tickDatum.label,
@@ -4007,73 +4008,70 @@
             item.rotatedBounds = bounds;
         });
     }
-    function rotateYAxis(orient, items) {
-        let align = ['right', 'right', 'center', 'left', 'center', 'left', 'center', 'right', 'right'];
-        let baseline = ['middle', 'middle', 'top', 'top', 'middle', 'middle', 'bottom', 'bottom', 'middle'];
-        if (orient === 'right') {
-            align = ['left', 'right', 'right', 'right', 'left', 'left', 'left', 'left', 'right'];
-            baseline = ['middle', 'bottom', 'middle', 'top', 'top', 'top', 'middle', 'bottom', 'bottom'];
-        }
-        items.forEach((item, i) => {
-            let angle = item.attribute.angle || 0;
-            if (angle < 0) {
-                while (angle < 0) {
-                    angle += Math.PI * 2;
-                }
-            }
-            if (angle > 0) {
-                while (angle >= Math.PI * 2) {
-                    angle -= Math.PI * 2;
-                }
-            }
-            const step = angle / (Math.PI * 0.5);
-            let index;
-            if (step === Math.floor(step)) {
-                index = Math.floor(step) * 2;
+    function clampAngle(angle = 0) {
+        if (angle < 0) {
+            while (angle < 0) {
+                angle += Math.PI * 2;
             }
-            else {
-                index = Math.floor(step) * 2 + 1;
+        }
+        if (angle > 0) {
+            while (angle >= Math.PI * 2) {
+                angle -= Math.PI * 2;
             }
-            item.setAttributes({
-                textAlign: align[index],
-                textBaseline: baseline[index],
-                angle: angle
-            });
+        }
+        return angle;
+    }
+    function rotateYAxis(orient, items) {
+        items.forEach((item, i) => {
+            item.setAttributes(Object.assign(Object.assign({}, getYAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
         });
     }
     function rotateXAxis(orient, items) {
+        items.forEach(item => {
+            item.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
+        });
+    }
+    function getXAxisLabelAlign(orient, angle = 0) {
         let align = ['center', 'left', 'left', 'left', 'center', 'right', 'right', 'right', 'left'];
         let baseline = ['top', 'top', 'middle', 'bottom', 'bottom', 'bottom', 'middle', 'top', 'top'];
         if (orient === 'top') {
             align = ['center', 'right', 'right', 'right', 'center', 'left', 'left', 'left', 'right'];
             baseline = ['bottom', 'bottom', 'middle', 'top', 'top', 'top', 'middle', 'bottom', 'bottom'];
         }
-        items.forEach(item => {
-            let angle = item.attribute.angle || 0;
-            if (angle < 0) {
-                while (angle < 0) {
-                    angle += Math.PI * 2;
-                }
-            }
-            if (angle > 0) {
-                while (angle >= Math.PI * 2) {
-                    angle -= Math.PI * 2;
-                }
-            }
-            const step = angle / (Math.PI * 0.5);
-            let index;
-            if (step === Math.floor(step)) {
-                index = Math.floor(step) * 2;
-            }
-            else {
-                index = Math.floor(step) * 2 + 1;
-            }
-            item.setAttributes({
-                textAlign: align[index],
-                textBaseline: baseline[index],
-                angle
-            });
-        });
+        angle = clampAngle(angle);
+        const step = angle / (Math.PI * 0.5);
+        let index;
+        if (step === Math.floor(step)) {
+            index = Math.floor(step) * 2;
+        }
+        else {
+            index = Math.floor(step) * 2 + 1;
+        }
+        return {
+            textAlign: align[index],
+            textBaseline: baseline[index]
+        };
+    }
+    function getYAxisLabelAlign(orient, angle = 0) {
+        let align = ['right', 'right', 'center', 'left', 'center', 'left', 'center', 'right', 'right'];
+        let baseline = ['middle', 'middle', 'top', 'top', 'middle', 'middle', 'bottom', 'bottom', 'middle'];
+        if (orient === 'right') {
+            align = ['left', 'right', 'right', 'right', 'left', 'left', 'left', 'left', 'right'];
+            baseline = ['middle', 'bottom', 'middle', 'top', 'top', 'top', 'middle', 'bottom', 'bottom'];
+        }
+        angle = clampAngle(angle);
+        const step = angle / (Math.PI * 0.5);
+        let index;
+        if (step === Math.floor(step)) {
+            index = Math.floor(step) * 2;
+        }
+        else {
+            index = Math.floor(step) * 2 + 1;
+        }
+        return {
+            textAlign: align[index],
+            textBaseline: baseline[index]
+        };
     }
 
     function autoLimit(labels, config) {
@@ -4480,14 +4478,23 @@
             }
             return base;
         }
-        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        getLabelAlign(vector, inside, angle) {
             const orient = this.attribute.orient;
-            if (orient === 'left' || orient === 'right') {
-                rotateYAxis(orient, labelShapes);
-            }
-            else if (orient === 'bottom' || orient === 'top') {
-                rotateXAxis(orient, labelShapes);
+            if (vutils.isValidNumber(angle)) {
+                if (orient === 'top' || orient === 'bottom') {
+                    return getXAxisLabelAlign(orient, angle);
+                }
+                if (orient === 'left' || orient === 'right') {
+                    return getYAxisLabelAlign(orient, angle);
+                }
             }
+            return {
+                textAlign: this.getTextAlign(vector),
+                textBaseline: this.getTextBaseline(vector, inside)
+            };
+        }
+        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
         }
         handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             if (vutils.isEmpty(labelShapes)) {
@@ -4835,6 +4842,12 @@
         afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             return;
         }
+        getLabelAlign(vector, inside, angle) {
+            return {
+                textAlign: this.getTextAlign(vector),
+                textBaseline: this.getTextBaseline(vector)
+            };
+        }
     }
     CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
 
@@ -5725,6 +5738,27 @@
     })(exports.IMarkPointItemPosition || (exports.IMarkPointItemPosition = {}));
 
     class Marker extends AbstractComponent {
+        _initContainer() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const groupClip = vrender.createGroup(Object.assign(Object.assign({}, (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.clipRange), { clip: (_c = vutils.isValid((_b = this.attribute) === null || _b === void 0 ? void 0 : _b.clipRange)) !== null && _c !== void 0 ? _c : false }));
+            groupClip.name = 'marker-container';
+            const group = vrender.createGroup({
+                x: -((_f = (_e = (_d = this.attribute) === null || _d === void 0 ? void 0 : _d.clipRange) === null || _e === void 0 ? void 0 : _e.x) !== null && _f !== void 0 ? _f : 0),
+                y: -((_j = (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.clipRange) === null || _h === void 0 ? void 0 : _h.y) !== null && _j !== void 0 ? _j : 0)
+            });
+            groupClip.add(group);
+            this._containerClip = groupClip;
+            this.add(groupClip);
+            this._container = group;
+        }
+        _updateContainer() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            this._containerClip.setAttributes(Object.assign(Object.assign({}, (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.clipRange), { clip: (_c = vutils.isValid((_b = this.attribute) === null || _b === void 0 ? void 0 : _b.clipRange)) !== null && _c !== void 0 ? _c : false }));
+            this._container.setAttributes({
+                x: -((_f = (_e = (_d = this.attribute) === null || _d === void 0 ? void 0 : _d.clipRange) === null || _e === void 0 ? void 0 : _e.x) !== null && _f !== void 0 ? _f : 0),
+                y: -((_j = (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.clipRange) === null || _h === void 0 ? void 0 : _h.y) !== null && _j !== void 0 ? _j : 0)
+            });
+        }
         render() {
             var _a, _b;
             const markerVisible = (_a = this.attribute.visible) !== null && _a !== void 0 ? _a : true;
@@ -5734,14 +5768,12 @@
                 this.setAttribute('childrenPickable', false);
             }
             if (markerVisible) {
-                if (!this._container) {
-                    const group = vrender.createGroup({});
-                    group.name = 'marker-container';
-                    this.add(group);
-                    this._container = group;
-                    this.initMarker(group);
+                if (!this._containerClip) {
+                    this._initContainer();
+                    this.initMarker(this._container);
                 }
                 else {
+                    this._updateContainer();
                     this.updateMarker();
                 }
             }
@@ -6502,6 +6534,7 @@
         LegendEvent["legendItemHover"] = "legendItemHover";
         LegendEvent["legendItemUnHover"] = "legendItemUnHover";
         LegendEvent["legendItemClick"] = "legendItemClick";
+        LegendEvent["legendItemAttributeUpdate"] = "legendItemAttributeUpdate";
     })(exports.LegendEvent || (exports.LegendEvent = {}));
     exports.LEGEND_ELEMENT_NAME = void 0;
     (function (LEGEND_ELEMENT_NAME) {
@@ -6625,12 +6658,21 @@
                 const target = e.target;
                 if ((_a = target === null || target === void 0 ? void 0 : target.name) === null || _a === void 0 ? void 0 : _a.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
                     const legendItem = target.delegate;
+                    let attributeUpdate = false;
+                    if (legendItem.hasState(exports.LegendStateValue.unSelectedHover) ||
+                        legendItem.hasState(exports.LegendStateValue.selectedHover)) {
+                        attributeUpdate = true;
+                    }
                     legendItem.removeState(exports.LegendStateValue.unSelectedHover);
                     legendItem.removeState(exports.LegendStateValue.selectedHover);
                     legendItem
                         .getChildren()[0]
                         .getChildren()
                         .forEach((child) => {
+                        if (!attributeUpdate &&
+                            (child.hasState(exports.LegendStateValue.unSelectedHover) || child.hasState(exports.LegendStateValue.selectedHover))) {
+                            attributeUpdate = true;
+                        }
                         child.removeState(exports.LegendStateValue.unSelectedHover);
                         child.removeState(exports.LegendStateValue.selectedHover);
                     });
@@ -6638,6 +6680,9 @@
                     if (focusButton) {
                         focusButton.setAttribute('visible', false);
                     }
+                    if (attributeUpdate) {
+                        this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                    }
                     this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem);
                 }
             };
@@ -6908,15 +6953,30 @@
                 this._appendDataToShape(valueShape, exports.LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.state);
                 valueShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
                 if (this._itemWidthByUser) {
-                    valueShape.setAttribute('maxLineWidth', this._itemWidthByUser -
+                    const layoutWidth = this._itemWidthByUser -
                         parsedPadding[1] -
                         parsedPadding[3] -
                         shapeSize -
                         shapeSpace -
-                        labelShape.AABBBounds.width() -
                         labelSpace -
                         focusSpace -
-                        valueSpace);
+                        valueSpace;
+                    const valueBounds = valueShape.AABBBounds;
+                    const labelBounds = labelShape.AABBBounds;
+                    const valueWidth = valueBounds.width();
+                    const labelWidth = labelBounds.width();
+                    if (valueWidth + labelWidth > layoutWidth) {
+                        if ((layoutWidth - valueWidth) / labelWidth > 0.4) {
+                            labelShape.setAttribute('maxLineWidth', layoutWidth - valueWidth);
+                        }
+                        else {
+                            valueShape.setAttribute('maxLineWidth', layoutWidth * 0.5);
+                            labelShape.setAttribute('maxLineWidth', layoutWidth * 0.5);
+                        }
+                    }
+                    else {
+                        valueShape.setAttribute('maxLineWidth', layoutWidth - labelWidth);
+                    }
                     if (valueAttr.alignRight) {
                         valueShape.setAttributes({
                             textAlign: 'right',
@@ -7066,18 +7126,32 @@
             return true;
         }
         _setLegendItemState(legendItem, stateName, keepCurrentStates = true) {
+            let attributeUpdate = false;
+            if (!legendItem.hasState(stateName)) {
+                attributeUpdate = true;
+            }
             legendItem.addState(stateName, keepCurrentStates);
             legendItem
                 .getChildren()[0]
                 .getChildren()
-                .forEach(child => {
+                .forEach((child) => {
                 if (child.name !== exports.LEGEND_ELEMENT_NAME.focus) {
+                    if (!attributeUpdate && !child.hasState(stateName)) {
+                        attributeUpdate = true;
+                    }
                     child.addState(stateName, keepCurrentStates);
                 }
             });
+            if (attributeUpdate) {
+                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+            }
         }
         _removeLegendItemState(legendItem, stateNames) {
+            let attributeUpdate = false;
             stateNames.forEach(name => {
+                if (!attributeUpdate && legendItem.hasState(name)) {
+                    attributeUpdate = true;
+                }
                 legendItem.removeState(name);
             });
             legendItem
@@ -7086,10 +7160,16 @@
                 .forEach(child => {
                 if (child.name !== exports.LEGEND_ELEMENT_NAME.focus) {
                     stateNames.forEach(name => {
+                        if (!attributeUpdate && child.hasState(name)) {
+                            attributeUpdate = true;
+                        }
                         child.removeState(name);
                     });
                 }
             });
+            if (attributeUpdate) {
+                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+            }
         }
         _getSelectedLegends() {
             var _a;
@@ -9963,7 +10043,7 @@
     }
     Tooltip.defaultAttributes = defaultAttributes;
 
-    const version = "0.14.3-alpha.0";
+    const version = "0.14.3-alpha.1";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;