@visactor/vrender-components 0.15.0 → 0.15.1

package/dist/index.js

@@ -2420,13 +2420,16 @@
     }
 
     class ArcInfo {
-        constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle) {
+        constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle, innerRadius, outerRadius, circleCenter) {
             this.refDatum = refDatum;
             this.center = center;
             this.outerCenter = outerCenter;
             this.quadrant = quadrant;
             this.radian = radian;
             this.middleAngle = middleAngle;
+            this.innerRadius = innerRadius;
+            this.outerRadius = outerRadius;
+            this.circleCenter = circleCenter;
             this.labelVisible = true;
             this.labelLimit = 0;
         }
@@ -2486,11 +2489,9 @@
             return labels;
         }
         layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
-            var _a;
             this._arcLeft.clear();
             this._arcRight.clear();
             this._ellipsisWidth = ellipsisWidth;
-            const centerOffset = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _a !== void 0 ? _a : 0;
             let maxRadius = 0;
             currentMarks.forEach(currentMarks => {
                 if (currentMarks.attribute.outerRadius > maxRadius) {
@@ -2508,8 +2509,8 @@
                 const arcQuadrant = computeQuadrant(graphicAttribute.endAngle - intervalAngle / 2);
                 const arcMiddle = circlePoint(center.x, center.y, graphicAttribute.outerRadius, arcMiddleAngle);
                 const outerArcMiddle = circlePoint(center.x, center.y, maxRadius + 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, centerOffset), arc.middleAngle);
+                const arc = new ArcInfo(item, arcMiddle, outerArcMiddle, arcQuadrant, intervalAngle, arcMiddleAngle, graphicAttribute.innerRadius, graphicAttribute.outerRadius, center);
+                arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius), arc.middleAngle);
                 arc.labelSize = {
                     width: textBounds.x2 - textBounds.x1,
                     height: textBounds.y2 - textBounds.y1
@@ -2535,18 +2536,13 @@
             return arcs;
         }
         _layoutInsideLabels(arcs, attribute, currentMarks) {
-            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;
             const spaceWidth = labelConfig.spaceWidth;
             arcs.forEach((arc) => {
                 var _a, _b;
                 const { labelSize, radian } = arc;
-                const innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, centerOffset, 1);
-                const outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, centerOffset, 1);
+                const innerRadius = arc.innerRadius;
+                const outerRadius = arc.outerRadius;
                 const minRadian = connectLineRadian(outerRadius, labelSize.height);
                 let limit;
                 if (radian < minRadian) {
@@ -2571,7 +2567,7 @@
                 const align = this._computeAlign(arc, attribute);
                 const alignOffset = align === 'left' ? labelWidth : align === 'right' ? 0 : labelWidth / 2;
                 const labelRadius = outerRadius - spaceWidth - alignOffset;
-                arc.labelPosition = circlePoint(center.x, center.y, labelRadius, arc.middleAngle);
+                arc.labelPosition = circlePoint(arc.circleCenter.x, arc.circleCenter.y, labelRadius, arc.middleAngle);
                 arc.labelLimit = labelWidth;
                 if (!vutils.isGreater(labelWidth, 0)) {
                     arc.labelVisible = false;
@@ -2646,9 +2642,8 @@
             return arcs;
         }
         _computeX(arc, attribute, currentMarks) {
-            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;
+            var _a;
+            const center = arc.circleCenter;
             const plotLayout = { width: center.x * 2, height: center.y * 2 };
             let maxRadius = 0;
             currentMarks.forEach((currentMark) => {
@@ -2659,7 +2654,7 @@
             const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
             const line1MinLength = attribute.line.line1MinLength;
             const line2MinLength = attribute.line.line2MinLength;
-            const labelLayoutAlign = (_f = attribute.layout) === null || _f === void 0 ? void 0 : _f.align;
+            const labelLayoutAlign = (_a = attribute.layout) === null || _a === void 0 ? void 0 : _a.align;
             const spaceWidth = attribute.spaceWidth;
             const { labelPosition, quadrant, pointB } = arc;
             if (!vutils.isValidNumber(pointB.x * pointB.y)) {
@@ -2667,7 +2662,7 @@
                 labelPosition.x = NaN;
                 arc.labelLimit = 0;
             }
-            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
+            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
             const flag = isQuadrantLeft(quadrant) ? -1 : 1;
             let cx = 0;
             const restWidth = flag > 0 ? plotLayout.width - pointB.x : pointB.x;
@@ -2885,7 +2880,6 @@
             return -1;
         }
         _computePointB(arc, r, attribute, currentMarks) {
-            var _a, _b, _c, _d, _e;
             const labelConfig = attribute;
             let maxRadius = 0;
             currentMarks.forEach((currentMark) => {
@@ -2903,11 +2897,10 @@
                 };
             }
             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 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 center = arc.circleCenter;
+                const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
                 const { labelPosition, quadrant } = arc;
-                const outerR = Math.max(radius + line1MinLength, currentMarks[0].attribute.outerRadius);
+                const outerR = Math.max(radius + line1MinLength, arc.outerRadius);
                 const rd = r - outerR;
                 const x = Math.sqrt(r ** 2 - Math.abs(center.y - labelPosition.y) ** 2) - rd;
                 if (vutils.isValidNumber(x)) {
@@ -2929,8 +2922,7 @@
             }
         }
         _computeYRange(arc, attribute, currentMarks) {
-            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 center = arc.circleCenter;
             const plotRect = { width: center.x * 2, height: center.y * 2 };
             let maxRadius = 0;
             currentMarks.forEach((currentMark) => {
@@ -2941,8 +2933,7 @@
             const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
             const line1MinLength = attribute.line.line1MinLength;
             const { width, height } = plotRect;
-            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 radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
             const r = this._computeLayoutRadius(height / 2, attribute, currentMarks);
             const cx = Math.abs(arc.center.x - width / 2);
             const cy = arc.center.y - height / 2;
@@ -3001,7 +2992,6 @@
             arc.labelYRange = [min, max];
         }
         _computeLayoutRadius(halfYLength, attribute, currentMarks) {
-            var _a;
             const labelConfig = attribute;
             const layoutArcGap = labelConfig.layoutArcGap;
             const line1MinLength = labelConfig.line.line1MinLength;
@@ -3012,8 +3002,7 @@
                 }
             });
             const radiusRatio = this.computeLayoutOuterRadius(maxRadius, 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 radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
             const outerR = radius + line1MinLength;
             const a = outerR - layoutArcGap;
             return Math.max((a ** 2 + halfYLength ** 2) / (2 * a), outerR);
@@ -3092,9 +3081,8 @@
                 : undefined;
             return labelLine;
         }
-        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);
+        computeRadius(r, width, height, k) {
+            return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (vutils.isNil(k) ? 1 : k);
         }
         computeLayoutRadius(width, height) {
             return Math.min(width / 2, height / 2);
@@ -3105,10 +3093,9 @@
         computeLayoutOuterRadius(r, width, height) {
             return r / (Math.min(width, height) / 2);
         }
-        computeDatumRadius(width, height, outerRadius, centerOffset) {
-            var _a;
+        computeDatumRadius(width, height, outerRadius) {
             const outerRadiusRatio = this.computeLayoutOuterRadius(outerRadius, width, height);
-            return (_a = this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio + centerOffset) !== null && _a !== void 0 ? _a : 0;
+            return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio;
         }
     }
     ArcLabel.defaultAttributes = {
@@ -3211,69 +3198,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;
@@ -3281,20 +3273,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;
@@ -3303,11 +3297,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 = {
@@ -6019,25 +6071,41 @@
     })(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 }));
-            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);
+            var _a, _b;
+            const { limitRect, clipInRange } = this.attribute;
+            let group;
+            if (clipInRange) {
+                const groupClip = vrender.createGroup(Object.assign(Object.assign({}, limitRect), { clip: true, pickable: false }));
+                group = vrender.createGroup({
+                    x: -((_a = limitRect === null || limitRect === void 0 ? void 0 : limitRect.x) !== null && _a !== void 0 ? _a : 0),
+                    y: -((_b = limitRect === null || limitRect === void 0 ? void 0 : limitRect.y) !== null && _b !== void 0 ? _b : 0)
+                });
+                groupClip.add(group);
+                this._containerClip = groupClip;
+                this.add(groupClip);
+            }
+            else {
+                group = vrender.createGroup({
+                    x: 0,
+                    y: 0
+                });
+                this.add(group);
+            }
+            group.name = 'marker-container';
             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 }));
