@visactor/vrender-components 0.15.0-alpha.20 → 0.15.0-alpha.22

package/dist/index.js

@@ -1711,8 +1711,14 @@
         }
         _prepare() {
             var _a;
-            const baseMarks = getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName);
             const currentBaseMarks = [];
+            let baseMarks;
+            if (vutils.isFunction(this.attribute.getBaseMarks)) {
+                baseMarks = this.attribute.getBaseMarks();
+            }
+            else {
+                baseMarks = getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName);
+            }
             baseMarks.forEach(mark => {
                 if (mark.releaseStatus !== 'willRelease') {
                     currentBaseMarks.push(mark);
@@ -3205,69 +3211,74 @@
     };
 
     class Segment extends AbstractComponent {
+        getStartAngle() {
+            return this._startAngle;
+        }
+        getEndAngle() {
+            return this._endAngle;
+        }
+        getMainSegmentPoints() {
+            return this._mainSegmentPoints;
+        }
         constructor(attributes) {
             super(vutils.merge({}, Segment.defaultAttributes, attributes));
             this.name = 'segment';
         }
-        computeLineAngle() {
-            const { points } = this.attribute;
-            const start = points[0];
-            const startInside = points[1];
-            const endInside = points[points.length - 2];
-            const end = points[points.length - 1];
-            const startVector = [start.x - startInside.x, start.y - startInside.y];
-            const startAngle = Math.atan2(startVector[1], startVector[0]);
-            const endVector = [end.x - endInside.x, end.y - endInside.y];
-            const endAngle = Math.atan2(endVector[1], endVector[0]);
-            this._startAngle = startAngle;
-            this._endAngle = endAngle;
-        }
         render() {
             this.removeAllChild();
-            const { points, startSymbol, endSymbol, lineStyle, state, visible = true } = this.attribute;
+            this._reset();
+            const { startSymbol, endSymbol, lineStyle, state, visible = true, multiSegment, mainSegmentIndex } = this.attribute;
             if (!visible) {
                 return;
             }
-            if (points.length > 1) {
-                this.computeLineAngle();
-            }
-            const startSymbolShape = this.renderSymbol(startSymbol, 'start');
-            const endSymbolShape = this.renderSymbol(endSymbol, 'end');
+            this._computeLineAngle();
+            const startSymbolShape = this._renderSymbol(startSymbol, 'start');
+            const endSymbolShape = this._renderSymbol(endSymbol, 'end');
             this.startSymbol = startSymbolShape;
             this.endSymbol = endSymbolShape;
-            let pointsAfterClip = points;
-            if (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.visible) {
-                const startSize = (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.clip) ? (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.size) || 10 : 0;
-                const pointsStart = {
-                    x: points[0].x - (startSize / 2) * (Math.cos(this._startAngle) || 0),
-                    y: points[0].y - (startSize / 2) * (Math.sin(this._startAngle) || 0)
-                };
-                pointsAfterClip = [pointsStart, ...pointsAfterClip.slice(1)];
-            }
-            if (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.visible) {
-                const endSize = (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.clip) ? (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.size) || 10 : 0;
-                const pointsEnd = {
-                    x: points[points.length - 1].x - (endSize / 2) * (Math.cos(this._endAngle) || 0),
-                    y: points[points.length - 1].y - (endSize / 2) * (Math.sin(this._endAngle) || 0)
-                };
-                pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];
+            if (multiSegment) {
+                const points = [...this.attribute.points];
+                if (vutils.isValidNumber(mainSegmentIndex)) {
+                    points[mainSegmentIndex] = this._clipPoints(points[mainSegmentIndex]);
+                }
+                else {
+                    const clipPoints = this._clipPoints(vutils.flattenArray(points));
+                    points[0][0] = clipPoints[0];
+                    points[points.length - 1][points[points.length - 1].length - 1] =
+                        clipPoints[clipPoints.length - 1];
+                }
+                points.forEach((point, index) => {
+                    var _a, _b;
+                    const line = vrender.createLine(Object.assign(Object.assign({ points: point }, (vutils.isArray(lineStyle) ? (_a = lineStyle[index]) !== null && _a !== void 0 ? _a : lineStyle[lineStyle.length - 1] : lineStyle)), { fill: false }));
+                    line.name = `${this.name}-line`;
+                    line.id = this._getNodeId('line' + index);
+                    if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.line)) {
+                        line.states = vutils.isArray(state.line) ? (_b = state.line[index]) !== null && _b !== void 0 ? _b : state.line[state.line.length - 1] : state.line;
+                    }
+                    this.add(line);
+                });
             }
-            const line = vrender.createLine(Object.assign({ points: pointsAfterClip, fill: false }, lineStyle));
-            line.name = 'line';
-            line.id = this._getNodeId('line');
-            if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.line)) {
-                line.states = state.line;
+            else {
+                const line = vrender.createLine(Object.assign(Object.assign({ points: this._clipPoints(this.attribute.points) }, vutils.array(lineStyle)[0]), { fill: false }));
+                line.name = `${this.name}-line`;
+                line.id = this._getNodeId('line');
+                if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.line)) {
+                    line.states = [].concat(state.line)[0];
+                }
+                this.add(line);
             }
