@visactor/vrender-components 0.19.3 → 0.19.4-alpha.1

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 { isPostiveXAxis } 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 = (isPostiveXAxis(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 (isPostiveXAxis(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(labelAngle) === Math.PI / 2 ? autoRotate ? {
+            textAlign: "right",
+            textBaseline: "middle"
+        } : {
+            textAlign: "center",
+            textBaseline: labelAngle > 0 && position.includes("inside") || labelAngle < 0 && !position.includes("inside") ? "bottom" : "top"
+        } : isPostiveXAxis(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":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAKxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,0CAA0C,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAE/F,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,qBAAqB,EAAE,CAAC;AAExB,MAAM,UAAU,uBAAuB;IACrC,QAAQ,CAAC,QAAQ,GAAG,qBAAqB,CAAC;AAC5C,CAAC;AAED,MAAM,OAAO,QAAS,SAAQ,cAA6D;IAO/E,aAAa,CAAC,KAA2B;QACjD,IAAI,QAAQ,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC9C,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SAC1E;IACH,CAAC;IAED,YAAY,UAAyB,EAAE,OAA0B;QAC/D,KAAK,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;QAb/F,SAAI,GAAG,UAAU,CAAC;IAclB,CAAC;IAES,sBAAsB,CAAC,QAAgC;;QAC/D,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QACtC,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,mCAAI,CAAC,CAAC;QAEjD,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7F,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QAE7F,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;YAC5D,OAAO;gBACL,QAAQ,EAAE;oBACR,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY;oBAC7B,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY;iBAC9B;gBACD,KAAK,EAAE,UAAU;aAClB,CAAC;SACH;aAAM,IAAI,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YACrE,OAAO;gBACL,QAAQ,EAAE;oBACR,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,YAAY;oBACjE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,YAAY;iBAClE;gBACD,KAAK,EAAE,UAAU;aAClB,CAAC;SACH;QACD,OAAO;YACL,QAAQ,EAAE;gBACR,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY;gBAC7C,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY;aAC9C;YACD,KAAK,EAAE,UAAU;SAClB,CAAC;IACJ,CAAC;IAES,gBAAgB,CAAC,KAAa;;QACtC,OAAO,KAAK,GAAG,CAAC,MAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,mCAAI,CAAC,CAAC,CAAC;IACtD,CAAC;IAES,YAAY,CAAC,QAAgC;QACrD,OAAO,0CAA0C,CAAC,QAAQ,CAAC,CAAC;IAC9D,CAAC;IAES,aAAa;QACrB,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,IAAI;aAC9F,SAA0B,CAAC;QAC9B,OAAO,IAAI,OAAO,CAAC;YACjB,MAAM;YACN,WAAW;YACX,SAAS;YACT,SAAS;YACT,gBAAgB;YAChB,YAAY;YACZ,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC;gBAC5C,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,CAAC;gBAC9D,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,CAAC;aAC3D;SACF,CAAC,CAAC;IACL,CAAC;IAES,iBAAiB;QACzB,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,IAAI;aACvF,SAA0B,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;gBACvB,MAAM;gBACN,WAAW;gBACX,SAAS;gBACT,SAAS;gBACT,gBAAgB;gBAChB,YAAY;aACb,CAAC,CAAC;SACJ;IACH,CAAC;IAES,aAAa;QACrB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,SAA0B,CAAC;QACnD,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAChC,OAAO,KAAK,CAAC;SACd;QACD,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,CAAC,OAAO,CAAC,CAAC,KAAsB,EAAE,EAAE;YACxC,IAAK,KAAa,CAAC,MAAM,EAAE;gBACxB,KAAiB,CAAC,OAAO,CAAC,CAAC,CAAQ,EAAE,EAAE;oBACtC,IAAI,CAAC,aAAa,CAAE,CAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAE,CAAW,CAAC,CAAC,CAAC,EAAE;wBACpE,SAAS,GAAG,KAAK,CAAC;wBAClB,OAAO;qBACR;gBACH,CAAC,CAAC,CAAC;aACJ;iBAAM,IAAI,CAAC,aAAa,CAAE,KAAe,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAE,KAAe,CAAC,CAAC,CAAC,EAAE;gBACnF,SAAS,GAAG,KAAK,CAAC;gBAClB,OAAO;aACR;QACH,CAAC,CAAC,CAAC;QACH,OAAO,SAAS,CAAC;IACnB,CAAC;;AA/GM,0BAAiB,GAA2B,uBAAmD,CAAC","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 { limitShapeInBounds } from '../util/limit-shape';\nimport { isPostiveXAxis } 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 = isPostiveXAxis(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 = isPostiveXAxis(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(labelAngle) === Math.PI / 2) {\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 (isPostiveXAxis(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,14 @@ export declare class MarkPoint extends Marker<MarkPointAttrs, MarkPointAnimation
     name: string;
     static defaultAttributes: {
         interactive: boolean;
+        targetItemContent: {
+            visible: boolean;
+            margin: number;
+            symbolType: string;
+            size: number;
+            fill: boolean;
+            stroke: string;
+        };
         itemLine: {
             visible: boolean;
             decorativeLine: {
@@ -69,24 +78,49 @@ 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;
     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, angle: number, itemPosition: keyof typeof IMarkPointItemPosition): {
+        textAlign: string;
+        textBaseline: string;
+    };
+    protected setItemAttributes(item: ISymbol | Tag | IImage | IRichText, itemContent: IItemContent, 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, 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 setItemLineAttr(itemLine: IItemLine, newPosition: Point, newItemPosition: Point, visible: boolean): 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: {
+            x: number;
+            y: number;
+        };
+        newItemPosition: {
+            x: number;
+            y: number;
+        };
+    };
     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, isPostiveXAxis, removeRepeatPoint } from "../util";
+
 loadMarkPointComponent();
 
 export function registerMarkPointAnimate() {
@@ -36,21 +38,36 @@ export class MarkPoint extends Marker {
         this.defaultExitAnimation = DefaultExitMarkerAnimation;
     }
     setLabelPos() {}
-    setItemAttributes(item, itemContent, itemPosition, itemType) {
-        var _a;
+    getTextAlignAttr(autoRotate, angle, itemPosition) {
+        return Math.abs(angle) === Math.PI / 2 ? autoRotate ? {
+            textAlign: "right",
+            textBaseline: "middle"
+        } : {
+            textAlign: "center",
+            textBaseline: angle > 0 && itemPosition.includes("inside") || angle < 0 && !itemPosition.includes("inside") ? "bottom" : "top"
+        } : isPostiveXAxis(angle) ? DEFAULT_MARK_POINT_TEXT_STYLE_MAP.postiveXAxis[itemPosition] : DEFAULT_MARK_POINT_TEXT_STYLE_MAP.negativeXAxis[itemPosition];
+    }
+    setItemAttributes(item, itemContent, 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);
+        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 - Math.PI / 2), itemRefOffsetY = refX * Math.sin(lineEndAngle) + refY * Math.sin(lineEndAngle - 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),
+            textStyle: Object.assign(Object.assign({}, this.getTextAlignAttr(autoRotate, 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)
+            }
+        })) : "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));
+        const itemAngle = isPostiveXAxis(lineEndAngle) ? lineEndAngle : lineEndAngle - Math.PI;
+        item.setAttributes({
+            x: newItemPosition.x + (itemRefOffsetX || 0),
+            y: newItemPosition.y + (itemRefOffsetY || 0),
             angle: autoRotate && itemAngle + refAngle
         });
     }
@@ -64,49 +81,85 @@ 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, 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, 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 ("type-arc" === type) {
+            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 * 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) {
+    setItemLineAttr(itemLine, newPosition, newItemPosition, visible) {
         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);
+            if ("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: 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)
+                }
+            })); else {
+                this._line.release();
+                const lineConstructor = "type-arc" === type ? 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: 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);
+            }
         }
     }