+            var _a, _b, _c;
+            const { limitRect, clipInRange } = this.attribute;
+            (_a = this._containerClip) === null || _a === void 0 ? void 0 : _a.setAttributes(Object.assign({}, limitRect));
             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)
+                x: clipInRange ? -((_b = limitRect === null || limitRect === void 0 ? void 0 : limitRect.x) !== null && _b !== void 0 ? _b : 0) : 0,
+                y: clipInRange ? -((_c = limitRect === null || limitRect === void 0 ? void 0 : limitRect.y) !== null && _c !== void 0 ? _c : 0) : 0
             });
         }
         render() {
@@ -6049,7 +6117,7 @@
                 this.setAttribute('childrenPickable', false);
             }
             if (markerVisible) {
-                if (!this._containerClip) {
+                if (!this._container) {
                     this._initContainer();
                     this.initMarker(this._container);
                 }
@@ -6286,47 +6354,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 = {}, limitRect } = this.attribute;
+            const { position = 'end', refX = 0, refY = 0, confine } = 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 (limitRect && confine) {
+                const { x, y, width, height } = limitRect;
+                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;
@@ -6339,14 +6444,17 @@
         }
         updateMarker() {
             var _a, _b;
-            const { points, startSymbol, endSymbol, label, lineStyle } = this.attribute;
+            const { points, startSymbol, endSymbol, label, lineStyle, mainSegmentIndex, multiSegment } = this
+                .attribute;
             (_a = this._line) === null || _a === void 0 ? void 0 : _a.setAttributes({
                 points,
                 startSymbol,
                 endSymbol,
-                lineStyle
+                lineStyle,
+                mainSegmentIndex,
+                multiSegment
             });
-            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({}, label));
+            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({ dx: 0, dy: 0 }, label));
             this.setLabelPos();
         }
     }
@@ -6356,58 +6464,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.limitRect && (label === null || label === void 0 ? void 0 : label.confine)) {
+                    const { x, y, width, height } = this.attribute.limitRect;
+                    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;
@@ -6425,7 +6529,7 @@
             var _a, _b;
             const { points, label, areaStyle } = this.attribute;
             (_a = this._area) === null || _a === void 0 ? void 0 : _a.setAttributes(Object.assign({ points: points }, areaStyle));
-            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({}, label));
+            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({ dx: 0, dy: 0 }, label));
             this.setLabelPos();
         }
     }
@@ -6439,26 +6543,29 @@
         }
         setItemAttributes(item, itemContent, itemPosition, itemType) {
             var _a;
+            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
@@ -6470,7 +6577,7 @@
             if (position.includes('inside')) {
                 return -width;
             }
-            else if (position === 'insideTop') {
+            if (position === 'insideTop') {
                 return 0;
             }
             return 0;
@@ -6481,7 +6588,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;
@@ -10358,7 +10465,7 @@
         return new Tag(params ? params.attribute : {});
     }
 
-    const version = "0.15.0";
+    const version = "0.15.1";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;