-            this.line = line;
-            this.add(line);
         }
-        renderSymbol(attribute, dim) {
+        _renderSymbol(attribute, dim) {
+            const points = this._getMainSegmentPoints();
+            if (!points.length) {
+                return;
+            }
             const { autoRotate = true } = attribute;
             let symbol;
             if (attribute === null || attribute === void 0 ? void 0 : attribute.visible) {
                 const startAngle = this._startAngle;
                 const endAngle = this._endAngle;
-                const { points, state } = this.attribute;
+                const { state } = this.attribute;
                 const start = points[0];
                 const end = points[points.length - 1];
                 const { refX = 0, refY = 0, refAngle = 0, style, symbolType, size = 12 } = attribute;
@@ -3275,20 +3286,22 @@
                 let rotate;
                 if (dim === 'start') {
                     position = {
-                        x: start.x + (startAngle ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),
-                        y: start.y + (startAngle ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)
+                        x: start.x +
+                            (vutils.isValidNumber(startAngle) ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),
+                        y: start.y +
+                            (vutils.isValidNumber(startAngle) ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)
                     };
                     rotate = startAngle + Math.PI / 2;
                 }
                 else {
                     position = {
-                        x: end.x + (endAngle ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
-                        y: end.y + (endAngle ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
+                        x: end.x + (vutils.isValidNumber(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
+                        y: end.y + (vutils.isValidNumber(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
                     };
                     rotate = endAngle + Math.PI / 2;
                 }
                 symbol = vrender.createSymbol(Object.assign(Object.assign(Object.assign({}, position), { symbolType: symbolType, size, angle: autoRotate ? rotate + refAngle : 0, strokeBoundsBuffer: 0 }), style));
-                symbol.name = `${dim}-symbol`;
+                symbol.name = `${this.name}-${dim}-symbol`;
                 symbol.id = this._getNodeId(`${dim}-symbol`);
                 if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.symbol)) {
                     symbol.states = state.symbol;
@@ -3297,11 +3310,69 @@
             }
             return symbol;
         }
-        getStartAngle() {
-            return this._startAngle;
+        _getMainSegmentPoints() {
+            if (this._mainSegmentPoints) {
+                return this._mainSegmentPoints;
+            }
+            const { points: originPoints, multiSegment, mainSegmentIndex } = this.attribute;
+            let points;
+            if (multiSegment) {
+                if (vutils.isValidNumber(mainSegmentIndex)) {
+                    points = originPoints[mainSegmentIndex];
+                }
+                else {
+                    points = vutils.flattenArray(originPoints);
+                }
+            }
+            else {
+                points = originPoints;
+            }
+            this._mainSegmentPoints = points;
+            return points;
         }
-        getEndAngle() {
-            return this._endAngle;
+        _clipPoints(points) {
+            const { startSymbol, endSymbol } = this.attribute;
+            let pointsAfterClip = points;
+            if (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.visible) {
+                const startSize = (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.clip) ? (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.size) || 10 : 0;
+                const pointsStart = {
+                    x: points[0].x - (startSize / 2) * (Math.cos(this._startAngle) || 0),
+                    y: points[0].y - (startSize / 2) * (Math.sin(this._startAngle) || 0)
+                };
+                pointsAfterClip = [pointsStart, ...pointsAfterClip.slice(1)];
+            }
+            if (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.visible) {
+                const endSize = (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.clip) ? (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.size) || 10 : 0;
+                const pointsEnd = {
+                    x: points[points.length - 1].x - (endSize / 2) * (Math.cos(this._endAngle) || 0),
+                    y: points[points.length - 1].y - (endSize / 2) * (Math.sin(this._endAngle) || 0)
+                };
+                pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];
+            }
+            return pointsAfterClip;
+        }
+        _computeLineAngle() {
+            const points = this._getMainSegmentPoints();
+            if (points.length <= 1) {
+                return;
+            }
+            const start = points[0];
+            const startInside = points[1];
+            const endInside = points[points.length - 2];
+            const end = points[points.length - 1];
+            const startVector = [start.x - startInside.x, start.y - startInside.y];
+            const startAngle = Math.atan2(startVector[1], startVector[0]);
+            const endVector = [end.x - endInside.x, end.y - endInside.y];
+            const endAngle = Math.atan2(endVector[1], endVector[0]);
+            this._startAngle = startAngle;
+            this._endAngle = endAngle;
+        }
+        _reset() {
+            this.startSymbol = null;
+            this.endSymbol = null;
+            this._startAngle = null;
+            this._endAngle = null;
+            this._mainSegmentPoints = null;
         }
     }
     Segment.defaultAttributes = {
@@ -4361,7 +4432,7 @@
         }
         beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             const { flush = false } = this.attribute.label || {};
-            if (flush) {
+            if (flush && labelShapes.length) {
                 const { orient, start, end } = this.attribute;
                 const isX = orient === 'bottom' || orient === 'top';
                 const first = labelShapes[0];
@@ -6013,6 +6084,10 @@
     })(exports.IMarkPointItemPosition || (exports.IMarkPointItemPosition = {}));
 
     class Marker extends AbstractComponent {
+        constructor() {
+            super(...arguments);
+            this.name = 'marker';
+        }
         _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 }));
@@ -6280,47 +6355,84 @@
         }
     };
 
+    function limitShapeInBounds(shape, bounds) {
+        const { x1: regionMinX, y1: regionMinY, x2: regionMaxX, y2: regionMaxY } = bounds;
+        const { x1, y1, x2, y2 } = shape.AABBBounds;
+        const { dx: originDx = 0, dy: originDy = 0 } = shape.attribute;
+        let dx = 0;
+        let dy = 0;
+        if (x1 < regionMinX) {
+            dx = regionMinX - x1;
+        }
+        if (y1 < regionMinY) {
+            dy = regionMinY - y1;
+        }
+        if (x2 > regionMaxX) {
+            dx = regionMaxX - x2;
+        }
+        if (y2 > regionMaxY) {
+            dy = regionMaxY - y2;
+        }
+        if (dx) {
+            shape.setAttribute('dx', dx + originDx);
+        }
+        if (dy) {
+            shape.setAttribute('dy', dy + originDy);
+        }
+    }
+
     class MarkLine extends Marker {
         constructor(attributes) {
             super(vutils.merge({}, MarkLine.defaultAttributes, attributes));
         }
         setLabelPos() {
-            var _a, _b, _c, _d, _e;
-            const { points, label } = this.attribute;
-            const labelPosition = (_a = label === null || label === void 0 ? void 0 : label.position) !== null && _a !== void 0 ? _a : 'end';
-            const labelAngle = this._line.getEndAngle();
-            const labelOffsetX = (label === null || label === void 0 ? void 0 : label.refX) * Math.cos(labelAngle) + label.refY * Math.cos(labelAngle - Math.PI / 2);
-            const labelOffsetY = (label === null || label === void 0 ? void 0 : label.refX) * Math.sin(labelAngle) + label.refY * Math.sin(labelAngle - Math.PI / 2);
-            if (labelPosition.includes('start') || labelPosition.includes('Start')) {
-                (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes({
+            var _a, _b;
+            const { label = {}, clipRange } = this.attribute;
+            const { position = 'end', refX = 0, refY = 0, confineInClipRange } = label;
+            const points = this._line.getMainSegmentPoints();
+            const labelAngle = (_a = this._line.getEndAngle()) !== null && _a !== void 0 ? _a : 0;
+            const labelOffsetX = refX * Math.cos(labelAngle) + refY * Math.cos(labelAngle - Math.PI / 2);
+            const labelOffsetY = refX * Math.sin(labelAngle) + refY * Math.sin(labelAngle - Math.PI / 2);
+            let labelPoint;
+            if (position.includes('start') || position.includes('Start')) {
+                labelPoint = {
                     x: points[0].x + labelOffsetX,
                     y: points[0].y + labelOffsetY
-                });
+                };
             }
-            else if (labelPosition.includes('middle') || labelPosition.includes('Middle')) {
-                (_c = this._label) === null || _c === void 0 ? void 0 : _c.setAttributes({
+            else if (position.includes('middle') || position.includes('Middle')) {
+                labelPoint = {
                     x: (points[0].x + points[points.length - 1].x) / 2 + labelOffsetX,
                     y: (points[0].y + points[points.length - 1].y) / 2 + labelOffsetY
-                });
+                };
             }
             else {
-                (_d = this._label) === null || _d === void 0 ? void 0 : _d.setAttributes({
+                labelPoint = {
                     x: points[points.length - 1].x + labelOffsetX,
                     y: points[points.length - 1].y + labelOffsetY
+                };
+            }
+            this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { angle: label.autoRotate ? labelAngle + ((_b = label === null || label === void 0 ? void 0 : label.refAngle) !== null && _b !== void 0 ? _b : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_LINE_TEXT_STYLE_MAP[position]), label.textStyle) }));
+            if (clipRange && confineInClipRange) {
+                const { x, y, width, height } = clipRange;
+                limitShapeInBounds(this._label, {
+                    x1: x,
+                    y1: y,
+                    x2: x + width,
+                    y2: y + height
                 });
             }
-            this._label.setAttributes({
-                angle: label.autoRotate && labelAngle + ((_e = label === null || label === void 0 ? void 0 : label.refAngle) !== null && _e !== void 0 ? _e : 0),
-                textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_LINE_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
-            });
         }
         initMarker(container) {
-            const { points, startSymbol, endSymbol, label, lineStyle } = this.attribute;
+            const { points, startSymbol, endSymbol, label, lineStyle, mainSegmentIndex, multiSegment } = this
+                .attribute;
             const line = new Segment({
                 points,
                 startSymbol,
                 endSymbol,
-                lineStyle
+                lineStyle,
+                mainSegmentIndex,
+                multiSegment
             });
             line.name = 'mark-line-line';
             this._line = line;
@@ -6350,58 +6462,54 @@
         constructor(attributes) {
             super(vutils.merge({}, MarkArea.defaultAttributes, attributes));
         }
-        getLeftPos() {
-            return {
-                x: this._area.AABBBounds.x1,
-                y: (this._area.AABBBounds.y1 + this._area.AABBBounds.y2) / 2
-            };
-        }
-        getRightPos() {
-            return {
-                x: this._area.AABBBounds.x2,
-                y: (this._area.AABBBounds.y1 + this._area.AABBBounds.y2) / 2
-            };
-        }
-        getTopPos() {
-            return {
-                x: (this._area.AABBBounds.x1 + this._area.AABBBounds.x2) / 2,
-                y: this._area.AABBBounds.y1
-            };
-        }
-        getBottomPos() {
-            return {
-                x: (this._area.AABBBounds.x1 + this._area.AABBBounds.x2) / 2,
-                y: this._area.AABBBounds.y2
-            };
-        }
-        getMiddlePos() {
-            return {
-                x: (this._area.AABBBounds.x1 + this._area.AABBBounds.x2) / 2,
-                y: (this._area.AABBBounds.y1 + this._area.AABBBounds.y2) / 2
-            };
-        }
-        setLabelPos() {
-            var _a, _b, _c, _d, _e, _f, _g;
-            const { label } = this.attribute;
-            const labelPosition = (_a = label === null || label === void 0 ? void 0 : label.position) !== null && _a !== void 0 ? _a : 'middle';
-            if (labelPosition.includes('left') || labelPosition.includes('Left')) {
-                (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({}, this.getLeftPos()));
+        _getPositionByDirection(area, direction) {
+            const { x1, x2, y1, y2 } = this._area.AABBBounds;
+            if (direction.includes('left') || direction.includes('Left')) {
+                return {
+                    x: x1,
+                    y: (y1 + y2) / 2
+                };
             }
-            else if (labelPosition.includes('right') || labelPosition.includes('Right')) {
-                (_c = this._label) === null || _c === void 0 ? void 0 : _c.setAttributes(Object.assign({}, this.getRightPos()));
+            if (direction.includes('right') || direction.includes('Right')) {
+                return {
+                    x: x2,
+                    y: (y1 + y2) / 2
+                };
             }
-            else if (labelPosition.includes('top') || labelPosition.includes('Top')) {
-                (_d = this._label) === null || _d === void 0 ? void 0 : _d.setAttributes(Object.assign({}, this.getTopPos()));
+            if (direction.includes('top') || direction.includes('Top')) {
+                return {
+                    x: (x1 + x2) / 2,
+                    y: y1
+                };
             }
-            else if (labelPosition.includes('bottom') || labelPosition.includes('Bottom')) {
-                (_e = this._label) === null || _e === void 0 ? void 0 : _e.setAttributes(Object.assign({}, this.getBottomPos()));
+            if (direction.includes('bottom') || direction.includes('Bottom')) {
+                return {
+                    x: (x1 + x2) / 2,
+                    y: y2
+                };
             }
-            else {
-                (_f = this._label) === null || _f === void 0 ? void 0 : _f.setAttributes(Object.assign({}, this.getMiddlePos()));
+            return {
+                x: (x1 + x2) / 2,
+                y: (y1 + y2) / 2
+            };
+        }
+        setLabelPos() {
+            var _a;
+            if (this._label && this._area) {
+                const { label } = this.attribute;
+                const labelPosition = (_a = label === null || label === void 0 ? void 0 : label.position) !== null && _a !== void 0 ? _a : 'middle';
+                const labelPoint = this._getPositionByDirection(this._area, labelPosition);
+                this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle) }));
+                if (this.attribute.clipRange && (label === null || label === void 0 ? void 0 : label.confineInClipRange)) {
+                    const { x, y, width, height } = this.attribute.clipRange;
+                    limitShapeInBounds(this._label, {
+                        x1: x,
+                        y1: y,
+                        x2: x + width,
+                        y2: y + height
+                    });
+                }
             }
-            (_g = this._label) === null || _g === void 0 ? void 0 : _g.setAttributes({
-                textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
-            });
         }
         initMarker(container) {
             const { points, label, areaStyle } = this.attribute;
@@ -6432,31 +6540,43 @@
         setLabelPos() {
         }
         setItemAttributes(item, itemContent, itemPosition, itemType) {
-            var _a;
+            var _a, _b;
+            if (!item) {
+                return;
+            }
             const { autoRotate = true, refX = 0, refY = 0, refAngle = 0, textStyle, richTextStyle, imageStyle, position = exports.IMarkPointItemPosition.middle } = itemContent;
             const itemAngle = ((_a = this._line) === null || _a === void 0 ? void 0 : _a.getEndAngle()) || 0;
             const itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2);
             const itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);
             if (itemType === 'text') {
-                item === null || item === void 0 ? void 0 : item.setAttributes(Object.assign(Object.assign({}, textStyle), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(itemContent === null || itemContent === void 0 ? void 0 : itemContent.position) || 'end']), textStyle === null || textStyle === void 0 ? void 0 : textStyle.textStyle) }));
+                item.setAttributes(Object.assign(Object.assign({}, textStyle), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(itemContent === null || itemContent === void 0 ? void 0 : itemContent.position) || 'end']), textStyle === null || textStyle === void 0 ? void 0 : textStyle.textStyle) }));
             }
             else if (itemType === 'richText') {
-                item === null || item === void 0 ? void 0 : item.setAttributes({
+                item.setAttributes({
                     dx: this.getItemDx(item, position, richTextStyle) + ((richTextStyle === null || richTextStyle === void 0 ? void 0 : richTextStyle.dx) || 0),
                     dy: this.getItemDy(item, position, richTextStyle) + ((richTextStyle === null || richTextStyle === void 0 ? void 0 : richTextStyle.dy) || 0)
                 });
             }
             else if (itemType === 'image') {
-                item === null || item === void 0 ? void 0 : item.setAttributes({
+                item.setAttributes({
                     dx: this.getItemDx(item, position, imageStyle) + ((imageStyle === null || imageStyle === void 0 ? void 0 : imageStyle.dx) || 0),
                     dy: this.getItemDy(item, position, imageStyle) + ((imageStyle === null || imageStyle === void 0 ? void 0 : imageStyle.dy) || 0)
                 });
             }
-            item === null || item === void 0 ? void 0 : item.setAttributes({
+            item.setAttributes({
                 x: itemPosition.x + (itemOffsetX || 0),
                 y: itemPosition.y + (itemOffsetY || 0),
                 angle: autoRotate && itemAngle + refAngle
             });
+            if (this.attribute.clipRange && ((_b = this.attribute.itemContent) === null || _b === void 0 ? void 0 : _b.confineInClipRange)) {
+                const { x, y, width, height } = this.attribute.clipRange;
+                limitShapeInBounds(item, {
+                    x1: x,
+                    y1: y,
+                    x2: x + width,
+                    y2: y + height
+                });
+            }
         }
         getItemDx(item, position, style) {
             var _a, _b;
@@ -6464,7 +6584,7 @@
             if (position.includes('inside')) {
                 return -width;
             }
-            else if (position === 'insideTop') {
+            if (position === 'insideTop') {
                 return 0;
             }
             return 0;
@@ -6475,7 +6595,7 @@
             if (position.includes('top') || position.includes('Top')) {
                 return -height;
             }
-            else if (position.includes('middle') || position.includes('Middle')) {
+            if (position.includes('middle') || position.includes('Middle')) {
                 return -height / 2;
             }
             return 0;
@@ -6671,7 +6791,8 @@
                     const changeEvent = new vrender.CustomEvent('toPrev', {
                         current: this._current,
                         total: this._total,
-                        direction: 'pre'
+                        direction: 'pre',
+                        event: e
                     });
                     changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
                     this.dispatchEvent(changeEvent);
@@ -6690,7 +6811,8 @@
                     const changeEvent = new vrender.CustomEvent('toNext', {
                         current: this._current,
                         total: this._total,
-                        direction: 'next'
+                        direction: 'next',
+                        event: e
                     });
                     changeEvent.manager = (_b = this.stage) === null || _b === void 0 ? void 0 : _b.eventSystem.manager;
                     this.dispatchEvent(changeEvent);
@@ -6916,16 +7038,16 @@
                     const legendItem = target.delegate;
                     const selected = legendItem.hasState(exports.LegendStateValue.selected);
                     if (selected) {
-                        this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover);
+                        this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover, e);
                     }
                     else {
-                        this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover);
+                        this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover, e);
                     }
                     const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
                     if (focusButton) {
                         focusButton.setAttribute('visible', true);
                     }
-                    this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem);
+                    this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem, e);
                 }
             };
             this._onUnHover = (e) => {
@@ -6956,9 +7078,9 @@
                         focusButton.setAttribute('visible', false);
                     }
                     if (attributeUpdate) {
-                        this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                        this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
                     }
