@labelbee/lb-annotation 1.8.0 → 1.9.0-alpha.2

package/es/core/toolOperation/LineToolOperation.js

@@ -0,0 +1,1369 @@
+import _ from 'lodash';
+import { ELineTypes, ELineColor, EToolName, ETextType } from '../../constant/tool.js';
+import ActionsHistory from '../../utils/ActionsHistory.js';
+import uuid from '../../utils/uuid.js';
+import EKeyCode from '../../constant/keyCode.js';
+import MathUtils from '../../utils/MathUtils.js';
+import { BasicToolOperation } from './basicToolOperation.js';
+import LineToolUtils from '../../utils/tool/LineToolUtils.js';
+import { createSmoothCurvePointsFromPointList, isInPolygon, createSmoothCurvePoints } from '../../utils/tool/polygonTool.js';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import CanvasUtils from '../../utils/tool/CanvasUtils.js';
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import StyleUtils from '../../utils/tool/StyleUtils.js';
+import AttributeUtils from '../../utils/tool/AttributeUtils.js';
+import TextAttributeClass from './textAttributeClass.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var EStatus;
+(function(EStatus2) {
+  EStatus2[EStatus2["Create"] = 0] = "Create";
+  EStatus2[EStatus2["Active"] = 1] = "Active";
+  EStatus2[EStatus2["None"] = 2] = "None";
+})(EStatus || (EStatus = {}));
+const SEGMENT_NUMBER = 16;
+const LINE_ORDER_OFFSET = {
+  x: 0,
+  y: 20
+};
+const POINT_RADIUS = 3;
+const POINT_ACTIVE_RADIUS = 5;
+const INNER_POINT_RADIUS = 2;
+class LineToolOperation extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.drawActivatedLine = (coord, e, hideTempAxis) => {
+      const activeLine = _.cloneDeep(this.activeLine);
+      if (!activeLine || activeLine.length === 0) {
+        return;
+      }
+      const isActiveLineValid = this.isActiveLineValid();
+      let order;
+      const existLine = this.selectedID ? this.lineList.find((i) => i.id === this.selectedID) : void 0;
+      if (existLine) {
+        order = existLine.order;
+      } else {
+        order = this.nextOrder();
+      }
+      const color = this.getLineColorByAttribute({attribute: this.defaultAttribute, valid: !!isActiveLineValid});
+      activeLine.map((point) => Object.assign(point, this.coordUtils.getRenderCoord(point)));
+      this.updateActiveArea();
+      this.drawLine(activeLine, coord, color, true, true);
+      this.drawLineNumber(activeLine[0], order, color, "", this.defaultAttribute, isActiveLineValid);
+      if (coord && this.isCreate) {
+        this.arc(coord, POINT_RADIUS, color);
+      }
+      if (this.cursor && !this.selectedPoint && !hideTempAxis && !this.isShift) {
+        this.arc(this.cursor, POINT_ACTIVE_RADIUS, color);
+      }
+    };
+    this.drawHoverPoint = (coord) => {
+      if (this.isMousedown) {
+        return;
+      }
+      if (coord && this.isLineSelected) {
+        const pointList = this.getPointList(this.activeLine);
+        const hoverPoint = this.activeLine.find((i) => LineToolUtils.calcDistance(this.coordUtils.getRenderCoord(i), coord) <= POINT_ACTIVE_RADIUS);
+        let nearestPoint;
+        if (!hoverPoint && this.activeLine) {
+          nearestPoint = this.findNearestPoint(pointList, coord);
+        }
+        this.hoverPointID = hoverPoint ? hoverPoint.id : void 0;
+        this.cursor = hoverPoint ? void 0 : nearestPoint == null ? void 0 : nearestPoint.point;
+      }
+    };
+    this.lineList = [];
+    this.activeLine = [];
+    this.coordsInsideActiveArea = false;
+    this.hoverLineSegmentIndex = -1;
+    this.isShift = false;
+    this.isReference = false;
+    this.drawCurveLine = (ctx, points, config, applyLineWidth = true, isReference = false, hoverLineSegmentIndex) => {
+      const pointList = createSmoothCurvePointsFromPointList(points, SEGMENT_NUMBER);
+      ctx.save();
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.strokeStyle = config.color;
+      if (applyLineWidth) {
+        ctx.lineWidth = config.lineWidth;
+      }
+      if (isReference) {
+        LineToolUtils.setReferenceCtx(ctx);
+      }
+      points.forEach(({specialEdge}, index) => {
+        const curveLinePoints = pointList.splice(0, SEGMENT_NUMBER + 1);
+        ctx.save();
+        ctx.beginPath();
+        if (hoverLineSegmentIndex === index) {
+          ctx.lineWidth = 4;
+        }
+        curveLinePoints.forEach(({x, y}, pointIndex) => {
+          const fn = pointIndex > 0 ? "lineTo" : "moveTo";
+          if (specialEdge) {
+            LineToolUtils.setSpecialEdgeStyle(ctx);
+          }
+          ctx[fn](x, y);
+        });
+        ctx.stroke();
+        ctx.restore();
+      });
+      ctx.restore();
+    };
+    this.drawLine = (points, cursor, color, showPoint = false, isActive = false) => {
+      const pointsToDraw = cursor ? points.concat(cursor) : points;
+      const lineConfig = {color, lineWidth: isActive ? 1 : this.lineStyle.lineWidth};
+      if (this.isCurve) {
+        LineToolUtils.drawCurveLine(this.ctx, pointsToDraw, lineConfig, !showPoint, this.isReference, isActive ? this.hoverLineSegmentIndex : -1);
+      } else {
+        this.drawStraightLine(pointsToDraw, lineConfig, isActive);
+      }
+      if (showPoint) {
+        points.forEach((point) => {
+          var _a, _b;
+          const pointID = point.id;
+          const pointRadius = pointID && [this.hoverPointID, (_a = this.selectedPoint) == null ? void 0 : _a.id].includes(pointID) ? POINT_ACTIVE_RADIUS : POINT_RADIUS;
+          this.arc(point, pointRadius, color);
+          if (![this.hoverPointID, (_b = this.selectedPoint) == null ? void 0 : _b.id].includes(pointID)) {
+            this.arc(point, INNER_POINT_RADIUS, "white");
+          }
+        });
+      }
+    };
+    this.drawStraightLine = (points, config, isActive = false) => {
+      const {ctx} = this;
+      if (ctx) {
+        ctx.save();
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        ctx.strokeStyle = config.color;
+        ctx.lineWidth = config.lineWidth;
+        if (this.isReference) {
+          LineToolUtils.setReferenceCtx(ctx);
+        }
+        points.forEach((point, index) => {
+          ctx.beginPath();
+          if (index > 0) {
+            const prePoint = points[index - 1];
+            ctx.save();
+            if (prePoint == null ? void 0 : prePoint.specialEdge) {
+              LineToolUtils.setSpecialEdgeStyle(ctx);
+            }
+            if (isActive && this.hoverLineSegmentIndex + 1 === index) {
+              ctx.lineWidth = 4;
+            }
+            ctx.moveTo(prePoint.x, prePoint.y);
+            ctx.lineTo(point.x, point.y);
+            ctx.stroke();
+            ctx.restore();
+          }
+        });
+        ctx.restore();
+      }
+    };
+    this.drawLines = () => {
+      try {
+        const lineList = _.cloneDeep(this.attributeFilteredLines);
+        if (this.isHidden) {
+          return;
+        }
+        lineList.forEach((line) => {
+          if (line.id === this.selectedID) {
+            return;
+          }
+          if (line.pointList) {
+            line.pointList.map((i) => Object.assign(i, this.coordUtils.getRenderCoord(i)));
+            const {order, label} = line;
+            const displayOrder = order;
+            const color = line && this.getLineColorByAttribute(line);
+            this.drawLine(line.pointList, void 0, color, false);
+            this.drawLineNumber(line.pointList[0], displayOrder, color, label, line.attribute, line.valid);
+            if (line.id !== this.textEditingID) {
+              this.drawLineTextAttribute(line.pointList[1], color, line == null ? void 0 : line.textAttribute);
+            }
+          }
+        });
+      } catch (e) {
+        console.error(e, "\u7EBF\u6761\u5DE5\u5177\u6570\u636E\u89E3\u6790\u9519\u8BEF");
+        this.lineList = [];
+        this.clearCanvas();
+      }
+    };
+    this.render = (nextPoint) => {
+      super.render();
+      this.drawLines();
+      this.drawActivatedLine(nextPoint, void 0, true);
+      this.renderTextAttribute();
+      this.renderCursorLine(this.getLineColor(this.defaultAttribute));
+    };
+    this.moveLineInPolygon = (offsetX, offsetY) => {
+      var _a;
+      if (!Array.isArray(this.activeLine)) {
+        return false;
+      }
+      const allPointsInRange = (_a = this.activeLine) == null ? void 0 : _a.every((i) => {
+        return this.isInBasicPolygon({x: i.x + offsetX, y: i.y + offsetY});
+      });
+      if (allPointsInRange) {
+        this.lineDragging = true;
+        this.moveActiveArea(offsetX, offsetY);
+      }
+    };
+    this.moveLineInRectRange = (offsetX, offsetY, rectHorizontalRange, rectVerticalRange) => {
+      if (this.activeArea === void 0) {
+        return;
+      }
+      const {top, left, right, bottom} = this.activeArea;
+      const hBoundaries = [left, right].map((i) => _.isNumber(i) ? i + offsetX : 0);
+      const vBoundaries = [top, bottom].map((i) => _.isNumber(i) ? i + offsetY : 0);
+      const horizontalInRange = left >= 0 && right && MathUtils.isInRange(hBoundaries, rectHorizontalRange);
+      const verticalInRange = top >= 0 && bottom && MathUtils.isInRange(vBoundaries, rectVerticalRange);
+      const calcOffsetX = horizontalInRange ? offsetX : 0;
+      const calcOffsetY = verticalInRange ? offsetY : 0;
+      this.lineDragging = true;
+      this.moveActiveArea(calcOffsetX, calcOffsetY);
+    };
+    this.onRightClick = (e) => {
+      this.cursor = void 0;
+      if (this.isCreate) {
+        if (this.isLinePointsNotEnough()) {
+          return;
+        }
+        this.stopLineCreating(true);
+        return;
+      }
+      this.setActiveArea(this.getCoordinate(e), true);
+      this.emit("contextmenu");
+    };
+    this.updateSelectedAttributeAfterHistoryChanged = () => {
+      if (this.selectedID) {
+        const line = this.lineList.find((i) => i.id === this.selectedID);
+        const attribute = line == null ? void 0 : line.attribute;
+        if (typeof attribute === "string") {
+          this.defaultAttribute = attribute;
+          this.updateAttribute(attribute);
+          this.render();
+        }
+      }
+    };
+    this.onLeftClick = (e) => {
+      const coord = this.getCoordinate(e);
+      const {lineDragging} = this;
+      this.lineDragging = false;
+      if (this.isSpaceKey) {
+        return;
+      }
+      if (this.isNone && e.ctrlKey) {
+        const hoveredLine = this.findHoverLine(coord);
+        if (hoveredLine) {
+          this.setInvalidLine(hoveredLine.id);
+        }
+        return;
+      }
+      if (this.isLinePointsExceed()) {
+        return;
+      }
+      const nextAxis = this.getNextPoint(e, coord);
+      if (this.isCreate || this.isNone) {
+        this.setCreatStatusAndAddPoint(nextAxis);
+        return;
+      }
+      if (this.isActive) {
+        if (lineDragging) {
+          return;
+        }
+        const isMouseCoordOutsideActiveArea = this.isMouseCoordOutsideActiveArea();
+        if (isMouseCoordOutsideActiveArea) {
+          this.setNoneStatus(false);
+          this.setCreatStatusAndAddPoint(nextAxis);
+          return;
+        }
+        const isSetSpecialLine = e.shiftKey;
+        if (isSetSpecialLine) {
+          this.updateLineSegmentSpecial(coord);
+          return;
+        }
+        if (this.coordsInsideActiveArea && e.ctrlKey) {
+          this.setInvalidLine(this.selectedID);
+          return;
+        }
+        this.addLinePointToActiveLine();
+      }
+    };
+    this.onDblclick = () => {
+    };
+    this.onKeyUp = (e) => {
+      super.onKeyUp(e);
+      this.isShift = false;
+      this.hoverLineSegmentIndex = -1;
+      if (e.keyCode === EKeyCode.Esc) {
+        this.stopLineCreating(false);
+        return;
+      }
+      if (this.isActive) {
+        if (e.keyCode === EKeyCode.Delete) {
+          this.deleteLine();
+          return;
+        }
+        if (e.keyCode === EKeyCode.F) {
+          this.setInvalidLine(this.selectedID);
+          return;
+        }
+        if (e.keyCode === EKeyCode.Space) {
+          this.continueToEdit();
+          return;
+        }
+      }
+      this.keyboardEventWhileLineCreating(e);
+    };
+    this.onRightDblClick = (e) => {
+      super.onRightDblClick(e);
+      const coord = this.getCoordinate(e);
+      if (this.isActive) {
+        const hoverPoint = this.findHoveredPoint(coord);
+        if (hoverPoint) {
+          this.deleteSelectedLinePoint(hoverPoint.id);
+          return;
+        }
+        this.deleteSelectedLine(coord);
+      }
+    };
+    this.setReference = (isReference) => {
+      this.isReference = isReference;
+    };
+    this.pointsWithinRange = (count) => {
+      if (this.lowerLimitPointNum && count < this.lowerLimitPointNum) {
+        return false;
+      }
+      if (this.upperLimitPointNum && count > this.upperLimitPointNum) {
+        return false;
+      }
+      return true;
+    };
+    this.setLineList = (lineList) => {
+      const lengthChanged = lineList.length !== this.lineListLen;
+      this.lineList = lineList;
+      if (lengthChanged) {
+        this.emit("updatePageNumber");
+      }
+    };
+    this.textChange = (v) => {
+      if (this.config.textConfigurable === false || !this.selectedID) {
+        return;
+      }
+      this.updateSelectedTextAttribute(v);
+      this.emit("selectedChange");
+    };
+    this.status = 2;
+    this.isMousedown = false;
+    this.lineDragging = false;
+    this.isLineValid = true;
+    this.setConfig(props.config);
+    this.prevAxis = {
+      x: 0,
+      y: 0
+    };
+    this.textEditingID = "";
+    this.updateSelectedTextAttribute = this.updateSelectedTextAttribute.bind(this);
+    this.getCurrentSelectedData = this.getCurrentSelectedData.bind(this);
+    this.actionsHistory = new ActionsHistory();
+    this.dependToolConfig = {
+      lineType: ELineTypes.Line
+    };
+  }
+  get isLineSelected() {
+    return this.selectedID && this.activeLine;
+  }
+  get selectedLinePoints() {
+    return this.activeLine ? this.getPointList(this.activeLine) : [];
+  }
+  get isCreate() {
+    return this.status === 0;
+  }
+  get isActive() {
+    return this.status === 1;
+  }
+  get isNone() {
+    return this.status === 2;
+  }
+  get isCurve() {
+    return this.config.lineType === ELineTypes.Curve;
+  }
+  get isMultipleColor() {
+    return this.config.lineColor === ELineColor.MultiColor;
+  }
+  get imageSize() {
+    if (this.rotate % 180 === 0) {
+      return this.basicImgInfo;
+    }
+    return {
+      width: this.basicImgInfo.height,
+      height: this.basicImgInfo.width
+    };
+  }
+  get lineListLen() {
+    return this.lineList.length;
+  }
+  get edgeAdsorptionEnabled() {
+    return this.edgeAdsorption && !this.isCurve && this.lineListLen > 0;
+  }
+  get attributeConfigurable() {
+    return this.config.attributeConfigurable;
+  }
+  get isTextConfigurable() {
+    return this.config.textConfigurable;
+  }
+  get isDependPolygon() {
+    return this.dependToolName === EToolName.Polygon;
+  }
+  get isDependRect() {
+    return this.dependToolName === EToolName.Rect;
+  }
+  get isCurrentAttributeLocked() {
+    return this.attributeLockList.includes(this.defaultAttribute);
+  }
+  get attributeFilteredLines() {
+    if (this.attributeLockList.length > 0) {
+      return this.lineList.filter((v) => this.attributeLockList.includes((v == null ? void 0 : v.attribute) || ""));
+    }
+    return this.lineList;
+  }
+  get enableOutOfTarget() {
+    return this.config.enableOutOfTarget;
+  }
+  get showOrder() {
+    return this.config.showOrder;
+  }
+  get edgeAdsorption() {
+    return this.config.edgeAdsorption;
+  }
+  get attributeList() {
+    return this.config.attributeList;
+  }
+  get lowerLimitPointNum() {
+    return this.config.lowerLimitPointNum;
+  }
+  get upperLimitPointNum() {
+    return this.config.upperLimitPointNum;
+  }
+  get textCheckType() {
+    return this.config.textCheckType;
+  }
+  get customFormat() {
+    return this.config.customFormat;
+  }
+  get dataList() {
+    return this.lineList;
+  }
+  get hasActiveLine() {
+    return this.activeLine && this.activeLine.length > 0;
+  }
+  get viewPortLines() {
+    const viewPort = CanvasUtils.getViewPort(this.canvas, this.currentPos, this.zoom);
+    if (this.isHidden) {
+      return [];
+    }
+    return this.attributeFilteredLines.filter((i) => {
+      var _a;
+      return (_a = i == null ? void 0 : i.pointList) == null ? void 0 : _a.some((p) => CanvasUtils.inViewPort(p, viewPort));
+    });
+  }
+  get lineStyle() {
+    return {
+      lineWidth: this.style.width,
+      color: this.getLineColor(this.defaultAttribute),
+      opacity: this.style.opacity
+    };
+  }
+  get selectedText() {
+    var _a, _b;
+    return (_b = (_a = this.lineList.find((i) => i.id === this.selectedID)) == null ? void 0 : _a.textAttribute) != null ? _b : "";
+  }
+  get currentPageResult() {
+    return this.lineList;
+  }
+  updateStatus(status, resetText = false) {
+    if (status === this.status) {
+      return;
+    }
+    if (resetText) {
+      let defaultText = "";
+      if (this.textCheckType === ETextType.Order && this.isTextConfigurable) {
+        defaultText = AttributeUtils.getTextAttribute(this.lineList, this.textCheckType);
+      }
+      this.emit("updateText", defaultText);
+    }
+    this.status = status;
+    this.lineStatusChanged();
+  }
+  isInBasicPolygon(coord) {
+    var _a, _b;
+    return isInPolygon(coord, ((_a = this.basicResult) == null ? void 0 : _a.pointList) || [], (_b = this.dependToolConfig) == null ? void 0 : _b.lineType);
+  }
+  getPolygonPointList() {
+    if (!this.basicResult) {
+      return [];
+    }
+    const {pointList} = this.basicResult;
+    const {lineType} = this.dependToolConfig;
+    return lineType === ELineTypes.Curve ? createSmoothCurvePoints(pointList.reduce((acc, cur) => {
+      return [...acc, cur.x, cur.y];
+    }, []), 0.5, true, 20) : pointList;
+  }
+  getNextCoordByRenderCoord(renderCoord) {
+    return this.getNextCoordByAbsCoord(this.coordUtils.getAbsCoord(renderCoord));
+  }
+  getNextCoordByAbsCoord(absCoord) {
+    var _a;
+    const preAxis = (_a = this.activeLine) == null ? void 0 : _a.slice(-1)[0];
+    if (preAxis) {
+      return this.coordUtils.getNextCoordByDependTool(absCoord, preAxis);
+    }
+    return absCoord;
+  }
+  pointInLine(pointList, checkPoint, scope) {
+    if (pointList.filter((i) => i).length < 2) {
+      return false;
+    }
+    return pointList.some((point, index) => {
+      if (index === 0) {
+        return false;
+      }
+      const point1 = this.coordUtils.getRenderCoord(pointList[index - 1]);
+      const point2 = this.coordUtils.getRenderCoord(point);
+      return LineToolUtils.isInLine(checkPoint, point1, point2, scope);
+    });
+  }
+  arc(coord, size = POINT_RADIUS, color) {
+    var _a, _b, _c, _d, _e, _f;
+    if (this.ctx) {
+      const {x, y} = coord;
+      (_a = this.ctx) == null ? void 0 : _a.save();
+      (_b = this.ctx) == null ? void 0 : _b.beginPath();
+      this.ctx.fillStyle = color || this.lineStyle.color;
+      (_c = this.ctx) == null ? void 0 : _c.arc(x, y, size, 0, 360);
+      (_d = this.ctx) == null ? void 0 : _d.closePath();
+      (_e = this.ctx) == null ? void 0 : _e.fill();
+      (_f = this.ctx) == null ? void 0 : _f.restore();
+    }
+  }
+  renderActiveArea() {
+    if (this.isActive && this.activeArea && this.ctx) {
+      const {top, left, right, bottom} = this.activeArea;
+      const {x, y} = this.coordUtils.getRenderCoord({x: left, y: top});
+      this.ctx.save();
+      this.ctx.beginPath();
+      this.ctx.strokeStyle = "#B3B8FF";
+      this.ctx.rect(x, y, (right - left) * this.zoom, (bottom - top) * this.zoom);
+      this.ctx.stroke();
+      this.ctx.restore();
+    }
+  }
+  addLinePoint(coord) {
+    var _a, _b, _c, _d;
+    this.arc(coord);
+    (_a = this.activeLine) == null ? void 0 : _a.push(__spreadProps(__spreadValues({}, coord), {id: uuid()}));
+    if (((_b = this.activeLine) == null ? void 0 : _b.length) === 1) {
+      (_c = this.actionsHistory) == null ? void 0 : _c.initRecord(this.activeLine);
+    } else {
+      (_d = this.actionsHistory) == null ? void 0 : _d.pushHistory(this.activeLine);
+    }
+    this.render();
+  }
+  setCreatStatusAndAddPoint(coord, isRestText = false) {
+    this.updateStatus(0, isRestText);
+    this.addLinePoint(coord);
+  }
+  isActiveLineValid() {
+    var _a;
+    return this.selectedID ? (_a = this.lineList.find((i) => i.id === this.selectedID)) == null ? void 0 : _a.valid : this.isLineValid;
+  }
+  nextOrder() {
+    return this.lineListLen === 0 ? 1 : this.lineList.slice(-1)[0].order + 1;
+  }
+  getLineColorByAttribute(line, isSelected = false) {
+    return StyleUtils.getStrokeAndFill(this.getColor(line.attribute), line.valid, {isSelected}).stroke;
+  }
+  updateActiveArea() {
+    this.activeArea = this.getActiveArea();
+    this.renderActiveArea();
+  }
+  getActiveArea() {
+    return this.hasActiveLine ? MathUtils.calcViewportBoundaries(this.activeLine, this.isCurve, SEGMENT_NUMBER, this.zoom) : void 0;
+  }
+  drawLineNumber(coord, order = 1, color, label = "", attribute, valid = true) {
+    var _a, _b, _c;
+    if ((this.showOrder || this.attributeConfigurable) && this.ctx) {
+      let text = this.showOrder ? order.toString() : `${label}`;
+      if (this.attributeConfigurable) {
+        const keyForAttribute = attribute ? (_c = (_b = (_a = this.attributeList) == null ? void 0 : _a.find((i) => i.value === attribute)) == null ? void 0 : _b.key) != null ? _c : attribute : "";
+        text = [text, `${!valid && keyForAttribute ? "\u65E0\u6548" : ""}${keyForAttribute}`].filter((i) => i).join("_");
+      }
+      this.drawText(coord, text, color);
+    }
+  }
+  drawLineTextAttribute(coord, color, text) {
+    if (coord && text) {
+      return this.drawText(coord, text, color, 200);
+    }
+  }
+  drawText(coord, text, color, lineWidth) {
+    var _a, _b;
+    if (this.ctx) {
+      (_a = this.ctx) == null ? void 0 : _a.save();
+      this.ctx.font = "italic bold 14px SourceHanSansCN-Regular";
+      this.ctx.fillStyle = color;
+      this.ctx.strokeStyle = color;
+      this.ctx.shadowColor = "rgba(0, 0, 0, 0.6)";
+      this.ctx.shadowOffsetY = 2;
+      this.ctx.shadowBlur = 4;
+      if (lineWidth) {
+        DrawUtils.wrapText(this.canvas, text, coord.x - LINE_ORDER_OFFSET.x, coord.y - LINE_ORDER_OFFSET.y, lineWidth);
+      } else {
+        this.ctx.fillText(text, coord.x - LINE_ORDER_OFFSET.x, coord.y - LINE_ORDER_OFFSET.y);
+      }
+      (_b = this.ctx) == null ? void 0 : _b.restore();
+    }
+  }
+  moveActiveArea(offsetX, offsetY) {
+    if (this.activeArea) {
+      this.activeArea = Object.assign(this.activeArea, {
+        top: this.activeArea.top + offsetY,
+        bottom: this.activeArea.bottom + offsetY,
+        right: this.activeArea.right + offsetX,
+        left: this.activeArea.left + offsetX
+      });
+    }
+    if (this.activeLine) {
+      this.activeLine.map((i) => Object.assign(i, {x: i.x + offsetX, y: i.y + offsetY}));
+      this.updateLines();
+    }
+  }
+  findHoveredPoint(coord) {
+    if (!this.activeLine) {
+      return;
+    }
+    return this.activeLine.find((i) => {
+      const iAxis = this.coordUtils.getRenderCoord(i);
+      return LineToolUtils.calcDistance(iAxis, coord) <= POINT_ACTIVE_RADIUS;
+    });
+  }
+  findHoverLine(coord) {
+    const line = _.cloneDeep(this.lineList).reverse().find(({pointList}) => {
+      const list = pointList ? this.getPointList(pointList) : [];
+      const scope = this.getLineWidthScope();
+      return list.some((point, index) => {
+        if (index === 0) {
+          return false;
+        }
+        const point1 = this.coordUtils.getRenderCoord(point);
+        const point2 = this.coordUtils.getRenderCoord(list[index - 1]);
+        return LineToolUtils.isInLine(coord, point1, point2, scope);
+      });
+    });
+    return line;
+  }
+  getAdsorptionPoint(coord) {
+    let point;
+    let minDistance;
+    let snappedPoint;
+    _.cloneDeep(this.lineList).reverse().forEach(({pointList, id}) => {
+      if (id === this.selectedID || !pointList || (pointList == null ? void 0 : pointList.length) < 2) {
+        return;
+      }
+      const nearestPoint = this.findNearestPoint(pointList, coord);
+      if (nearestPoint) {
+        if (nearestPoint.minDistance === 0) {
+          point = nearestPoint.point;
+          return;
+        }
+        if (minDistance === void 0 || nearestPoint.minDistance < minDistance) {
+          point = nearestPoint.point;
+          minDistance = nearestPoint.minDistance;
+        }
+      }
+    });
+    return snappedPoint || point;
+  }
+  findNearestPoint(pointList, coord, minLength = 7) {
+    let point;
+    const minDistance = minLength;
+    for (let i = 1; i <= pointList.length - 1; i++) {
+      const point1 = this.coordUtils.getRenderCoord(pointList[i]);
+      const point2 = this.coordUtils.getRenderCoord(pointList[i - 1]);
+      const {length, footPoint} = MathUtils.getFootOfPerpendicular(coord, point1, point2);
+      const twoPointDistance1 = LineToolUtils.calcTwoPointDistance(point1, coord);
+      const twoPointDistance2 = LineToolUtils.calcTwoPointDistance(point2, coord);
+      if (twoPointDistance1 <= minLength * 2) {
+        point = point1;
+        minLength = 0;
+        break;
+      }
+      if (twoPointDistance2 <= minLength * 2) {
+        point = point2;
+        minLength = 0;
+        break;
+      }
+      if (length < minLength) {
+        point = footPoint;
+        minLength = length;
+      }
+    }
+    return point ? {point, minDistance} : void 0;
+  }
+  getPointList(pointList) {
+    return this.isCurve ? createSmoothCurvePointsFromPointList(pointList, SEGMENT_NUMBER) : pointList;
+  }
+  moveSelectedLine(coord) {
+    const offsetX = (coord.x - this.prevAxis.x) / this.zoom;
+    const offsetY = (coord.y - this.prevAxis.y) / this.zoom;
+    if (this.enableOutOfTarget) {
+      this.lineDragging = true;
+      this.moveActiveArea(offsetX, offsetY);
+      return;
+    }
+    if (this.isDependPolygon) {
+      this.moveLineInPolygon(offsetX, offsetY);
+      return;
+    }
+    let rectHorizontalRange = [0, this.imageSize.width];
+    let rectVerticalRange = [0, this.imageSize.height];
+    if (this.isDependRect) {
+      const {x, y, width, height} = this.basicResult;
+      rectHorizontalRange = [x, x + width];
+      rectVerticalRange = [y, y + height];
+    }
+    this.moveLineInRectRange(offsetX, offsetY, rectHorizontalRange, rectVerticalRange);
+  }
+  moveSelectPoint(coord) {
+    if (!this.selectedPoint) {
+      return;
+    }
+    const offsetX = coord.x - this.prevAxis.x;
+    const offsetY = coord.y - this.prevAxis.y;
+    const newX = (this.selectedPoint ? this.selectedPoint.x : 0) + offsetX / this.zoom;
+    const newY = (this.selectedPoint ? this.selectedPoint.y : 0) + offsetY / this.zoom;
+    const pointPosition = {
+      x: newX,
+      y: newY
+    };
+    Object.assign(this.selectedPoint, this.getNextCoordByAbsCoord(pointPosition));
+    this.updateLines();
+    this.render();
+  }
+  getCoordByConfig(e, coord) {
+    var _a;
+    const isVH = !!e.shiftKey;
+    const disabledAdsorb = e.altKey;
+    if (((_a = this.activeLine) == null ? void 0 : _a.length) > 0 && isVH) {
+      const lastPoint = this.activeLine.slice(-1)[0];
+      return LineToolUtils.getVHPoint(lastPoint, coord, this.coordUtils.getAbsCoord(coord), this.coordUtils.getRenderCoord(lastPoint));
+    }
+    if (this.edgeAdsorptionEnabled && !disabledAdsorb) {
+      return this.getAdsorptionPoint(coord);
+    }
+    return coord;
+  }
+  getNextPoint(e, nextPoint) {
+    const newPoint = this.getCoordByConfig(e, nextPoint) || nextPoint;
+    return this.enableOutOfTarget ? newPoint : this.getNextCoordByRenderCoord(newPoint);
+  }
+  lineHover() {
+    this.render();
+  }
+  mouseMoveHandler(e) {
+    const coord = this.getCoordinate(e);
+    const isLeftClick = e.which === 1;
+    if (this.isCreate) {
+      if (this.hasActiveLine) {
+        this.renderNextPoint(e, coord);
+      }
+      return;
+    }
+    if (this.isNone) {
+      this.lineHover();
+      if (this.edgeAdsorptionEnabled && !e.altKey) {
+        const edgeAdsorptionPoint = this.getAdsorptionPoint(coord);
+        if (edgeAdsorptionPoint) {
+          this.arc(edgeAdsorptionPoint);
+        }
+      }
+    }
+    if (this.isActive) {
+      if (this.isMousedown && isLeftClick) {
+        if (this.selectedPoint) {
+          this.moveSelectPoint(coord);
+          return;
+        }
+        if (this.coordsInsideActiveArea) {
+          this.moveSelectedLine(coord);
+          this.drawActivatedLine(void 0, void 0, true);
+          return;
+        }
+      }
+      this.drawHoverPoint(coord);
+      this.render();
+    }
+  }
+  onMouseMove(e) {
+    if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return;
+    }
+    const coord = this.getCoordinate(e);
+    this.mouseMoveHandler(e);
+    this.prevAxis = coord;
+  }
+  setActiveArea(coord, outsideCancel = false) {
+    const activeLine = this.findHoverLine(coord);
+    if (activeLine) {
+      const index = this.lineList.findIndex((i) => i.id === (activeLine == null ? void 0 : activeLine.id));
+      const area = MathUtils.calcViewportBoundaries((activeLine == null ? void 0 : activeLine.pointList) || [], this.isCurve, SEGMENT_NUMBER, this.zoom);
+      const line = this.lineList[index];
+      this.updateStatus(1);
+      this.setActiveLine(line.pointList);
+      this.setSelectedLineID(line.id);
+      this.activeArea = area;
+      this.updateLineAttributes(line);
+    } else if (outsideCancel) {
+      this.setNoneStatus();
+    }
+    this.render();
+  }
+  setActiveLineByID(id) {
+    const line = this.lineList.find((i) => i.id === id);
+    if (line) {
+      const area = MathUtils.calcViewportBoundaries((line == null ? void 0 : line.pointList) || [], this.isCurve, SEGMENT_NUMBER, this.zoom);
+      this.updateStatus(1);
+      this.setActiveLine(line.pointList);
+      this.setSelectedLineID(line.id);
+      this.activeArea = area;
+      this.updateLineAttributes(line);
+    }
+    this.render();
+  }
+  setActiveLine(pointList) {
+    this.activeLine = pointList ? _.cloneDeep(pointList) : void 0;
+  }
+  historyChanged(funcName) {
+    const enableKeyName = `${funcName}Enabled`;
+    if (this.isCreate) {
+      if (this.actionsHistory && this.actionsHistory[enableKeyName]) {
+        const record = this.actionsHistory && this.actionsHistory[funcName]();
+        this.setActiveLine(record);
+        this.render();
+      }
+      return;
+    }
+    if (this.history && this.history[enableKeyName]) {
+      const currentHistory = this.history[funcName]();
+      const activeLine = currentHistory == null ? void 0 : currentHistory.find((i) => i.id === this.selectedID);
+      this.lineList = currentHistory;
+      if (this.selectedID && activeLine) {
+        this.setActiveLine(activeLine == null ? void 0 : activeLine.pointList);
+      } else {
+        this.setNoneStatus();
+      }
+      this.render();
+    }
+    this.emit("dataUpdated", this.lineList);
+  }
+  undo() {
+    this.historyChanged("undo");
+    this.updateSelectedAttributeAfterHistoryChanged();
+  }
+  redo() {
+    this.historyChanged("redo");
+    this.updateSelectedAttributeAfterHistoryChanged();
+  }
+  isCoordInsideTarget(coord) {
+    if (this.isDependPolygon) {
+      return this.isInBasicPolygon(coord);
+    }
+    if (this.isDependRect) {
+      const {x, y, width, height} = this.basicResult;
+      const rectHorizontalRange = [x, x + width];
+      const rectVerticalRange = [y, y + height];
+      return MathUtils.isInRange(coord.x, rectHorizontalRange) && MathUtils.isInRange(coord.y, rectVerticalRange);
+    }
+    return MathUtils.isInRange(coord.x, [0, this.imageSize.width]) && MathUtils.isInRange(coord.y, [0, this.imageSize.height]);
+  }
+  getPointInsertIndex(coord, scope) {
+    if (coord && this.activeLine) {
+      const pointList = this.getPointList(this.activeLine);
+      if (this.activeLine.length === 2) {
+        return 1;
+      }
+      return this.activeLine.findIndex((i, index) => {
+        if (index > 0) {
+          const straightLinePoints = this.activeLine ? this.activeLine[index - 1] : void 0;
+          const points = this.isCurve ? pointList.slice((index - 1) * (SEGMENT_NUMBER + 1), index * (SEGMENT_NUMBER + 1)) : [straightLinePoints, i];
+          return this.pointInLine(points, coord, scope || this.getLineWidthScope());
+        }
+        return false;
+      });
+    }
+    return -1;
+  }
+  getLineWidthScope() {
+    return this.lineStyle.lineWidth;
+  }
+  isMouseCoordOutsideActiveArea() {
+    return !this.coordsInsideActiveArea && !this.selectedPoint;
+  }
+  isLinePointsExceed() {
+    return this.isCreate && this.activeLine && this.upperLimitPointNum && ~~this.upperLimitPointNum <= this.activeLine.length;
+  }
+  isLinePointsNotEnough() {
+    var _a;
+    return this.activeLine && ((_a = this.activeLine) == null ? void 0 : _a.length) < this.lowerLimitPointNum;
+  }
+  updateLineSegmentSpecial(coord) {
+    const specialEdgeIndex = this.getPointInsertIndex(coord, 2) - 1;
+    if (specialEdgeIndex > -1) {
+      const pointData = this.activeLine[specialEdgeIndex];
+      pointData.specialEdge = !pointData.specialEdge;
+      this.hoverLineSegmentIndex = -1;
+      this.render();
+    }
+  }
+  addLinePointToActiveLine() {
+    var _a;
+    const insertIndex = this.getPointInsertIndex(this.cursor);
+    const pointsWithInRange = this.pointsWithinRange(this.activeLine.length + 1);
+    if (this.cursor && insertIndex > -1 && pointsWithInRange) {
+      this.activeLine.splice(insertIndex, 0, __spreadProps(__spreadValues({}, this.coordUtils.getAbsCoord(this.cursor)), {id: uuid()}));
+      this.updateLines();
+      (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+      this.render();
+      this.cursor = void 0;
+    }
+  }
+  onMouseDown(e) {
+    if (super.onMouseDown(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return;
+    }
+    const coord = this.getCoordinate(e);
+    this.isMousedown = true;
+    this.prevAxis = coord;
+    if (e.which === 3) {
+      this.cursor = void 0;
+      return;
+    }
+    this.selectedPoint = this.findHoveredPoint(coord);
+    this.coordsInsideActiveArea = this.isActive && this.activeArea ? LineToolUtils.inArea(this.activeArea, this.coordUtils.getAbsCoord(coord)) : false;
+    this.lineDragging = false;
+  }
+  lineHasChanged() {
+    const line = this.lineList.find((i) => i.id === this.selectedID);
+    return line ? JSON.stringify(line.pointList) !== JSON.stringify(this.activeLine) : false;
+  }
+  updateLines() {
+    const line = this.lineList.find((i) => i.id === this.selectedID);
+    if (line) {
+      line.pointList = _.cloneDeep(this.activeLine);
+      this.emit("dataUpdated", this.lineList);
+    }
+  }
+  onMouseUp(e) {
+    const reset = () => {
+      this.isMousedown = false;
+      this.hoverPointID = void 0;
+      this.cursor = void 0;
+      this.selectedPoint = void 0;
+    };
+    this.hoverPointID = void 0;
+    if (super.onMouseUp(e) || this.forbidMouseOperation || !this.imgInfo) {
+      reset();
+      return;
+    }
+    if (e.which === 1) {
+      this.onLeftClick(e);
+    }
+    if (e.which === 3) {
+      this.onRightClick(e);
+    }
+    reset();
+  }
+  isTextValid(text) {
+    return AttributeUtils.textAttributeValidate(this.textCheckType, this.customFormat, text);
+  }
+  createLineData() {
+    const id = uuid();
+    const newLine = {
+      pointList: _.cloneDeep(this.activeLine),
+      id,
+      valid: this.isLineValid,
+      order: this.nextOrder()
+    };
+    newLine.attribute = this.defaultAttribute;
+    return newLine;
+  }
+  stopLineCreating(isAppend = true) {
+    var _a, _b, _c, _d;
+    const setActiveAfterCreating = this.selectedID ? true : !!this.isTextConfigurable;
+    let selectedID;
+    if (isAppend) {
+      if (this.selectedID) {
+        const line = this.lineList.find((i) => i.id === this.selectedID);
+        selectedID = this.selectedID;
+        if (line) {
+          line.pointList = _.cloneWith(this.activeLine);
+          if (!_.isEqual(line.pointList, (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList))) {
+            (_b = this.history) == null ? void 0 : _b.pushHistory(this.lineList);
+          }
+        }
+      } else if (this.isCreate && this.activeLine && this.activeLine.length > 1) {
+        const newLine = this.createLineData();
+        selectedID = newLine.id;
+        this.setLineList([...this.lineList, newLine]);
+        (_c = this.history) == null ? void 0 : _c.pushHistory(this.lineList);
+      }
+    }
+    if (setActiveAfterCreating) {
+      this.setActiveStatus(selectedID);
+    } else {
+      this.setNoneStatus();
+    }
+    (_d = this.actionsHistory) == null ? void 0 : _d.empty();
+    this.emit("dataUpdated", this.lineList);
+    this.render();
+  }
+  setActiveStatus(id) {
+    const line = id ? this.lineList.find((i) => i.id === id) : void 0;
+    if (line) {
+      const pointList = line == null ? void 0 : line.pointList;
+      this.updateStatus(1);
+      this.setActiveLine(pointList);
+      this.setSelectedLineID(id);
+    } else {
+      this.setNoneStatus();
+    }
+  }
+  setNoneStatus(updateStatus = true) {
+    if (updateStatus) {
+      this.updateStatus(2);
+    }
+    this.activeLine = [];
+    this.setSelectedLineID(void 0);
+    this.activeArea = void 0;
+    this.isLineValid = true;
+    this.cursor = void 0;
+  }
+  setKeyDownStatus(e, value) {
+    this.isShift = value != null ? value : e.keyCode === EKeyCode.Shift;
+  }
+  continueToEdit() {
+    var _a;
+    this.updateStatus(0);
+    this.cursor = void 0;
+    (_a = this.actionsHistory) == null ? void 0 : _a.pushHistory(this.activeLine);
+    this.render();
+  }
+  setInvalidLineOnCreating(e) {
+    if (this.selectedID && e.keyCode !== EKeyCode.Ctrl || !this.isCreate) {
+      return;
+    }
+    const valid = !e.ctrlKey;
+    if (this.selectedID) {
+      this.setInvalidLine(this.selectedID, valid, false);
+    } else {
+      this.isLineValid = valid;
+    }
+  }
+  onKeyDown(e) {
+    super.onKeyDown(e);
+    this.setKeyDownStatus(e);
+    if (e.keyCode === EKeyCode.Z && !e.ctrlKey) {
+      this.toggleIsHide();
+    }
+    if (e.keyCode === EKeyCode.Shift) {
+      this.render();
+    }
+    if (e.keyCode === EKeyCode.Tab) {
+      e.preventDefault();
+      this.selectToNextLine(e);
+      return;
+    }
+    if (this.isCreate) {
+      this.keyboardEventWhileLineCreating(e);
+    }
+    if (this.config.attributeConfigurable) {
+      const keyCode2Attribute = AttributeUtils.getAttributeByKeycode(e.keyCode, this.config.attributeList);
+      if (keyCode2Attribute !== void 0) {
+        this.setDefaultAttribute(keyCode2Attribute);
+      }
+    }
+  }
+  selectToNextLine(e) {
+    const nextSelectedLine = CommonToolUtils.getNextSelectedRectIDByEvent(this.viewPortLines.map((i) => {
+      var _a, _b, _c, _d;
+      return __spreadProps(__spreadValues({}, i), {
+        x: (_b = (_a = i.pointList[0]) == null ? void 0 : _a.x) != null ? _b : 0,
+        y: (_d = (_c = i.pointList[0]) == null ? void 0 : _c.y) != null ? _d : 0
+      });
+    }), e, this.selectedID);
+    if (nextSelectedLine) {
+      this.setActiveLineByID(nextSelectedLine.id);
+    }
+  }
+  keyboardEventWhileLineCreating(e) {
+    if (!this.isCreate) {
+      return;
+    }
+    if (e.keyCode === EKeyCode.Ctrl) {
+      this.setInvalidLineOnCreating(e);
+    }
+    if ([EKeyCode.Shift, EKeyCode.Alt].includes(e.keyCode)) {
+      this.renderNextPoint(e, this.prevAxis);
+    }
+  }
+  renderNextPoint(e, coord) {
+    const nextPoint = this.coordUtils.getRenderCoord(this.getNextPoint(e, coord));
+    this.render(nextPoint);
+  }
+  deleteSelectedLine(coord) {
+    const boundary = MathUtils.calcViewportBoundaries(this.activeLine, this.isCurve, SEGMENT_NUMBER, this.zoom);
+    const axisOnArea = LineToolUtils.inArea(boundary, this.coordUtils.getAbsCoord(coord));
+    if (axisOnArea) {
+      this.deleteLine();
+    }
+  }
+  deleteSelectedLinePoint(selectedID) {
+    var _a;
+    const pointsWithinRange = this.pointsWithinRange(this.activeLine.length - 1);
+    if (pointsWithinRange && selectedID) {
+      this.setActiveLine(this.activeLine.filter((i) => i.id !== selectedID));
+      this.updateLines();
+      (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+    }
+    this.cursor = void 0;
+    this.render();
+  }
+  deleteLine() {
+    var _a;
+    this.lineList = this.lineList.filter((i) => i.id !== this.selectedID);
+    (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+    this.setNoneStatus();
+    this.emit("dataUpdated", this.lineList);
+    this.render();
+  }
+  setInvalidLine(id, valid, isRender = true) {
+    var _a;
+    const line = this.lineList.find((i) => i.id === id);
+    if (line) {
+      line.valid = valid !== void 0 ? valid : !line.valid;
+      (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+      if (isRender) {
+        this.render();
+      }
+    }
+  }
+  empty() {
+    var _a, _b;
+    this.lineList = [];
+    this.setNoneStatus();
+    this.selectedPoint = void 0;
+    (_a = this.actionsHistory) == null ? void 0 : _a.empty();
+    (_b = this.history) == null ? void 0 : _b.init();
+    this.emit("dataUpdated", this.lineList);
+    this.render();
+  }
+  setAttribute(attribute) {
+    var _a;
+    if (this.attributeConfigurable) {
+      this.defaultAttribute = attribute;
+      this.setLineAttribute("attribute", attribute);
+      if (this.selectedID) {
+        (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+      }
+    }
+  }
+  setTextAttribute(text) {
+    var _a;
+    if (this.isTextConfigurable) {
+      this.setLineAttribute("textAttribute", text);
+      (_a = this.history) == null ? void 0 : _a.applyAttribute(this.selectedID, "textAttribute", text);
+    }
+  }
+  setLineAttribute(key, value, id) {
+    const targetID = id || this.selectedID;
+    if (targetID) {
+      const line = this.lineList.find((i) => i.id === targetID);
+      if (line) {
+        line[key] = value;
+      }
+    }
+    this.render();
+  }
+  updateAttribute(attribute) {
+    this.emit("updateAttribute", attribute);
+  }
+  updateLineAttributes(line) {
+    var _a;
+    if (this.attributeConfigurable && line) {
+      const attribute = (line == null ? void 0 : line.attribute) || "";
+      this.defaultAttribute = attribute;
+      this.updateAttribute(attribute);
+    }
+    if (this.isTextConfigurable && line) {
+      const text = (line == null ? void 0 : line.textAttribute) || "";
+      this.updateTextAttribute(text);
+    }
+    (_a = this.history) == null ? void 0 : _a.updateHistory(this.lineList);
+  }
+  lineStatusChanged() {
+    this.emit("lineStatusChanged", {
+      status: this.status,
+      selectedLineID: this.selectedID
+    });
+  }
+  updateTextAttribute(text) {
+    if (this.selectedID) {
+      const line = this.lineList.find((i) => i.id === this.selectedID);
+      if (line) {
+        line.textAttribute = text;
+      }
+    }
+    this.emit("updateText", text);
+  }
+  saveData() {
+    this.stopLineCreating();
+    this.setNoneStatus();
+    this.render();
+  }
+  setTextEditingID(id) {
+    this.textEditingID = id;
+    this.render();
+  }
+  setSelectedLineID(id) {
+    var _a, _b;
+    if (this.selectedID === id) {
+      return;
+    }
+    const oldID = this.selectedID;
+    if (id !== oldID && oldID) {
+      (_a = this._textAttributeInstance) == null ? void 0 : _a.changeSelected();
+    }
+    if (!id) {
+      (_b = this._textAttributeInstance) == null ? void 0 : _b.clearTextAttribute();
+    }
+    this.selectedID = id;
+    this.emit("selectedChange");
+  }
+  attributeLockListChange(attributeLockList) {
+    this.attributeLockList = attributeLockList;
+    this.render();
+  }
+  setResult(lineList) {
+    this.setNoneStatus();
+    this.setLineList(lineList);
+    this.render();
+  }
+  setConfig(config) {
+    super.setConfig(config);
+  }
+  toggleIsHide() {
+    this.setIsHidden(!this.isHidden);
+    this.render();
+  }
+  clearCanvas() {
+    super.clearCanvas();
+  }
+  clearResult() {
+    this.setResult([]);
+    this.setSelectedLineID(void 0);
+    this.render();
+  }
+  exportData() {
+    return [this.lineList, this.basicImgInfo];
+  }
+  setDefaultAttribute(attribute = "") {
+    var _a;
+    if (this.attributeConfigurable) {
+      this.defaultAttribute = attribute;
+      this.setLineAttribute("attribute", attribute);
+      if (this.selectedID) {
+        (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+      }
+      this.emit("changeAttributeSidebar");
+    }
+  }
+  getCurrentSelectedData() {
+    var _a, _b;
+    const valid = this.isActiveLineValid();
+    const attribute = this.defaultAttribute;
+    const toolColor = this.getColor(attribute);
+    const color = valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    const textAttribute = (_b = (_a = this.lineList.find((i) => i.id === this.selectedID)) == null ? void 0 : _a.textAttribute) != null ? _b : "";
+    return {
+      color,
+      textAttribute
+    };
+  }
+  renderTextAttribute() {
+    var _a, _b, _c, _d;
+    if (!this.ctx || !this.activeLine || ((_a = this.activeLine) == null ? void 0 : _a.length) < 2 || this.isCreate) {
+      return;
+    }
+    const valid = this.isActiveLineValid();
+    const attribute = this.defaultAttribute;
+    const {x, y} = this.activeLine[1];
+    const coordinate = this.coordUtils.getRenderCoord({x, y});
+    const toolColor = this.getColor(attribute);
+    const color = valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    const textAttribute = (_c = (_b = this.lineList.find((i) => i.id === this.selectedID)) == null ? void 0 : _b.textAttribute) != null ? _c : "";
+    if (!this._textAttributeInstance) {
+      this._textAttributeInstance = new TextAttributeClass({
+        container: this.container,
+        icon: this.getTextIconSvg(attribute),
+        color,
+        getCurrentSelectedData: this.getCurrentSelectedData,
+        updateSelectedTextAttribute: this.updateSelectedTextAttribute
+      });
+    }
+    if (this._textAttributeInstance && !((_d = this._textAttributeInstance) == null ? void 0 : _d.isExit)) {
+      this._textAttributeInstance.appendToContainer();
+    }
+    this._textAttributeInstance.update(`${textAttribute}`, {
+      left: coordinate.x,
+      top: coordinate.y,
+      color
+    });
+    this._textAttributeInstance.updateIcon(this.getTextIconSvg(attribute));
+  }
+  getTextIconSvg(attribute = "") {
+    return AttributeUtils.getTextIconSvg(attribute, this.config.attributeList, this.config.attributeConfigurable, this.baseIcon);
+  }
+  updateSelectedTextAttribute(newTextAttribute) {
+    if (this._textAttributeInstance && newTextAttribute && this.selectedID) {
+      let textAttribute = newTextAttribute;
+      const textAttributeInvalid = !AttributeUtils.textAttributeValidate(this.config.textCheckType, "", textAttribute);
+      if (textAttributeInvalid) {
+        this.emit("messageError", AttributeUtils.getErrorNotice(this.config.textCheckType, this.lang));
+        textAttribute = "";
+      }
+      this.setTextAttribute(textAttribute);
+      this.emit("updateTextAttribute");
+      this.render();
+    }
+  }
+}
+
+export { INNER_POINT_RADIUS, LINE_ORDER_OFFSET, POINT_ACTIVE_RADIUS, POINT_RADIUS, SEGMENT_NUMBER, LineToolOperation as default };