@visactor/vrender-components 0.19.4-alpha.4 → 0.19.4

package/es/marker/line.js

@@ -12,6 +12,8 @@ import { DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP, DEFAULT_MARK_LINE_THEME } f
 
 import { markCommonLineAnimate } from "./animate/animate";
 
+import { isPostiveXAxisCartes } from "../util";
+
 loadMarkLineComponent();
 
 export function registerMarkLineAnimate() {
@@ -28,7 +30,8 @@ export class MarkLine extends MarkCommonLine {
     }
     getPointAttrByPosition(position) {
         var _a;
-        const {label: label = {}} = this.attribute, {refX: refX = 0, refY: refY = 0} = label, points = this._line.getMainSegmentPoints(), labelAngle = null !== (_a = this._line.getEndAngle()) && void 0 !== _a ? _a : 0, labelOffsetX = refX * Math.cos(labelAngle) + refX * Math.cos(labelAngle - Math.PI / 2), labelOffsetY = refX * Math.sin(labelAngle) + refY * Math.sin(labelAngle - Math.PI / 2);
+        const {label: label = {}} = this.attribute, {refX: refX = 0, refY: refY = 0} = label, points = this._line.getMainSegmentPoints(), lineEndAngle = null !== (_a = this._line.getEndAngle()) && void 0 !== _a ? _a : 0, labelAngle = (isPostiveXAxisCartes(lineEndAngle), 
+        lineEndAngle), labelOffsetX = refX * Math.cos(labelAngle) + refY * Math.cos(labelAngle - Math.PI / 2), labelOffsetY = refX * Math.sin(labelAngle) + refY * Math.sin(labelAngle - Math.PI / 2);
         return position.includes("start") || position.includes("Start") ? {
             position: {
                 x: points[0].x + labelOffsetX,
@@ -51,10 +54,16 @@ export class MarkLine extends MarkCommonLine {
     }
     getRotateByAngle(angle) {
         var _a;
-        return angle + (null !== (_a = this.attribute.label.refAngle) && void 0 !== _a ? _a : 0);
+        return (isPostiveXAxisCartes(angle) ? angle : angle - Math.PI) + (null !== (_a = this.attribute.label.refAngle) && void 0 !== _a ? _a : 0);
     }
-    getTextStyle(position) {
-        return DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP[position];
+    getTextStyle(position, labelAngle, autoRotate) {
+        return Math.abs(Math.abs(labelAngle) - Math.PI / 2) < 1e-4 ? autoRotate ? {
+            textAlign: "right",
+            textBaseline: "middle"
+        } : {
+            textAlign: "center",
+            textBaseline: labelAngle > 0 && position.includes("inside") || labelAngle < 0 && !position.includes("inside") ? "bottom" : "top"
+        } : isPostiveXAxisCartes(labelAngle) ? DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP.postiveXAxis[position] : DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP.negativeXAxis[position];
     }
     createSegment() {
         const {points: points, startSymbol: startSymbol, endSymbol: endSymbol, lineStyle: lineStyle, mainSegmentIndex: mainSegmentIndex, multiSegment: multiSegment, state: state} = this.attribute;
@@ -74,14 +83,19 @@ export class MarkLine extends MarkCommonLine {
         });
     }
     setLineAttributes() {
-        const {points: points, startSymbol: startSymbol, endSymbol: endSymbol, lineStyle: lineStyle, mainSegmentIndex: mainSegmentIndex, multiSegment: multiSegment} = this.attribute;
+        const {points: points, startSymbol: startSymbol, endSymbol: endSymbol, lineStyle: lineStyle, mainSegmentIndex: mainSegmentIndex, multiSegment: multiSegment, state: state} = this.attribute;
         this._line && this._line.setAttributes({
             points: points,
             startSymbol: startSymbol,
             endSymbol: endSymbol,
             lineStyle: lineStyle,
             mainSegmentIndex: mainSegmentIndex,
-            multiSegment: multiSegment
+            multiSegment: multiSegment,
+            state: {
+                line: merge({}, DEFAULT_STATES, null == state ? void 0 : state.line),
+                startSymbol: merge({}, DEFAULT_STATES, null == state ? void 0 : state.lineStartSymbol),
+                endSymbol: merge({}, DEFAULT_STATES, null == state ? void 0 : state.lineEndSymbol)
+            }
         });
     }
     isValidPoints() {

package/es/marker/line.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/marker/line.ts"],"names":[],"mappings":"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","file":"line.js","sourcesContent":["import { isValidNumber, merge } from '@visactor/vutils';\nimport type { IMarkLineLabelPosition } from './type';\n// eslint-disable-next-line no-duplicate-imports\nimport type { MarkLineAttrs, MarkerAnimationState } from './type';\nimport type { ComponentOptions } from '../interface';\nimport { loadMarkLineComponent } from './register';\nimport type { Point } from '../core/type';\nimport { MarkCommonLine } from './common-line';\nimport type { ArcSegment } from '../segment';\n// eslint-disable-next-line no-duplicate-imports\nimport { Segment } from '../segment';\nimport { DEFAULT_STATES } from '../constant';\nimport { DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP, DEFAULT_MARK_LINE_THEME } from './config';\nimport type { ILineGraphicAttribute } from '@visactor/vrender-core';\nimport { markCommonLineAnimate } from './animate/animate';\nimport { limitShapeInBounds } from '../util/limit-shape';\n\nloadMarkLineComponent();\n\nexport function registerMarkLineAnimate() {\n  MarkLine._animate = markCommonLineAnimate;\n}\n\nexport class MarkLine extends MarkCommonLine<ILineGraphicAttribute, IMarkLineLabelPosition> {\n  name = 'markLine';\n  // eslint-disable-next-line max-len\n  static defaultAttributes: Partial<MarkLineAttrs> = DEFAULT_MARK_LINE_THEME as unknown as MarkLineAttrs;\n  protected _line!: Segment | ArcSegment;\n\n  /** animate */\n  protected markerAnimate(state: MarkerAnimationState) {\n    if (MarkLine._animate && this._animationConfig) {\n      MarkLine._animate(this._line, this._label, this._animationConfig, state);\n    }\n  }\n\n  constructor(attributes: MarkLineAttrs, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, MarkLine.defaultAttributes, attributes));\n  }\n\n  protected getPointAttrByPosition(position: IMarkLineLabelPosition) {\n    const { label = {} } = this.attribute;\n    const { refX = 0, refY = 0 } = label;\n    const points = this._line.getMainSegmentPoints();\n    const labelAngle = this._line.getEndAngle() ?? 0;\n\n    const labelOffsetX = refX * Math.cos(labelAngle) + refX * Math.cos(labelAngle - Math.PI / 2);\n    const labelOffsetY = refX * Math.sin(labelAngle) + refY * Math.sin(labelAngle - Math.PI / 2);\n\n    if (position.includes('start') || position.includes('Start')) {\n      return {\n        position: {\n          x: points[0].x + labelOffsetX,\n          y: points[0].y + labelOffsetY\n        },\n        angle: labelAngle\n      };\n    } else if (position.includes('middle') || position.includes('Middle')) {\n      return {\n        position: {\n          x: (points[0].x + points[points.length - 1].x) / 2 + labelOffsetX,\n          y: (points[0].y + points[points.length - 1].y) / 2 + labelOffsetY\n        },\n        angle: labelAngle\n      };\n    }\n    return {\n      position: {\n        x: points[points.length - 1].x + labelOffsetX,\n        y: points[points.length - 1].y + labelOffsetY\n      },\n      angle: labelAngle\n    };\n  }\n\n  protected getRotateByAngle(angle: number): number {\n    return angle + (this.attribute.label.refAngle ?? 0);\n  }\n\n  protected getTextStyle(position: IMarkLineLabelPosition) {\n    return DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP[position];\n  }\n\n  protected createSegment() {\n    const { points, startSymbol, endSymbol, lineStyle, mainSegmentIndex, multiSegment, state } = this\n      .attribute as MarkLineAttrs;\n    return new Segment({\n      points,\n      startSymbol,\n      endSymbol,\n      lineStyle,\n      mainSegmentIndex,\n      multiSegment,\n      pickable: false, // 组件容器本身不参与拾取\n      state: {\n        line: merge({}, DEFAULT_STATES, state?.line),\n        startSymbol: merge({}, DEFAULT_STATES, state?.lineStartSymbol),\n        endSymbol: merge({}, DEFAULT_STATES, state?.lineEndSymbol)\n      }\n    });\n  }\n\n  protected setLineAttributes() {\n    const { points, startSymbol, endSymbol, lineStyle, mainSegmentIndex, multiSegment } = this\n      .attribute as MarkLineAttrs;\n    if (this._line) {\n      this._line.setAttributes({\n        points,\n        startSymbol,\n        endSymbol,\n        lineStyle,\n        mainSegmentIndex,\n        multiSegment\n      });\n    }\n  }\n\n  protected isValidPoints() {\n    const { points } = this.attribute as MarkLineAttrs;\n    if (!points || points.length < 2) {\n      return false;\n    }\n    let validFlag = true;\n    points.forEach((point: Point | Point[]) => {\n      if ((point as any).length) {\n        (point as Point[]).forEach((p: Point) => {\n          if (!isValidNumber((p as Point).x) || !isValidNumber((p as Point).y)) {\n            validFlag = false;\n            return;\n          }\n        });\n      } else if (!isValidNumber((point as Point).x) || !isValidNumber((point as Point).y)) {\n        validFlag = false;\n        return;\n      }\n    });\n    return validFlag;\n  }\n}\n"]}
+{"version":3,"sources":["../src/marker/line.ts"],"names":[],"mappings":"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","file":"line.js","sourcesContent":["import { isValidNumber, merge } from '@visactor/vutils';\nimport type { IMarkLineLabelPosition } from './type';\n// eslint-disable-next-line no-duplicate-imports\nimport type { MarkLineAttrs, MarkerAnimationState } from './type';\nimport type { ComponentOptions } from '../interface';\nimport { loadMarkLineComponent } from './register';\nimport type { Point } from '../core/type';\nimport { MarkCommonLine } from './common-line';\nimport type { ArcSegment } from '../segment';\n// eslint-disable-next-line no-duplicate-imports\nimport { Segment } from '../segment';\nimport { DEFAULT_STATES } from '../constant';\nimport { DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP, DEFAULT_MARK_LINE_THEME } from './config';\nimport type { ILineGraphicAttribute } from '@visactor/vrender-core';\nimport { markCommonLineAnimate } from './animate/animate';\nimport { isPostiveXAxisCartes } from '../util';\n\nloadMarkLineComponent();\n\nexport function registerMarkLineAnimate() {\n  MarkLine._animate = markCommonLineAnimate;\n}\n\nexport class MarkLine extends MarkCommonLine<ILineGraphicAttribute, IMarkLineLabelPosition> {\n  name = 'markLine';\n  // eslint-disable-next-line max-len\n  static defaultAttributes: Partial<MarkLineAttrs> = DEFAULT_MARK_LINE_THEME as unknown as MarkLineAttrs;\n  protected _line!: Segment | ArcSegment;\n\n  /** animate */\n  protected markerAnimate(state: MarkerAnimationState) {\n    if (MarkLine._animate && this._animationConfig) {\n      MarkLine._animate(this._line, this._label, this._animationConfig, state);\n    }\n  }\n\n  constructor(attributes: MarkLineAttrs, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, MarkLine.defaultAttributes, attributes));\n  }\n\n  protected getPointAttrByPosition(position: IMarkLineLabelPosition) {\n    const { label = {} } = this.attribute;\n    const { refX = 0, refY = 0 } = label;\n    const points = this._line.getMainSegmentPoints();\n    const lineEndAngle = this._line.getEndAngle() ?? 0;\n    const labelAngle = isPostiveXAxisCartes(lineEndAngle) ? lineEndAngle : lineEndAngle;\n\n    const labelOffsetX = refX * Math.cos(labelAngle) + refY * Math.cos(labelAngle - Math.PI / 2);\n    const labelOffsetY = refX * Math.sin(labelAngle) + refY * Math.sin(labelAngle - Math.PI / 2);\n\n    if (position.includes('start') || position.includes('Start')) {\n      return {\n        position: {\n          x: points[0].x + labelOffsetX,\n          y: points[0].y + labelOffsetY\n        },\n        angle: labelAngle\n      };\n    } else if (position.includes('middle') || position.includes('Middle')) {\n      return {\n        position: {\n          x: (points[0].x + points[points.length - 1].x) / 2 + labelOffsetX,\n          y: (points[0].y + points[points.length - 1].y) / 2 + labelOffsetY\n        },\n        angle: labelAngle\n      };\n    }\n    return {\n      position: {\n        x: points[points.length - 1].x + labelOffsetX,\n        y: points[points.length - 1].y + labelOffsetY\n      },\n      angle: labelAngle\n    };\n  }\n\n  protected getRotateByAngle(angle: number): number {\n    const itemAngle = isPostiveXAxisCartes(angle) ? angle : angle - Math.PI;\n    return itemAngle + (this.attribute.label.refAngle ?? 0);\n  }\n\n  protected getTextStyle(position: IMarkLineLabelPosition, labelAngle: number, autoRotate: boolean) {\n    // 垂直方向例外\n    if (Math.abs(Math.abs(labelAngle) - Math.PI / 2) < 0.0001) {\n      if (autoRotate) {\n        return {\n          textAlign: 'right',\n          textBaseline: 'middle'\n        };\n      }\n      return {\n        textAlign: 'center',\n        textBaseline:\n          (labelAngle > 0 && position.includes('inside')) || (labelAngle < 0 && !position.includes('inside'))\n            ? 'bottom'\n            : 'top'\n      };\n    }\n\n    if (isPostiveXAxisCartes(labelAngle)) {\n      return DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP.postiveXAxis[position];\n    }\n    return DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP.negativeXAxis[position];\n  }\n\n  protected createSegment() {\n    const { points, startSymbol, endSymbol, lineStyle, mainSegmentIndex, multiSegment, state } = this\n      .attribute as MarkLineAttrs;\n    return new Segment({\n      points,\n      startSymbol,\n      endSymbol,\n      lineStyle,\n      mainSegmentIndex,\n      multiSegment,\n      pickable: false, // 组件容器本身不参与拾取\n      state: {\n        line: merge({}, DEFAULT_STATES, state?.line),\n        startSymbol: merge({}, DEFAULT_STATES, state?.lineStartSymbol),\n        endSymbol: merge({}, DEFAULT_STATES, state?.lineEndSymbol)\n      }\n    });\n  }\n\n  protected setLineAttributes() {\n    const { points, startSymbol, endSymbol, lineStyle, mainSegmentIndex, multiSegment, state } = this\n      .attribute as MarkLineAttrs;\n    if (this._line) {\n      this._line.setAttributes({\n        points,\n        startSymbol,\n        endSymbol,\n        lineStyle,\n        mainSegmentIndex,\n        multiSegment,\n        state: {\n          line: merge({}, DEFAULT_STATES, state?.line),\n          startSymbol: merge({}, DEFAULT_STATES, state?.lineStartSymbol),\n          endSymbol: merge({}, DEFAULT_STATES, state?.lineEndSymbol)\n        }\n      });\n    }\n  }\n\n  protected isValidPoints() {\n    const { points } = this.attribute as MarkLineAttrs;\n    if (!points || points.length < 2) {\n      return false;\n    }\n    let validFlag = true;\n    points.forEach((point: Point | Point[]) => {\n      if ((point as any).length) {\n        (point as Point[]).forEach((p: Point) => {\n          if (!isValidNumber((p as Point).x) || !isValidNumber((p as Point).y)) {\n            validFlag = false;\n            return;\n          }\n        });\n      } else if (!isValidNumber((point as Point).x) || !isValidNumber((point as Point).y)) {\n        validFlag = false;\n        return;\n      }\n    });\n    return validFlag;\n  }\n}\n"]}

package/es/marker/point.d.ts

@@ -1,4 +1,5 @@
 import type { IGroup, IImage, ISymbol, IImageGraphicAttribute, IRichText, IRichTextGraphicAttribute } from '@visactor/vrender-core';
+import type { IPointLike } from '@visactor/vutils';
 import { Tag } from '../tag';
 import { Marker } from './base';
 import type { IItemContent, IItemLine, MarkPointAnimationType, MarkPointAttrs, MarkerAnimationState } from './type';
@@ -10,6 +11,16 @@ export declare class MarkPoint extends Marker<MarkPointAttrs, MarkPointAnimation
     name: string;
     static defaultAttributes: {
         interactive: boolean;
+        targetSymbol: {
+            visible: boolean;
+            offset: number;
+            style: {
+                symbolType: string;
+                size: number;
+                fill: boolean;
+                stroke: string;
+            };
+        };
         itemLine: {
             visible: boolean;
             decorativeLine: {
@@ -69,24 +80,45 @@ export declare class MarkPoint extends Marker<MarkPointAttrs, MarkPointAnimation
     defaultExitAnimation: import("./type").MarkerExitAnimation;
     protected markerAnimate(state: MarkerAnimationState): void;
     private _item;
+    private _targetItem;
     private _line?;
     private _decorativeLine;
+    private _isArcLine;
     constructor(attributes: MarkPointAttrs, options?: ComponentOptions);
     protected setLabelPos(): void;
-    protected setItemAttributes(item: ISymbol | Tag | IImage | IRichText, itemContent: IItemContent, itemPosition: Point, itemType: 'symbol' | 'text' | 'image' | 'richText' | 'custom'): void;
+    protected getTextAlignAttr(autoRotate: boolean, offsetX: number, offsetY: number, lineEndAngle: number, itemPosition: keyof typeof IMarkPointItemPosition): {
+        textAlign: import("@visactor/vrender-core").TextAlignType;
+        textBaseline: import("@visactor/vrender-core").TextBaselineType;
+    };
+    protected setItemAttributes(item: ISymbol | Tag | IImage | IRichText, itemContent: IItemContent, newPosition: Point, newItemPosition: Point, itemType: 'symbol' | 'text' | 'image' | 'richText' | 'custom'): void;
     protected getItemDx(item: ISymbol | Tag | IImage | IRichText, position: keyof typeof IMarkPointItemPosition, style?: IImageGraphicAttribute | IRichTextGraphicAttribute): number;
     protected getItemDy(item: ISymbol | Tag | IImage | IRichText, position: keyof typeof IMarkPointItemPosition, style?: IImageGraphicAttribute | IRichTextGraphicAttribute): number;
-    protected initItem(itemContent: IItemContent, itemPosition: Point): IGroup | IRichText | Tag | ISymbol | IImage;
-    protected getItemLineAttr(itemLine: IItemLine, position: Point, itemPosition: Point): Point[];
-    protected setItemLineAttr(itemLine: IItemLine, position: Point, itemPosition: Point, visible: boolean): void;
-    protected getDecorativeLineAttr(itemLine: IItemLine, itemPosition: Point): {
+    protected initItem(itemContent: IItemContent, newPosition: Point, newItemPosition: Point): IGroup | IRichText | Tag | ISymbol | IImage;
+    protected getItemLineAttr(itemLine: IItemLine, newPosition: Point, newItemPosition: Point): {
+        points: Point[];
+        center: {
+            x: number;
+            y: number;
+        };
+        radius: number;
+        startAngle: number;
+        endAngle: number;
+    };
+    protected reDrawLine(itemLine: IItemLine, pointsAttr: any): void;
+    protected setItemLineAttr(itemLine: IItemLine, newPosition: Point, newItemPosition: Point): void;
+    protected getDecorativeLineAttr(itemLine: IItemLine): {
         startPointOffsetX: number;
         startPointOffsetY: number;
         endPointOffsetX: number;
         endPointOffsetY: number;
     };
-    protected setDecorativeLineAttr(itemLine: IItemLine, itemPosition: Point, visible: boolean): void;
-    protected setAllOfItemsAttr(itemPosition: Point): void;
+    protected setDecorativeLineAttr(itemLine: IItemLine, newItemPosition: Point, visible: boolean): void;
+    protected setTargetItemAttributes(targetItem: any, position: IPointLike): void;
+    protected setAllOfItemsAttr(newPosition: Point, newItemPosition: Point): void;
+    protected computeNewPositionAfterTargetItem(position: Point): {
+        newPosition: Point;
+        newItemPosition: Point;
+    };
     protected initMarker(container: IGroup): void;
     protected updateMarker(): void;
     protected isValidPoints(): boolean;

package/es/marker/point.js

@@ -2,7 +2,7 @@ import { graphicCreator } from "@visactor/vrender-core";
 
 import { isValidNumber, merge } from "@visactor/vutils";
 
-import { Segment } from "../segment";
+import { ArcSegment, Segment } from "../segment";
 
 import { Tag } from "../tag";
 
@@ -20,6 +20,8 @@ import { DEFAULT_STATES } from "../constant";
 
 import { DefaultExitMarkerAnimation, DefaultUpdateMarkPointAnimation, markPointAnimate } from "./animate/animate";
 
+import { deltaXYToAngle, isPostiveXAxisCartes, isPostiveXAxisPolar, removeRepeatPoint } from "../util";
+
 loadMarkPointComponent();
 
 export function registerMarkPointAnimate() {
@@ -33,24 +35,40 @@ export class MarkPoint extends Marker {
     constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, MarkPoint.defaultAttributes, attributes)), 
         this.name = "markPoint", this.defaultUpdateAnimation = DefaultUpdateMarkPointAnimation, 
-        this.defaultExitAnimation = DefaultExitMarkerAnimation;
+        this.defaultExitAnimation = DefaultExitMarkerAnimation, this._isArcLine = !1;
     }
     setLabelPos() {}
-    setItemAttributes(item, itemContent, itemPosition, itemType) {
-        var _a;
+    getTextAlignAttr(autoRotate, offsetX, offsetY, lineEndAngle, itemPosition) {
+        let isPostiveXAxis = !0;
+        return isPostiveXAxis = this._isArcLine ? isPostiveXAxisPolar(lineEndAngle, this._line.isReverseArc) : isPostiveXAxisCartes(lineEndAngle), 
+        isPostiveXAxis ? DEFAULT_MARK_POINT_TEXT_STYLE_MAP.postiveXAxis[itemPosition] : DEFAULT_MARK_POINT_TEXT_STYLE_MAP.negativeXAxis[itemPosition];
+    }
+    setItemAttributes(item, itemContent, newPosition, newItemPosition, itemType) {
+        var _a, _b;
         if (!item) return;
-        const {autoRotate: autoRotate = !0, refX: refX = 0, refY: refY = 0, refAngle: refAngle = 0, textStyle: textStyle = {}, richTextStyle: richTextStyle = {}, imageStyle: imageStyle = {}, position: position = IMarkPointItemPosition.middle} = itemContent, itemAngle = (null === (_a = this._line) || void 0 === _a ? void 0 : _a.getEndAngle()) || 0, itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2), itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);
-        "text" === itemType ? item.setAttributes(Object.assign(Object.assign({}, textStyle), {
-            textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(null == itemContent ? void 0 : itemContent.position) || "end"]), textStyle.textStyle)
-        })) : "richText" === itemType ? item.setAttributes({
-            dx: this.getItemDx(item, position, richTextStyle) + (richTextStyle.dx || 0),
-            dy: this.getItemDy(item, position, richTextStyle) + (richTextStyle.dy || 0)
-        }) : "image" === itemType && item.setAttributes({
-            dx: this.getItemDx(item, position, imageStyle) + (imageStyle.dx || 0),
-            dy: this.getItemDy(item, position, imageStyle) + (imageStyle.dy || 0)
-        }), item.setAttributes({
-            x: itemPosition.x + (itemOffsetX || 0),
-            y: itemPosition.y + (itemOffsetY || 0),
+        const {autoRotate: autoRotate = !0, refX: refX = 0, refY: refY = 0, refAngle: refAngle = 0, textStyle: textStyle = {}, richTextStyle: richTextStyle = {}, imageStyle: imageStyle = {}, position: positionType = IMarkPointItemPosition.middle} = itemContent, {state: state} = this.attribute, lineEndAngle = (null === (_a = this._line) || void 0 === _a ? void 0 : _a.getEndAngle()) || 0, itemRefOffsetX = refX * Math.cos(lineEndAngle) + refY * Math.cos(lineEndAngle), itemRefOffsetY = refX * Math.sin(lineEndAngle) + refY * Math.sin(lineEndAngle);
+        if ("text" === itemType) {
+            const offsetX = newItemPosition.x - newPosition.x, offsetY = newItemPosition.y - newPosition.y;
+            item.setAttributes(Object.assign(Object.assign({}, textStyle), {
+                textStyle: Object.assign(Object.assign({}, this.getTextAlignAttr(autoRotate, offsetX, offsetY, lineEndAngle, null !== (_b = itemContent.position) && void 0 !== _b ? _b : "end")), textStyle.textStyle),
+                state: {
+                    panel: merge({}, DEFAULT_STATES, null == state ? void 0 : state.textBackground),
+                    text: merge({}, DEFAULT_STATES, null == state ? void 0 : state.text)
+                }
+            }));
+        } else "richText" === itemType ? (item.setAttributes({
+            dx: this.getItemDx(item, positionType, richTextStyle) + (richTextStyle.dx || 0),
+            dy: this.getItemDy(item, positionType, richTextStyle) + (richTextStyle.dy || 0)
+        }), item.states = merge({}, DEFAULT_STATES, null == state ? void 0 : state.richText)) : "image" === itemType && (item.setAttributes({
+            dx: this.getItemDx(item, positionType, imageStyle) + (imageStyle.dx || 0),
+            dy: this.getItemDy(item, positionType, imageStyle) + (imageStyle.dy || 0)
+        }), item.states = merge({}, DEFAULT_STATES, null == state ? void 0 : state.image));
+        let itemAngle, isPostiveXAxis = !0;
+        this._isArcLine ? (isPostiveXAxis = isPostiveXAxisPolar(lineEndAngle, this._line.isReverseArc), 
+        itemAngle = isPostiveXAxis ? lineEndAngle : lineEndAngle - Math.PI) : (isPostiveXAxis = isPostiveXAxisCartes(lineEndAngle), 
+        itemAngle = isPostiveXAxis ? lineEndAngle : lineEndAngle - Math.PI), item.setAttributes({
+            x: newItemPosition.x + (itemRefOffsetX || 0),
+            y: newItemPosition.y + (itemRefOffsetY || 0),
             angle: autoRotate && itemAngle + refAngle
         });
     }
@@ -64,49 +82,86 @@ export class MarkPoint extends Marker {
         const height = null !== (_b = null === (_a = null == item ? void 0 : item.AABBBounds) || void 0 === _a ? void 0 : _a.height()) && void 0 !== _b ? _b : (null == style ? void 0 : style.height) || 0;
         return position.includes("top") || position.includes("Top") ? -height : position.includes("middle") || position.includes("Middle") ? -height / 2 : 0;
     }
-    initItem(itemContent, itemPosition) {
+    initItem(itemContent, newPosition, newItemPosition) {
         const {state: state} = this.attribute, {type: type = "text", symbolStyle: symbolStyle, richTextStyle: richTextStyle, imageStyle: imageStyle, renderCustomCallback: renderCustomCallback} = itemContent;
         let item;
-        return "symbol" === type ? (item = graphicCreator.symbol(Object.assign(Object.assign({}, itemPosition), symbolStyle)), 
-        item.states = merge({}, DEFAULT_STATES, null == state ? void 0 : state.symbol)) : "text" === type ? item = new Tag(Object.assign(Object.assign({}, itemPosition), {
+        return "symbol" === type ? (item = graphicCreator.symbol(Object.assign(Object.assign({}, newItemPosition), symbolStyle)), 
+        item.states = merge({}, DEFAULT_STATES, null == state ? void 0 : state.symbol)) : "text" === type ? item = new Tag(Object.assign(Object.assign({}, newItemPosition), {
             state: {
                 panel: merge({}, DEFAULT_STATES, null == state ? void 0 : state.textBackground),
                 text: merge({}, DEFAULT_STATES, null == state ? void 0 : state.text)
             }
-        })) : "richText" === type ? (item = graphicCreator.richtext(Object.assign(Object.assign({}, itemPosition), richTextStyle)), 
-        item.states = merge({}, DEFAULT_STATES, null == state ? void 0 : state.richText)) : "image" === type ? (item = graphicCreator.image(Object.assign(Object.assign({}, itemPosition), imageStyle)), 
+        })) : "richText" === type ? (item = graphicCreator.richtext(Object.assign(Object.assign({}, newItemPosition), richTextStyle)), 
+        item.states = merge({}, DEFAULT_STATES, null == state ? void 0 : state.richText)) : "image" === type ? (item = graphicCreator.image(Object.assign(Object.assign({}, newItemPosition), imageStyle)), 
         item.states = merge({}, DEFAULT_STATES, null == state ? void 0 : state.image)) : "custom" === type && renderCustomCallback && (item = renderCustomCallback(), 
         item.states = merge({}, DEFAULT_STATES, null == state ? void 0 : state.customMark)), 
-        item.name = `mark-point-${type}`, this.setItemAttributes(item, itemContent, itemPosition, type), 
+        item.name = `mark-point-${type}`, this.setItemAttributes(item, itemContent, newPosition, newItemPosition, type), 
         item;
     }
-    getItemLineAttr(itemLine, position, itemPosition) {
-        let points = [];
-        const {type: type = "type-s"} = itemLine;
-        return points = "type-do" === type ? [ position, {
-            x: (position.x + itemPosition.x) / 2,
-            y: itemPosition.y
-        }, itemPosition ] : "type-po" === type ? [ position, {
-            x: itemPosition.x,
-            y: position.y
-        }, itemPosition ] : "type-op" === type ? [ position, {
-            x: position.x,
-            y: itemPosition.y
-        }, itemPosition ] : [ position, itemPosition ], points;
+    getItemLineAttr(itemLine, newPosition, newItemPosition) {
+        let points = [], center = {
+            x: 0,
+            y: 0
+        }, radius = 0, startAngle = 0, endAngle = 0;
+        const {type: type = "type-s", arcRatio: arcRatio = .8} = itemLine;
+        if (this._isArcLine) {
+            const {x: x1, y: y1} = newPosition, {x: x2, y: y2} = newItemPosition, x0 = (x1 + x2) / 2, y0 = (y1 + y2) / 2, k = y1 === y2 ? 0 : -(x1 - x2) / (y1 - y2), centerX = x0 + arcRatio * (y2 > y1 ? -1 : 1) * x0, centerY = (x => k * (x - x0) + y0)(centerX);
+            center = {
+                x: centerX,
+                y: centerY
+            }, startAngle = deltaXYToAngle(y1 - centerY, x1 - centerX), endAngle = deltaXYToAngle(y2 - centerY, x2 - centerX), 
+            radius = Math.sqrt((centerX - x1) * (centerX - x1) + (centerY - y1) * (centerY - y1));
+        } else points = "type-do" === type ? [ newPosition, {
+            x: (newPosition.x + newItemPosition.x) / 2,
+            y: newItemPosition.y
+        }, newItemPosition ] : "type-po" === type ? [ newPosition, {
+            x: newItemPosition.x,
+            y: newPosition.y
+        }, newItemPosition ] : "type-op" === type ? [ newPosition, {
+            x: newPosition.x,
+            y: newItemPosition.y
+        }, newItemPosition ] : [ newPosition, newItemPosition ];
+        return points = removeRepeatPoint(points), {
+            points: points,
+            center: center,
+            radius: radius,
+            startAngle: startAngle,
+            endAngle: endAngle
+        };
     }
-    setItemLineAttr(itemLine, position, itemPosition, visible) {
+    reDrawLine(itemLine, pointsAttr) {
+        this._line.release();
+        const {startSymbol: startSymbol, endSymbol: endSymbol, lineStyle: lineStyle, type: type = "type-s"} = itemLine, {state: state} = this.attribute, lineConstructor = this._isArcLine ? ArcSegment : Segment;
+        this._container.removeChild(this._line), this._line = new lineConstructor(Object.assign(Object.assign({}, pointsAttr), {
+            pickable: !1,
+            startSymbol: startSymbol,
+            endSymbol: endSymbol,
+            lineStyle: lineStyle,
+            visible: itemLine.visible,
+            state: {
+                line: merge({}, DEFAULT_STATES, null == state ? void 0 : state.line),
+                startSymbol: merge({}, DEFAULT_STATES, null == state ? void 0 : state.lineStartSymbol),
+                endSymbol: merge({}, DEFAULT_STATES, null == state ? void 0 : state.lineEndSymbol)
+            }
+        })), this._container.add(this._line);
+    }
+    setItemLineAttr(itemLine, newPosition, newItemPosition) {
         if (this._line) {
-            const {startSymbol: startSymbol, endSymbol: endSymbol, lineStyle: lineStyle} = itemLine, points = this.getItemLineAttr(itemLine, position, itemPosition);
-            this._line.setAttributes({
-                points: points,
+            const {startSymbol: startSymbol, endSymbol: endSymbol, lineStyle: lineStyle, type: type = "type-s"} = itemLine, {state: state} = this.attribute, pointsAttr = this.getItemLineAttr(itemLine, newPosition, newItemPosition);
+            "type-arc" === type && "arc-segment" === this._line.key || "type-arc" !== type && "segment" === this._line.key ? this._line.setAttributes(Object.assign(Object.assign({}, pointsAttr), {
                 startSymbol: startSymbol,
                 endSymbol: endSymbol,
                 lineStyle: lineStyle,
-                visible: visible
-            });
+                visible: itemLine.visible,
+                state: {
+                    line: merge({}, DEFAULT_STATES, null == state ? void 0 : state.line),
+                    startSymbol: merge({}, DEFAULT_STATES, null == state ? void 0 : state.lineStartSymbol),
+                    endSymbol: merge({}, DEFAULT_STATES, null == state ? void 0 : state.lineEndSymbol)
+                }
+            })) : this.reDrawLine(itemLine, pointsAttr);
         }
     }
-    getDecorativeLineAttr(itemLine, itemPosition) {
+    getDecorativeLineAttr(itemLine) {
         var _a;
         const decorativeLength = (null === (_a = null == itemLine ? void 0 : itemLine.decorativeLine) || void 0 === _a ? void 0 : _a.length) || 10, itemAngle = this._line.getEndAngle() || 0;
         return {
@@ -116,25 +171,34 @@ export class MarkPoint extends Marker {
             endPointOffsetY: -decorativeLength / 2 * Math.sin(itemAngle - Math.PI / 2)
         };
     }
-    setDecorativeLineAttr(itemLine, itemPosition, visible) {
+    setDecorativeLineAttr(itemLine, newItemPosition, visible) {
+        var _a;
         if (this._decorativeLine) {
-            const {lineStyle: lineStyle} = itemLine, {startPointOffsetX: startPointOffsetX, startPointOffsetY: startPointOffsetY, endPointOffsetX: endPointOffsetX, endPointOffsetY: endPointOffsetY} = this.getDecorativeLineAttr(itemLine, itemPosition);
+            const {lineStyle: lineStyle} = itemLine, {startPointOffsetX: startPointOffsetX, startPointOffsetY: startPointOffsetY, endPointOffsetX: endPointOffsetX, endPointOffsetY: endPointOffsetY} = this.getDecorativeLineAttr(itemLine);
             this._decorativeLine.setAttributes(Object.assign(Object.assign({
                 points: [ {
-                    x: itemPosition.x + startPointOffsetX,
-                    y: itemPosition.y + startPointOffsetY
+                    x: newItemPosition.x + startPointOffsetX,
+                    y: newItemPosition.y + startPointOffsetY
                 }, {
-                    x: itemPosition.x + endPointOffsetX,
-                    y: itemPosition.y + endPointOffsetY
+                    x: newItemPosition.x + endPointOffsetX,
+                    y: newItemPosition.y + endPointOffsetY
                 } ]
             }, lineStyle), {
                 visible: visible
-            }));
+            })), this._decorativeLine.states = merge({}, DEFAULT_STATES, null === (_a = this.attribute.state) || void 0 === _a ? void 0 : _a.line);
         }
     }
-    setAllOfItemsAttr(itemPosition) {
+    setTargetItemAttributes(targetItem, position) {
+        var _a, _b;
+        this._targetItem && (this._targetItem.setAttributes(Object.assign({
+            x: position.x,
+            y: position.y,
+            visible: null !== (_a = targetItem.visible) && void 0 !== _a && _a
+        }, targetItem.style)), this._targetItem.states = merge({}, DEFAULT_STATES, null === (_b = this.attribute.state) || void 0 === _b ? void 0 : _b.targetItem));
+    }
+    setAllOfItemsAttr(newPosition, newItemPosition) {
         var _a;
-        const {position: position, itemLine: itemLine = {}, itemContent: itemContent = {}, limitRect: limitRect} = this.attribute, {type: type = "text", confine: confine} = itemContent;
+        const {position: position, itemLine: itemLine = {}, itemContent: itemContent = {}, limitRect: limitRect, targetSymbol: targetSymbol} = this.attribute, {type: type = "text", confine: confine} = itemContent;
         if (limitRect && confine) {
             const {x: x, y: y, width: width, height: height} = limitRect, {dx: dx, dy: dy} = computeOffsetForlimit(this._item, {
                 x1: x,
@@ -142,40 +206,68 @@ export class MarkPoint extends Marker {
                 x2: x + width,
                 y2: y + height
             });
-            itemPosition.x = itemPosition.x + dx, itemPosition.y = itemPosition.y + dy;
+            newItemPosition.x = newItemPosition.x + dx, newItemPosition.y = newItemPosition.y + dy;
         }
-        this.setItemAttributes(this._item, itemContent, itemPosition, type), this.setItemLineAttr(itemLine, position, itemPosition, itemLine.visible), 
-        this.setDecorativeLineAttr(itemLine, itemPosition, null === (_a = itemLine.decorativeLine) || void 0 === _a ? void 0 : _a.visible);
+        this.setTargetItemAttributes(targetSymbol, position), this.setItemLineAttr(itemLine, newPosition, newItemPosition), 
+        this.setItemAttributes(this._item, itemContent, newPosition, newItemPosition, type), 
+        this.setDecorativeLineAttr(itemLine, newItemPosition, null === (_a = itemLine.decorativeLine) || void 0 === _a ? void 0 : _a.visible);
+    }
+    computeNewPositionAfterTargetItem(position) {
+        var _a;
+        const {itemContent: itemContent = {}, targetSymbol: targetSymbol} = this.attribute, {offsetX: itemContentOffsetX = 0, offsetY: itemContentOffsetY = 0} = itemContent, {offset: targetSymbolOffset = 0, style: targetSymbolStyle, visible: targetItemvisible = !1, size: targetSymbolSize} = targetSymbol, targetSize = targetItemvisible ? targetSymbolSize || (null !== (_a = targetSymbolStyle.size) && void 0 !== _a ? _a : 10) : 0, targetOffsetAngle = deltaXYToAngle(itemContentOffsetY, itemContentOffsetX);
+        return {
+            newPosition: {
+                x: position.x + (targetSize + targetSymbolOffset) * Math.cos(targetOffsetAngle),
+                y: position.y + (targetSize + targetSymbolOffset) * Math.sin(targetOffsetAngle)
+            },
+            newItemPosition: {
+                x: position.x + (targetSize + targetSymbolOffset) * Math.cos(targetOffsetAngle) + itemContentOffsetX,
+                y: position.y + (targetSize + targetSymbolOffset) * Math.sin(targetOffsetAngle) + itemContentOffsetY
+            }
+        };
     }
     initMarker(container) {
-        const {position: position, itemContent: itemContent = {}, state: state} = this.attribute, itemPosition = {
-            x: position.x + (itemContent.offsetX || 0),
-            y: position.y + (itemContent.offsetY || 0)
-        }, line = new Segment({
+        const {position: position, itemContent: itemContent = {}, itemLine: itemLine} = this.attribute, {type: itemLineType = "type-s", arcRatio: arcRatio = .8} = itemLine, {newPosition: newPosition, newItemPosition: newItemPosition} = this.computeNewPositionAfterTargetItem(position);
+        this._isArcLine = "type-arc" === itemLineType && 0 !== arcRatio && newPosition.x !== newItemPosition.x && newPosition.y !== newItemPosition.y;
+        const line = new (this._isArcLine ? ArcSegment : Segment)({
             points: [],
             pickable: !1,
-            state: {
-                line: merge({}, DEFAULT_STATES, null == state ? void 0 : state.line),
-                startSymbol: merge({}, DEFAULT_STATES, null == state ? void 0 : state.lineStartSymbol),
-                endSymbol: merge({}, DEFAULT_STATES, null == state ? void 0 : state.lineEndSymbol)
-            }
+            center: {
+                x: 0,
+                y: 0
+            },
+            radius: 0,
+            startAngle: 0,
+            endAngle: 0
         });
         line.name = "mark-point-line", this._line = line, container.add(line);
         const decorativeLine = graphicCreator.line({
             points: []
         });
-        decorativeLine.states = merge({}, DEFAULT_STATES, null == state ? void 0 : state.line), 
         decorativeLine.name = "mark-point-decorativeLine", this._decorativeLine = decorativeLine, 
         container.add(decorativeLine);
-        const item = this.initItem(itemContent, itemPosition);
-        this._item = item, this.setAllOfItemsAttr(itemPosition), container.add(item);
+        const targetItem = graphicCreator.symbol({});
+        targetItem.name = "mark-point-targetItem", this._targetItem = targetItem, container.add(this._targetItem);
+        const item = this.initItem(itemContent, newPosition, newItemPosition);
+        this._item = item, container.add(item), this.setAllOfItemsAttr(newPosition, newItemPosition);
     }
     updateMarker() {
-        const {position: position, itemContent: itemContent = {}} = this.attribute, {type: type = "text"} = itemContent, itemPosition = {
-            x: position.x + (itemContent.offsetX || 0),
-            y: position.y + (itemContent.offsetY || 0)
-        };
-        this.setItemAttributes(this._item, itemContent, itemPosition, type), this.setAllOfItemsAttr(itemPosition);
+        const {position: position, itemContent: itemContent = {}, itemLine: itemLine} = this.attribute, {type: type = "text"} = itemContent, {type: itemLineType = "type-s", arcRatio: arcRatio = .8} = itemLine, {newPosition: newPosition, newItemPosition: newItemPosition} = this.computeNewPositionAfterTargetItem(position), isArcLine = "type-arc" === itemLineType && 0 !== arcRatio && newPosition.x !== newItemPosition.x && newPosition.y !== newItemPosition.y;
+        isArcLine !== this._isArcLine ? (this._isArcLine = isArcLine, this.reDrawLine(itemLine, {
+            points: [ {
+                x: 0,
+                y: 0
+            } ],
+            pickable: !1,
+            center: {
+                x: 0,
+                y: 0
+            },
+            radius: 0,
+            startAngle: 0,
+            endAngle: 0
+        })) : this._isArcLine = isArcLine, this.setItemAttributes(this._item, itemContent, newPosition, newItemPosition, type), 
+        this.setAllOfItemsAttr(newPosition, newItemPosition);
     }
     isValidPoints() {
         const {position: position} = this.attribute;