-                    this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem);
+                    this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
                 }
             };
             this._onClick = (e) => {
@@ -6971,25 +7093,17 @@
                         legendItem.toggleState(exports.LegendStateValue.focus);
                         if (isFocusSelected) {
                             (_b = this._itemsContainer) === null || _b === void 0 ? void 0 : _b.getChildren().forEach(item => {
-                                this._removeLegendItemState(item, [
-                                    exports.LegendStateValue.unSelected,
-                                    exports.LegendStateValue.unSelectedHover,
-                                    exports.LegendStateValue.focus
-                                ]);
-                                this._setLegendItemState(item, exports.LegendStateValue.selected);
+                                this._removeLegendItemState(item, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover, exports.LegendStateValue.focus], e);
+                                this._setLegendItemState(item, exports.LegendStateValue.selected, e);
                             });
                         }
                         else {
-                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected);
-                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover]);
+                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
+                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
                             (_c = this._itemsContainer) === null || _c === void 0 ? void 0 : _c.getChildren().forEach(item => {
                                 if (legendItem !== item) {
-                                    this._removeLegendItemState(item, [
-                                        exports.LegendStateValue.selected,
-                                        exports.LegendStateValue.selectedHover,
-                                        exports.LegendStateValue.focus
-                                    ]);
-                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected);
+                                    this._removeLegendItemState(item, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover, exports.LegendStateValue.focus], e);
+                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected, e);
                                 }
                             });
                         }