-    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 +169,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, targetItemContent: targetItemContent} = 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 +204,51 @@ 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(targetItemContent, position), this.setItemLineAttr(itemLine, newPosition, newItemPosition, itemLine.visible), 
+        this.setItemAttributes(this._item, itemContent, newItemPosition, type), this.setDecorativeLineAttr(itemLine, newItemPosition, null === (_a = itemLine.decorativeLine) || void 0 === _a ? void 0 : _a.visible);
+    }
+    computeNewPositionAfterTargetItem(position) {
+        var _a;
+        const {itemContent: itemContent = {}, targetItemContent: targetItemContent} = this.attribute, {offsetX: itemContentOffsetX = 0, offsetY: itemContentOffsetY = 0} = itemContent, {margin: targetItemContentMargin = 0, style: targetItemContentStyle, visible: targetItemvisible = !1, size: targetItemContentSize} = targetItemContent, targetSize = targetItemvisible ? targetItemContentSize || (null !== (_a = targetItemContentStyle.size) && void 0 !== _a ? _a : 10) : 0, targetOffsetAngle = deltaXYToAngle(itemContentOffsetY, itemContentOffsetX);
+        return {
+            newPosition: {
+                x: position.x + (targetSize + targetItemContentMargin) * Math.cos(targetOffsetAngle),
+                y: position.y + (targetSize + targetItemContentMargin) * Math.sin(targetOffsetAngle)
+            },
+            newItemPosition: {
+                x: position.x + (targetSize + targetItemContentMargin) * Math.cos(targetOffsetAngle) + itemContentOffsetX,
+                y: position.y + (targetSize + targetItemContentMargin) * 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"} = itemLine, {newPosition: newPosition, newItemPosition: newItemPosition} = this.computeNewPositionAfterTargetItem(position), line = new ("type-arc" === itemLineType ? 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, 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 = {}} = this.attribute, {type: type = "text"} = itemContent, {newPosition: newPosition, newItemPosition: newItemPosition} = this.computeNewPositionAfterTargetItem(position);
+        this.setItemAttributes(this._item, itemContent, newItemPosition, type), this.setAllOfItemsAttr(newPosition, newItemPosition);
     }
     isValidPoints() {
         const {position: position} = this.attribute;