@@ -7003,33 +7117,30 @@
                         const currentSelectedItems = this._getSelectedLegends();
                         if (selectMode === 'multiple') {
                             if (allowAllCanceled === false && isSelected && currentSelectedItems.length === 1) {
-                                this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem);
+                                this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
                                 return;
                             }
                             if (isSelected) {
-                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover]);
-                                this._setLegendItemState(legendItem, exports.LegendStateValue.unSelected);
+                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover], e);
+                                this._setLegendItemState(legendItem, exports.LegendStateValue.unSelected, e);
                             }
                             else {
-                                this._setLegendItemState(legendItem, exports.LegendStateValue.selected);
-                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover]);
+                                this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
+                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
                             }
                         }
                         else {
-                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected);
-                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover]);
+                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
+                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
                             (_e = this._itemsContainer) === null || _e === void 0 ? void 0 : _e.getChildren().forEach(item => {
                                 if (legendItem !== item) {
-                                    this._removeLegendItemState(item, [
-                                        exports.LegendStateValue.selected,
-                                        exports.LegendStateValue.selectedHover
-                                    ]);
-                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected);
+                                    this._removeLegendItemState(item, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover], e);
+                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected, e);
                                 }
                             });
                         }
                     }
-                    this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem);
+                    this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
                 }
             };
         }
@@ -7400,7 +7511,8 @@
             this._pager.addEventListener('toNext', onPaging);
             return true;
         }
-        _setLegendItemState(legendItem, stateName, keepCurrentStates = true) {
+        _setLegendItemState(legendItem, stateName, e) {
+            const keepCurrentStates = true;
             let attributeUpdate = false;
             if (!legendItem.hasState(stateName)) {
                 attributeUpdate = true;
@@ -7418,10 +7530,10 @@
                 }
             });
             if (attributeUpdate) {
-                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
             }
         }
-        _removeLegendItemState(legendItem, stateNames) {
+        _removeLegendItemState(legendItem, stateNames, e) {
             let attributeUpdate = false;
             stateNames.forEach(name => {
                 if (!attributeUpdate && legendItem.hasState(name)) {
@@ -7443,7 +7555,7 @@
                 }
             });
             if (attributeUpdate) {
-                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
             }
         }
         _getSelectedLegends() {
@@ -7462,7 +7574,7 @@
             shape.delegate = delegateShape;
             shape.states = vutils.merge({}, DEFAULT_STATES, states);
         }
-        _dispatchEvent(eventName, legendItem) {
+        _dispatchEvent(eventName, legendItem, event) {
             var _a;
             const currentSelectedItems = this._getSelectedLegends();
             currentSelectedItems.sort((pre, next) => pre.index - next.index);
@@ -7472,7 +7584,8 @@
                 data: legendItem.data,
                 selected: legendItem.hasState(exports.LegendStateValue.selected),
                 currentSelectedItems,
-                currentSelected
+                currentSelected,
+                event
             });
             changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
             this.dispatchEvent(changeEvent);
@@ -10359,7 +10472,7 @@
         return new Tag(params ? params.attribute : {});
     }
 
-    const version = "0.15.0-alpha.20";
+    const version = "0.15.0-alpha.22";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;