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

package/es/core/toolOperation/polygonOperation.js

@@ -0,0 +1,1201 @@
+import { i18n } from '@labelbee/lb-utils';
+import MathUtils from '../../utils/MathUtils.js';
+import RectUtils from '../../utils/tool/RectUtils.js';
+import { ERotateDirection, EDragStatus, ESortDirection, EDragTarget, TEXT_ATTRIBUTE_OFFSET, DEFAULT_TEXT_OFFSET } from '../../constant/annotation.js';
+import EKeyCode from '../../constant/keyCode.js';
+import { EPolygonPattern, edgeAdsorptionScope, ELineTypes, EToolName } from '../../constant/tool.js';
+import Locale from '../../locales/index.js';
+import { EMessage } from '../../locales/constants.js';
+import ActionsHistory from '../../utils/ActionsHistory.js';
+import AttributeUtils from '../../utils/tool/AttributeUtils.js';
+import AxisUtils from '../../utils/tool/AxisUtils.js';
+import CanvasUtils from '../../utils/tool/CanvasUtils.js';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import PolygonUtils from '../../utils/tool/PolygonUtils.js';
+import StyleUtils from '../../utils/tool/StyleUtils.js';
+import uuid from '../../utils/uuid.js';
+import { BasicToolOperation } from './basicToolOperation.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));
+const TEXT_MAX_WIDTH = 164;
+class PolygonOperation extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.isAllowDouble = (e) => {
+      const {selectedID} = this;
+      const currentSelectedID = this.getHoverID(e);
+      if (selectedID && selectedID === currentSelectedID) {
+        return true;
+      }
+      return false;
+    };
+    this.textChange = (v) => {
+      if (this.config.textConfigurable === false || !this.selectedID) {
+        return;
+      }
+      this.setPolygonList(AttributeUtils.textChange(v, this.selectedID, this.polygonList));
+      this.emit("selectedChange");
+      this.render();
+    };
+    this.config = CommonToolUtils.jsonParser(props.config);
+    this.drawingPointList = [];
+    this.polygonList = [];
+    this.hoverPointIndex = -1;
+    this.hoverEdgeIndex = -1;
+    this.drawingHistory = new ActionsHistory();
+    this.isCtrl = false;
+    this.isAlt = false;
+    this.isCombined = false;
+    this.pattern = EPolygonPattern.Normal;
+    this.getCurrentSelectedData = this.getCurrentSelectedData.bind(this);
+    this.updateSelectedTextAttribute = this.updateSelectedTextAttribute.bind(this);
+  }
+  eventBinding() {
+    super.eventBinding();
+    this.container.removeEventListener("mouseup", this.onMouseUp);
+    this.container.addEventListener("mouseup", this.dragMouseUp);
+    this.dblClickListener.addEvent(this.onMouseUp, this.onLeftDblClick, this.onRightDblClick, this.isAllowDouble);
+  }
+  eventUnbinding() {
+    super.eventUnbinding();
+    this.container.removeEventListener("mouseup", this.dragMouseUp);
+  }
+  destroy() {
+    super.destroy();
+    if (this._textAttributInstance) {
+      this._textAttributInstance.clearTextAttribute();
+    }
+  }
+  get selectedPolygon() {
+    return PolygonUtils.getPolygonByID(this.polygonList, this.selectedID);
+  }
+  get hoverPolygon() {
+    return this.polygonList.find((v) => v.id === this.hoverID && v.id !== this.selectedID);
+  }
+  get polygonListUnderZoom() {
+    return this.polygonList.map((polygon) => __spreadProps(__spreadValues({}, polygon), {
+      pointList: AxisUtils.changePointListByZoom(polygon.pointList, this.zoom)
+    }));
+  }
+  get selectedText() {
+    var _a;
+    return (_a = this.selectedPolygon) == null ? void 0 : _a.textAttribute;
+  }
+  get dataList() {
+    return this.polygonList;
+  }
+  setPattern(pattern, isForce = false) {
+    var _a;
+    if (((_a = this.drawingPointList) == null ? void 0 : _a.length) > 0 && isForce === true) {
+      return;
+    }
+    this.pattern = pattern;
+  }
+  get currentShowList() {
+    let polygon = [];
+    const [showingPolygon, selectdPolygon] = CommonToolUtils.getRenderResultList(this.polygonList, CommonToolUtils.getSourceID(this.basicResult), this.attributeLockList, this.selectedID);
+    polygon = showingPolygon;
+    if (this.isHidden) {
+      polygon = [];
+    }
+    if (selectdPolygon) {
+      polygon.push(selectdPolygon);
+    }
+    return polygon;
+  }
+  get currentPageResult() {
+    const [showingPolygon] = CommonToolUtils.getRenderResultList(this.polygonList, CommonToolUtils.getSourceID(this.basicResult), []);
+    return showingPolygon;
+  }
+  setResultAndSelectedID(polygonList, selectedID) {
+    this.setPolygonList(polygonList);
+    if (selectedID) {
+      this.selectedID = selectedID;
+    }
+    this.render();
+  }
+  setResult(polygonList) {
+    this.clearActiveStatus();
+    this.setPolygonList(polygonList);
+    this.render();
+  }
+  setPolygonDataByID(newPolygonData, id) {
+    return this.polygonList.map((polygon) => {
+      if (polygon.id === id) {
+        return __spreadValues(__spreadValues({}, polygon), newPolygonData);
+      }
+      return polygon;
+    });
+  }
+  rotatePolygon(angle = 1, direction = ERotateDirection.Clockwise, selectedID = this.selectedID) {
+    if (!selectedID) {
+      return;
+    }
+    const selectedPolygon = PolygonUtils.getPolygonByID(this.polygonList, selectedID);
+    if (!selectedPolygon) {
+      return;
+    }
+    const rotatePointList = PolygonUtils.updatePolygonByRotate(direction, angle, selectedPolygon == null ? void 0 : selectedPolygon.pointList);
+    this.setPolygonList(this.setPolygonDataByID({pointList: rotatePointList}, selectedID));
+    this.render();
+  }
+  addPointInDrawing(e) {
+    if (!this.imgInfo) {
+      return;
+    }
+    const {upperLimitPointNum, edgeAdsorption} = this.config;
+    if (upperLimitPointNum && this.drawingPointList.length >= upperLimitPointNum) {
+      this.emit("messageInfo", `${Locale.getMessagesByLocale(EMessage.UpperLimitErrorNotice, this.lang)}${upperLimitPointNum}`);
+      return;
+    }
+    this.deleteSelectedID();
+    const coordinateZoom = this.getCoordinateUnderZoom(e);
+    const coordinate = AxisUtils.changeDrawOutsideTarget(coordinateZoom, {x: 0, y: 0}, this.imgInfo, this.config.drawOutsideTarget, this.basicResult, this.zoom);
+    const calculateHoverPointIndex = AxisUtils.returnClosePointIndex(coordinate, AxisUtils.changePointListByZoom(this.drawingPointList, this.zoom));
+    if (calculateHoverPointIndex === 0) {
+      this.addDrawingPointToPolygonList();
+      return;
+    }
+    const {dropFoot} = PolygonUtils.getClosestPoint(coordinate, this.polygonListUnderZoom, this.config.lineType, edgeAdsorptionScope);
+    const coordinateWithOrigin = AxisUtils.changePointByZoom(dropFoot && e.altKey === false && edgeAdsorption ? dropFoot : coordinate, 1 / this.zoom);
+    if (this.pattern === EPolygonPattern.Rect && this.drawingPointList.length === 2) {
+      const rect = MathUtils.getRectangleByRightAngle(coordinateWithOrigin, this.drawingPointList);
+      this.drawingPointList = rect;
+      if (this.config.drawOutsideTarget === false && this.imgInfo) {
+        const isOutSide = this.isPolygonOutSide(this.drawingPointList);
+        if (isOutSide) {
+          this.emit("messageInfo", `${Locale.getMessagesByLocale(EMessage.ForbiddenCreationOutsideBoundary, this.lang)}`);
+          this.drawingPointList = [];
+          return;
+        }
+      }
+      this.addDrawingPointToPolygonList(true);
+      return;
+    }
+    this.drawingPointList.push(coordinateWithOrigin);
+    if (this.drawingPointList.length === 1) {
+      this.drawingHistory.initRecord(this.drawingPointList);
+    } else {
+      this.drawingHistory.pushHistory(this.drawingPointList);
+    }
+  }
+  clearResult() {
+    this.setPolygonList([]);
+    this.deleteSelectedID();
+    this.render();
+  }
+  clearPolygonDrag() {
+    this.drawingPointList = [];
+    this.dragInfo = void 0;
+    this.dragInfo = void 0;
+    this.dragStatus = EDragStatus.Wait;
+    this.hoverEdgeIndex = -1;
+    this.hoverPointIndex = -1;
+    this.hoverID = "";
+  }
+  clearActiveStatus() {
+    this.clearPolygonDrag();
+    this.deleteSelectedID();
+  }
+  clearDrawingStatus() {
+    this.drawingPointList = [];
+  }
+  setPolygonList(polygonList) {
+    const oldLen = this.polygonList.length;
+    this.polygonList = polygonList;
+    if (oldLen !== polygonList.length) {
+      this.emit("updatePageNumber");
+    }
+  }
+  setSelectedID(newID) {
+    var _a, _b;
+    const oldID = this.selectedID;
+    if (newID !== oldID && oldID) {
+      (_a = this._textAttributInstance) == null ? void 0 : _a.changeSelected();
+    }
+    if (!newID) {
+      (_b = this._textAttributInstance) == null ? void 0 : _b.clearTextAttribute();
+    }
+    this.selectedID = newID;
+    this.render();
+    this.emit("selectedChange");
+  }
+  setDefaultAttribute(defaultAttribute = "") {
+    const oldDefault = this.defaultAttribute;
+    this.defaultAttribute = defaultAttribute;
+    if (oldDefault !== defaultAttribute) {
+      this.changeStyle(defaultAttribute);
+      this.emit("changeAttributeSidebar");
+      const {selectedID} = this;
+      if (selectedID) {
+        if (this.selectedPolygon) {
+          this.selectedPolygon.attribute = defaultAttribute;
+        }
+        this.history.pushHistory(this.polygonList);
+        this.render();
+      }
+      if (this._textAttributInstance) {
+        if (this.attributeLockList.length > 0 && !this.attributeLockList.includes(defaultAttribute)) {
+          this._textAttributInstance.clearTextAttribute();
+          return;
+        }
+        this._textAttributInstance.updateIcon(this.getTextIconSvg(defaultAttribute));
+      }
+    }
+  }
+  setStyle(toolStyle) {
+    var _a;
+    super.setStyle(toolStyle);
+    if (this._textAttributInstance && this.config.attributeConfigurable === false) {
+      (_a = this._textAttributInstance) == null ? void 0 : _a.updateIcon(this.getTextIconSvg());
+    }
+  }
+  setPolygonValidAndRender(id) {
+    if (!id) {
+      return;
+    }
+    const newPolygonList = this.polygonList.map((polygon) => {
+      if (polygon.id === id) {
+        return __spreadProps(__spreadValues({}, polygon), {
+          valid: !polygon.valid
+        });
+      }
+      return polygon;
+    });
+    this.setPolygonList(newPolygonList);
+    this.history.pushHistory(this.polygonList);
+    this.render();
+    this.emit("updateResult");
+  }
+  addDrawingPointToPolygonList(isRect) {
+    let {lowerLimitPointNum = 3} = this.config;
+    if (lowerLimitPointNum < 3) {
+      lowerLimitPointNum = 3;
+    }
+    if (this.drawingPointList.length < lowerLimitPointNum) {
+      this.drawingPointList = [];
+      this.editPolygonID = "";
+      return;
+    }
+    const basicSourceID = CommonToolUtils.getSourceID(this.basicResult);
+    const polygonList = [...this.polygonList];
+    if (this.editPolygonID) {
+      const samePolygon = polygonList.find((polygon) => polygon.id === this.editPolygonID);
+      if (!samePolygon) {
+        return;
+      }
+      samePolygon.pointList = this.drawingPointList;
+      this.editPolygonID = "";
+    } else {
+      const id = uuid(8, 62);
+      let newPolygon = {
+        id,
+        sourceID: basicSourceID,
+        valid: !this.isCtrl,
+        textAttribute: "",
+        pointList: this.drawingPointList,
+        attribute: this.defaultAttribute,
+        order: CommonToolUtils.getMaxOrder(polygonList.filter((v) => CommonToolUtils.isSameSourceID(v.sourceID, basicSourceID))) + 1
+      };
+      if (this.config.textConfigurable) {
+        let textAttribute = "";
+        textAttribute = AttributeUtils.getTextAttribute(this.polygonList.filter((polygon) => CommonToolUtils.isSameSourceID(polygon.sourceID, basicSourceID)), this.config.textCheckType);
+        newPolygon = __spreadProps(__spreadValues({}, newPolygon), {
+          textAttribute
+        });
+      }
+      if (this.pattern === EPolygonPattern.Rect && isRect === true) {
+        newPolygon = __spreadProps(__spreadValues({}, newPolygon), {
+          isRect: true
+        });
+      }
+      polygonList.push(newPolygon);
+      this.emit("polygonCreated", newPolygon, this.zoom, this.currentPos);
+      this.setSelectedIdAfterAddingDrawing(id);
+    }
+    this.setPolygonList(polygonList);
+    this.isCtrl = false;
+    this.drawingPointList = [];
+    this.history.pushHistory(polygonList);
+  }
+  setSelectedIdAfterAddingDrawing(newID) {
+    if (this.drawingPointList.length === 0) {
+      return;
+    }
+    if (this.config.textConfigurable) {
+      this.setSelectedID(newID);
+    } else {
+      this.deleteSelectedID();
+    }
+  }
+  getHoverID(e) {
+    var _a;
+    const coordinate = this.getCoordinateUnderZoom(e);
+    const polygonListWithZoom = this.currentShowList.map((polygon) => __spreadProps(__spreadValues({}, polygon), {
+      pointList: AxisUtils.changePointListByZoom(polygon.pointList, this.zoom)
+    }));
+    return PolygonUtils.getHoverPolygonID(coordinate, polygonListWithZoom, 10, (_a = this.config) == null ? void 0 : _a.lineType);
+  }
+  getHoverEdgeIndex(e) {
+    var _a;
+    if (!this.selectedID) {
+      return -1;
+    }
+    const selectPolygon = this.selectedPolygon;
+    if (!selectPolygon) {
+      return -1;
+    }
+    const currentCoord = this.getCoordinateUnderZoom(e);
+    const editPointListUnderZoom = AxisUtils.changePointListByZoom(selectPolygon.pointList, this.zoom);
+    return PolygonUtils.getHoverEdgeIndex(currentCoord, editPointListUnderZoom, (_a = this.config) == null ? void 0 : _a.lineType);
+  }
+  getHoverPointIndex(e) {
+    if (!this.selectedID) {
+      return -1;
+    }
+    const selectPolygon = this.selectedPolygon;
+    if (!selectPolygon) {
+      return -1;
+    }
+    const currentCoord = this.getCoordinateUnderZoom(e);
+    const editPointListUnderZoom = AxisUtils.changePointListByZoom(selectPolygon.pointList, this.zoom);
+    return AxisUtils.returnClosePointIndex(currentCoord, editPointListUnderZoom);
+  }
+  deletePolygon(id) {
+    var _a;
+    if (!id) {
+      return;
+    }
+    const deletedPolygon = this.polygonList.find((p) => p.id === id);
+    this.emit("deletedObject", {deletedObject: deletedPolygon, id});
+    this.setPolygonList(this.polygonList.filter((polygon) => polygon.id !== id));
+    this.history.pushHistory(this.polygonList);
+    (_a = this._textAttributInstance) == null ? void 0 : _a.clearTextAttribute();
+    this.emit("selectedChange");
+    this.render();
+  }
+  deletePolygonPoint(index) {
+    if (!this.selectedID) {
+      return;
+    }
+    const {selectedPolygon} = this;
+    if (!selectedPolygon) {
+      return;
+    }
+    let {lowerLimitPointNum} = this.config;
+    if (lowerLimitPointNum < 3) {
+      lowerLimitPointNum = 3;
+    }
+    if (selectedPolygon.pointList.length <= lowerLimitPointNum) {
+      this.emit("messageInfo", `${Locale.getMessagesByLocale(EMessage.LowerLimitErrorNotice, this.lang)}${lowerLimitPointNum}`);
+      return;
+    }
+    selectedPolygon == null ? void 0 : selectedPolygon.pointList.splice(index, 1);
+    this.history.pushHistory(this.polygonList);
+    this.render();
+  }
+  spaceKeydown() {
+    var _a, _b, _c;
+    if (this.selectedID) {
+      if (((_a = this.selectedPolygon) == null ? void 0 : _a.isRect) === true) {
+        this.emit("messageInfo", `${Locale.getMessagesByLocale(EMessage.UnableToReannotation, this.lang)}`);
+        return;
+      }
+      this.editPolygonID = this.selectedID;
+      this.drawingPointList = (_c = (_b = this.selectedPolygon) == null ? void 0 : _b.pointList) != null ? _c : [];
+      this.drawingHistory.empty();
+      this.drawingHistory.initRecord(this.drawingPointList);
+      this.hoverID = "";
+      this.deleteSelectedID();
+      this.render();
+    }
+  }
+  onTabKeyDown(e) {
+    e.preventDefault();
+    let sort = ESortDirection.ascend;
+    if (e.shiftKey) {
+      sort = ESortDirection.descend;
+    }
+    this.switchToNextPolygon(sort);
+  }
+  switchToNextPolygon(sort) {
+    if (this.drawingPointList.length > 0) {
+      return;
+    }
+    const [showingResult, selectedResult] = CommonToolUtils.getRenderResultList(this.polygonList, CommonToolUtils.getSourceID(this.basicResult), this.attributeLockList, this.selectedID);
+    let polygonList = [...showingResult];
+    if (selectedResult) {
+      polygonList = [...polygonList, selectedResult];
+    }
+    const viewPort = CanvasUtils.getViewPort(this.canvas, this.currentPos, this.zoom);
+    const sortList = polygonList.map((v) => {
+      var _a, _b, _c, _d;
+      return __spreadProps(__spreadValues({}, v), {
+        x: (_b = (_a = v.pointList[0]) == null ? void 0 : _a.x) != null ? _b : 0,
+        y: (_d = (_c = v.pointList[0]) == null ? void 0 : _c.y) != null ? _d : 0
+      });
+    }).filter((polygon) => CanvasUtils.inViewPort({x: polygon.x, y: polygon.y}, viewPort));
+    const nextSelectedResult = CommonToolUtils.getNextSelectedRectID(sortList, sort, this.selectedID);
+    if (nextSelectedResult) {
+      this.setSelectedID(nextSelectedResult.id);
+      const {selectedPolygon} = this;
+      if (selectedPolygon) {
+        this.setDefaultAttribute(selectedPolygon.attribute);
+      }
+    }
+    this.render();
+  }
+  onKeyDown(e) {
+    if (!CommonToolUtils.hotkeyFilter(e)) {
+      return;
+    }
+    if (super.onKeyDown(e) === false) {
+      return;
+    }
+    const {keyCode} = e;
+    switch (keyCode) {
+      case EKeyCode.Space:
+        this.spaceKeydown();
+        break;
+      case EKeyCode.Esc:
+        this.drawingPointList = [];
+        this.editPolygonID = "";
+        break;
+      case EKeyCode.F:
+        if (this.selectedID) {
+          this.setPolygonValidAndRender(this.selectedID);
+        }
+        break;
+      case EKeyCode.Z:
+        if (e.altKey) {
+          this.onCombinedExecute();
+          return;
+        }
+        this.setIsHidden(!this.isHidden);
+        this.render();
+        break;
+      case EKeyCode.Delete:
+        this.deletePolygon(this.selectedID);
+        this.render();
+        break;
+      case EKeyCode.Ctrl:
+        this.isCtrl = true;
+        break;
+      case EKeyCode.Alt:
+        if (this.isAlt === false) {
+          e.preventDefault();
+          this.isAlt = true;
+          this.render();
+        }
+        break;
+      case EKeyCode.Tab: {
+        this.onTabKeyDown(e);
+        break;
+      }
+      case EKeyCode.X:
+        if (e.altKey) {
+          this.segment();
+        }
+        break;
+      default: {
+        if (this.config.attributeConfigurable) {
+          const keyCode2Attribute = AttributeUtils.getAttributeByKeycode(keyCode, this.config.attributeList);
+          if (keyCode2Attribute !== void 0) {
+            this.setDefaultAttribute(keyCode2Attribute);
+          }
+        }
+        break;
+      }
+    }
+  }
+  onKeyUp(e) {
+    super.onKeyUp(e);
+    switch (e.keyCode) {
+      case EKeyCode.Ctrl:
+        this.isCtrl = false;
+        break;
+      case EKeyCode.Alt: {
+        const oldAlt = this.isAlt;
+        this.isAlt = false;
+        if (oldAlt === true) {
+          this.render();
+        }
+        break;
+      }
+    }
+  }
+  rightMouseUp(e) {
+    if (this.drawingPointList.length > 0) {
+      this.addDrawingPointToPolygonList();
+      return;
+    }
+    this.setSelectedID(this.hoverID);
+    const {selectedPolygon} = this;
+    if (selectedPolygon) {
+      this.setDefaultAttribute(selectedPolygon.attribute);
+    }
+  }
+  onLeftDblClick(e) {
+    if (this.hoverEdgeIndex > -1) {
+      const currentCoord = this.getCoordinateUnderZoom(e);
+      const {selectedPolygon} = this;
+      if (!selectedPolygon) {
+        return;
+      }
+      const {dropFoot} = PolygonUtils.getClosestPoint(currentCoord, this.polygonListUnderZoom, this.config.lineType, edgeAdsorptionScope);
+      if (!dropFoot) {
+        return;
+      }
+      const {upperLimitPointNum} = this.config;
+      if (upperLimitPointNum && selectedPolygon.pointList.length >= upperLimitPointNum) {
+        this.emit("messageInfo", `${Locale.getMessagesByLocale(EMessage.UpperLimitErrorNotice, this.lang)}${upperLimitPointNum}`);
+        this.clearPolygonDrag();
+        return;
+      }
+      selectedPolygon == null ? void 0 : selectedPolygon.pointList.splice(this.hoverEdgeIndex + 1, 0, AxisUtils.changePointByZoom(dropFoot, 1 / this.zoom));
+      this.setPolygonDataByID(selectedPolygon, this.selectedID);
+      this.history.pushHistory(this.polygonList);
+      this.hoverPointIndex = -1;
+      this.hoverEdgeIndex = -1;
+      this.render();
+    }
+    this.dragInfo = void 0;
+  }
+  onRightDblClick(e) {
+    this.dragInfo = void 0;
+    this.clearImgDrag();
+    const hoverID = this.getHoverID(e);
+    const hoverPointIndex = this.getHoverPointIndex(e);
+    if (this.hoverPointIndex > -1 && this.hoverPointIndex === hoverPointIndex) {
+      this.deletePolygonPoint(hoverPointIndex);
+      this.dragInfo = void 0;
+      this.hoverPointIndex = -1;
+      this.render();
+      return;
+    }
+    if (this.hoverID === this.selectedID) {
+      this.deletePolygon(hoverID);
+    }
+    this.render();
+  }
+  onMouseDown(e) {
+    if (super.onMouseDown(e) || this.forbidMouseOperation || e.ctrlKey === true) {
+      return;
+    }
+    const firstPolygon = this.selectedPolygon;
+    if (!firstPolygon || e.button !== 0) {
+      return;
+    }
+    const hoverID = this.getHoverID(e);
+    if (hoverID !== this.selectedID) {
+      return;
+    }
+    const initPointList = firstPolygon.pointList;
+    const dragStartCoord = this.getCoordinateUnderZoom(e);
+    let changePointIndex = [0];
+    let dragTarget = EDragTarget.Plane;
+    this.dragStatus = EDragStatus.Start;
+    const closePointIndex = this.getHoverPointIndex(e);
+    const closeEdgeIndex = this.getHoverEdgeIndex(e);
+    if (closePointIndex > -1) {
+      dragTarget = EDragTarget.Point;
+      changePointIndex = [closePointIndex];
+    } else if (closeEdgeIndex > -1 && this.hoverEdgeIndex > -1) {
+      dragTarget = EDragTarget.Line;
+      changePointIndex = [closeEdgeIndex, (closeEdgeIndex + 1) % initPointList.length];
+    }
+    this.dragInfo = {
+      dragStartCoord,
+      dragTarget,
+      initPointList,
+      changePointIndex,
+      originPolygon: this.selectedPolygon
+    };
+    return true;
+  }
+  segment() {
+    var _a;
+    if (!this.selectedID) {
+      return;
+    }
+    if (((_a = this.config) == null ? void 0 : _a.lineType) !== ELineTypes.Line) {
+      return;
+    }
+    const selectedPointList = PolygonUtils.getPolygonPointList(this.selectedID, this.currentShowList);
+    const backgroundPolygonList = this.currentShowList.filter((v) => v.id !== this.selectedID);
+    if (backgroundPolygonList.length === 0 || selectedPointList.length === 0) {
+      return;
+    }
+    const wrapIndex = PolygonUtils.getWrapPolygonIndex(selectedPointList, backgroundPolygonList);
+    let newPolygonList = [...this.polygonList];
+    if (wrapIndex === -1) {
+      const newPointListArray = PolygonUtils.segmentPolygonByPolygon(selectedPointList, backgroundPolygonList);
+      if (!newPointListArray) {
+        return;
+      }
+      const newPointList = newPointListArray.shift();
+      if (!newPointList) {
+        return;
+      }
+      let defaultAttribute = "";
+      let valid = true;
+      const sourceID = CommonToolUtils.getSourceID(this.basicResult);
+      let textAttribute = "";
+      newPolygonList = this.polygonList.map((v) => {
+        var _a2, _b;
+        if (v.id === this.selectedID) {
+          defaultAttribute = v.attribute;
+          valid = (_a2 = v == null ? void 0 : v.valid) != null ? _a2 : true;
+          textAttribute = (_b = v == null ? void 0 : v.textAttribute) != null ? _b : "";
+          return __spreadProps(__spreadValues({}, v), {
+            pointList: newPointList
+          });
+        }
+        return v;
+      });
+      if (newPointListArray.length > 0) {
+        newPointListArray.forEach((v, i) => {
+          newPolygonList.push({
+            sourceID,
+            id: uuid(8, 62),
+            pointList: v,
+            valid,
+            order: CommonToolUtils.getMaxOrder(this.currentShowList) + 1 + i,
+            attribute: defaultAttribute,
+            textAttribute
+          });
+        });
+      }
+    } else {
+      newPolygonList[wrapIndex].pointList = PolygonUtils.clipPolygonFromWrapPolygon(selectedPointList, newPolygonList[wrapIndex].pointList);
+      newPolygonList = newPolygonList.filter((v) => v.id !== this.selectedID);
+    }
+    this.setPolygonList(newPolygonList);
+    this.history.pushHistory(newPolygonList);
+    this.render();
+  }
+  onCombinedExecute() {
+    if (!this.selectedID) {
+      this.emit("messageInfo", i18n.t("PolygonsToBeCombinedNeedToBeSelected"));
+      return;
+    }
+    this.isCombined = !this.isCombined;
+  }
+  combine(e) {
+    var _a;
+    const hoverID = this.getHoverID(e);
+    if (!hoverID || !this.selectedID || this.selectedID === hoverID) {
+      return;
+    }
+    if (((_a = this.config) == null ? void 0 : _a.lineType) !== ELineTypes.Line) {
+      this.emit("messageInfo", i18n.t("CurveModeDoesNotSupportCutting"));
+      return;
+    }
+    const selectedPolygon = this.polygonList.find((v) => v.id === this.selectedID);
+    const combinedPolygon = this.currentShowList.find((v) => v.id === hoverID);
+    if (!combinedPolygon || !selectedPolygon) {
+      return;
+    }
+    const composeData = PolygonUtils.combinePolygonWithPolygon(selectedPolygon, combinedPolygon);
+    if (!composeData) {
+      return;
+    }
+    const {newPolygon, unionList} = composeData;
+    if (unionList.length === 1 && newPolygon) {
+      const newPolygonList = this.polygonList.filter((v) => !unionList.includes(v.id)).map((v) => {
+        if (v.id === this.selectedID) {
+          return newPolygon;
+        }
+        return v;
+      });
+      this.setPolygonList(newPolygonList);
+      this.history.pushHistory(newPolygonList);
+      this.render();
+      this.emit("messageInfo", i18n.t("CombineSuccess"));
+    } else {
+      this.emit("messageInfo", i18n.t("CombiningFailedNotify"));
+    }
+    this.isCombined = false;
+  }
+  isPolygonOutSide(selectedPointList) {
+    if (this.dependToolName && this.basicCanvas && this.basicResult) {
+      let isOutSide = false;
+      switch (this.dependToolName) {
+        case EToolName.Rect: {
+          isOutSide = selectedPointList.filter((v) => !RectUtils.isInRect(v, this.basicResult)).length > 0;
+          break;
+        }
+        case EToolName.Polygon: {
+          isOutSide = PolygonUtils.isPointListOutSidePolygon(selectedPointList, this.basicResult.pointList, this.config.lineType);
+          break;
+        }
+      }
+      return isOutSide;
+    }
+    if (!this.imgInfo) {
+      return false;
+    }
+    const {left, top, right, bottom} = MathUtils.calcViewportBoundaries(AxisUtils.changePointListByZoom(selectedPointList, this.zoom));
+    const scope = 1e-5;
+    if (left < 0 || top < 0 || right > this.imgInfo.width + scope || bottom > this.imgInfo.height + scope) {
+      return true;
+    }
+    return false;
+  }
+  onDragMove(e) {
+    if (!this.dragInfo || !this.selectedID) {
+      return;
+    }
+    const {selectedPolygon} = this;
+    let selectedPointList = selectedPolygon == null ? void 0 : selectedPolygon.pointList;
+    if (!selectedPointList) {
+      return;
+    }
+    const {initPointList, dragStartCoord, dragTarget, changePointIndex} = this.dragInfo;
+    const coordinate = this.getCoordinateUnderZoom(e);
+    let offset = {
+      x: (coordinate.x - dragStartCoord.x) / this.zoom,
+      y: (coordinate.y - dragStartCoord.y) / this.zoom
+    };
+    if (this.pattern === EPolygonPattern.Rect && (selectedPolygon == null ? void 0 : selectedPolygon.isRect) === true && changePointIndex && [EDragTarget.Line].includes(dragTarget)) {
+      const firstPointIndex = MathUtils.getArrayIndex(changePointIndex[0] - 2, 4);
+      const secondPointIndex = MathUtils.getArrayIndex(changePointIndex[0] - 1, 4);
+      const basicLine = [initPointList[firstPointIndex], initPointList[secondPointIndex]];
+      offset = MathUtils.getRectPerpendicularOffset(dragStartCoord, coordinate, basicLine);
+      offset = {
+        x: offset.x / this.zoom,
+        y: offset.y / this.zoom
+      };
+    }
+    this.dragStatus = EDragStatus.Move;
+    switch (dragTarget) {
+      case EDragTarget.Plane:
+        selectedPointList = selectedPointList.map((v, i) => __spreadProps(__spreadValues({}, v), {
+          x: initPointList[i].x + offset.x,
+          y: initPointList[i].y + offset.y
+        }));
+        break;
+      case EDragTarget.Point:
+      case EDragTarget.Line:
+        selectedPointList = selectedPointList.map((n, i) => {
+          if (changePointIndex && changePointIndex.includes(i)) {
+            return __spreadProps(__spreadValues({}, n), {
+              x: initPointList[i].x + offset.x,
+              y: initPointList[i].y + offset.y
+            });
+          }
+          return n;
+        });
+        break;
+    }
+    if (this.pattern === EPolygonPattern.Rect && (selectedPolygon == null ? void 0 : selectedPolygon.isRect) === true && dragTarget === EDragTarget.Point && changePointIndex) {
+      const newPointList = MathUtils.getPointListFromPointOffset(initPointList, changePointIndex[0], offset);
+      selectedPointList = newPointList;
+    }
+    if (this.config.drawOutsideTarget === false && this.imgInfo) {
+      const isOutSide = this.isPolygonOutSide(selectedPointList);
+      if (isOutSide) {
+        return;
+      }
+    }
+    const newPolygonList = this.polygonList.map((v) => {
+      if (v.id === this.selectedID) {
+        const newData = __spreadProps(__spreadValues({}, v), {
+          pointList: selectedPointList
+        });
+        if (v.isRect === true && this.pattern === EPolygonPattern.Normal) {
+          Object.assign(newData, {isRect: false});
+        }
+        return newData;
+      }
+      return v;
+    });
+    this.setPolygonList(newPolygonList);
+    this.render();
+  }
+  onMouseMove(e) {
+    if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return;
+    }
+    if (this.selectedID && this.dragInfo) {
+      this.onDragMove(e);
+      return;
+    }
+    let hoverPointIndex = -1;
+    let hoverEdgeIndex = -1;
+    const {selectedID} = this;
+    if (selectedID) {
+      this.hoverEdgeIndex = -1;
+      this.hoverPointIndex = -1;
+      hoverPointIndex = this.getHoverPointIndex(e);
+      if (hoverPointIndex > -1) {
+        this.hoverPointIndex = hoverPointIndex;
+      } else {
+        hoverEdgeIndex = this.getHoverEdgeIndex(e);
+        this.hoverEdgeIndex = hoverEdgeIndex;
+      }
+    }
+    if (this.drawingPointList.length > 0) {
+      return;
+    }
+    const newHoverID = this.getHoverID(e);
+    if (this.hoverID !== newHoverID) {
+      this.hoverID = newHoverID;
+      this.render();
+    }
+  }
+  leftMouseUp(e) {
+    const hoverID = this.getHoverID(e);
+    if (this.drawingPointList.length === 0 && e.ctrlKey === true && hoverID) {
+      this.setPolygonValidAndRender(hoverID);
+      return;
+    }
+    this.addPointInDrawing(e);
+  }
+  onMouseUp(e) {
+    if (this.isCombined) {
+      switch (e.button) {
+        case 0:
+          this.combine(e);
+          break;
+        case 2:
+          this.isCombined = false;
+          break;
+        default:
+          return;
+      }
+      return;
+    }
+    if (super.onMouseUp(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return void 0;
+    }
+    if (this.dragInfo && this.dragStatus === EDragStatus.Move) {
+      const {originPolygon} = this.dragInfo;
+      this.dragInfo = void 0;
+      this.dragStatus = EDragStatus.Wait;
+      this.history.pushHistory(this.polygonList);
+      this.emit("updateResult");
+      this.emit("updatePolygonByDrag", {newPolygon: this.selectedPolygon, originPolygon});
+      return;
+    }
+    switch (e.button) {
+      case 0: {
+        this.leftMouseUp(e);
+        break;
+      }
+      case 2: {
+        this.rightMouseUp(e);
+        break;
+      }
+    }
+    this.render();
+  }
+  dragMouseUp() {
+    if (this.dragStatus === EDragStatus.Start) {
+      this.dragInfo = void 0;
+      this.dragStatus = EDragStatus.Wait;
+    }
+  }
+  exportData() {
+    const {polygonList} = this;
+    return [polygonList, this.basicImgInfo];
+  }
+  getTextIconSvg(attribute = "") {
+    return AttributeUtils.getTextIconSvg(attribute, this.config.attributeList, this.config.attributeConfigurable, this.baseIcon);
+  }
+  getCurrentSelectedData() {
+    const {selectedPolygon} = this;
+    if (!selectedPolygon) {
+      return;
+    }
+    const toolColor = this.getColor(selectedPolygon.attribute);
+    const color = selectedPolygon.valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    return {
+      width: TEXT_MAX_WIDTH,
+      textAttribute: selectedPolygon.textAttribute,
+      color
+    };
+  }
+  updateSelectedTextAttribute(newTextAttribute) {
+    if (this._textAttributInstance && newTextAttribute && this.selectedID) {
+      let textAttribute = newTextAttribute;
+      if (AttributeUtils.textAttributeValidate(this.config.textCheckType, "", textAttribute) === false) {
+        this.emit("messageError", AttributeUtils.getErrorNotice(this.config.textCheckType, this.lang));
+        textAttribute = "";
+      }
+      this.setPolygonList(AttributeUtils.textChange(textAttribute, this.selectedID, this.polygonList));
+      this.emit("updateTextAttribute");
+      this.render();
+    }
+  }
+  renderTextAttribute() {
+    var _a;
+    const {selectedPolygon} = this;
+    if (!this.ctx || this.config.textConfigurable === false || !selectedPolygon) {
+      return;
+    }
+    const {pointList, attribute, valid, textAttribute} = selectedPolygon;
+    const {x, y} = pointList[pointList.length - 1];
+    const newWidth = TEXT_MAX_WIDTH;
+    const coordinate = AxisUtils.getOffsetCoordinate({x, y}, this.currentPos, this.zoom);
+    const toolColor = this.getColor(attribute);
+    const color = valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    if (!this._textAttributInstance) {
+      this._textAttributInstance = new TextAttributeClass({
+        width: newWidth,
+        container: this.container,
+        icon: this.getTextIconSvg(attribute),
+        color,
+        getCurrentSelectedData: this.getCurrentSelectedData,
+        updateSelectedTextAttribute: this.updateSelectedTextAttribute
+      });
+    }
+    if (this._textAttributInstance && !((_a = this._textAttributInstance) == null ? void 0 : _a.isExit)) {
+      this._textAttributInstance.appendToContainer();
+    }
+    this._textAttributInstance.update(`${textAttribute}`, {
+      left: coordinate.x,
+      top: coordinate.y,
+      color,
+      width: newWidth
+    });
+  }
+  renderStaticPolygon() {
+    var _a;
+    if (this.isHidden === false) {
+      (_a = this.polygonList) == null ? void 0 : _a.forEach((polygon) => {
+        var _a2, _b, _c, _d, _e;
+        if ([this.selectedID, this.editPolygonID].includes(polygon.id)) {
+          return;
+        }
+        const {textAttribute, attribute} = polygon;
+        const toolColor = this.getColor(attribute);
+        const toolData = StyleUtils.getStrokeAndFill(toolColor, polygon.valid);
+        const transformPointList = AxisUtils.changePointListByZoom(polygon.pointList || [], this.zoom, this.currentPos);
+        DrawUtils.drawPolygonWithFillAndLine(this.canvas, transformPointList, {
+          fillColor: toolData.fill,
+          strokeColor: toolData.stroke,
+          pointColor: "white",
+          thickness: (_b = (_a2 = this.style) == null ? void 0 : _a2.width) != null ? _b : 2,
+          lineCap: "round",
+          isClose: true,
+          lineType: (_c = this.config) == null ? void 0 : _c.lineType
+        });
+        let showText = `${(_d = AttributeUtils.getAttributeShowText(attribute, this.config.attributeList)) != null ? _d : ""}`;
+        if (((_e = this.config) == null ? void 0 : _e.isShowOrder) && (polygon == null ? void 0 : polygon.order) > 0) {
+          showText = `${polygon.order} ${showText}`;
+        }
+        DrawUtils.drawText(this.canvas, transformPointList[0], showText, __spreadValues({
+          color: toolData.stroke
+        }, DEFAULT_TEXT_OFFSET));
+        const endPoint = transformPointList[transformPointList.length - 1];
+        DrawUtils.drawText(this.canvas, {x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y}, textAttribute, __spreadValues({
+          color: toolData.stroke
+        }, DEFAULT_TEXT_OFFSET));
+      });
+    }
+  }
+  renderSelectedPolygon() {
+    var _a, _b, _c;
+    if (this.selectedID) {
+      const selectdPolygon = this.selectedPolygon;
+      if (selectdPolygon) {
+        const toolColor = this.getColor(selectdPolygon.attribute);
+        const toolData = StyleUtils.getStrokeAndFill(toolColor, selectdPolygon.valid, {isSelected: true});
+        DrawUtils.drawSelectedPolygonWithFillAndLine(this.canvas, AxisUtils.changePointListByZoom(selectdPolygon.pointList, this.zoom, this.currentPos), {
+          fillColor: toolData.fill,
+          strokeColor: toolData.stroke,
+          pointColor: "white",
+          thickness: 2,
+          lineCap: "round",
+          isClose: true,
+          lineType: (_a = this.config) == null ? void 0 : _a.lineType
+        });
+        let showText = `${(_b = AttributeUtils.getAttributeShowText(selectdPolygon.attribute, this.config.attributeList)) != null ? _b : ""}`;
+        if (((_c = this.config) == null ? void 0 : _c.isShowOrder) && (selectdPolygon == null ? void 0 : selectdPolygon.order) > 0) {
+          showText = `${selectdPolygon.order} ${showText}`;
+        }
+        DrawUtils.drawText(this.canvas, AxisUtils.changePointByZoom(selectdPolygon.pointList[0], this.zoom, this.currentPos), showText, __spreadValues({
+          color: toolData.stroke
+        }, DEFAULT_TEXT_OFFSET));
+        this.renderTextAttribute();
+      }
+    }
+  }
+  renderHoverPolygon() {
+    var _a;
+    if (this.hoverID && this.hoverID !== this.editPolygonID) {
+      const {hoverPolygon} = this;
+      if (hoverPolygon) {
+        let color = "";
+        const toolColor = this.getColor(hoverPolygon.attribute);
+        if (hoverPolygon.valid) {
+          color = toolColor.validHover.fill;
+        } else {
+          color = StyleUtils.getStrokeAndFill(toolColor, false, {isHover: true}).fill;
+        }
+        DrawUtils.drawPolygonWithFill(this.canvas, AxisUtils.changePointListByZoom(hoverPolygon.pointList, this.zoom, this.currentPos), {
+          color,
+          lineType: (_a = this.config) == null ? void 0 : _a.lineType
+        });
+      }
+    }
+  }
+  renderPolygon() {
+    var _a, _b, _c, _d;
+    this.renderStaticPolygon();
+    this.renderHoverPolygon();
+    this.renderSelectedPolygon();
+    const defaultColor = this.getColor(this.defaultAttribute);
+    const toolData = StyleUtils.getStrokeAndFill(defaultColor, !this.isCtrl);
+    if (((_a = this.drawingPointList) == null ? void 0 : _a.length) > 0) {
+      let drawingPointList = [...this.drawingPointList];
+      let coordinate = AxisUtils.getOriginCoordinateWithOffsetCoordinate(this.coord, this.zoom, this.currentPos);
+      if (this.pattern === EPolygonPattern.Rect && drawingPointList.length === 2) {
+        drawingPointList = MathUtils.getRectangleByRightAngle(coordinate, drawingPointList);
+      } else {
+        if (((_b = this.config) == null ? void 0 : _b.edgeAdsorption) && this.isAlt === false) {
+          const {dropFoot} = PolygonUtils.getClosestPoint(coordinate, this.polygonList, (_c = this.config) == null ? void 0 : _c.lineType, edgeAdsorptionScope / this.zoom);
+          if (dropFoot) {
+            coordinate = dropFoot;
+          }
+        }
+        drawingPointList.push(coordinate);
+      }
+      DrawUtils.drawSelectedPolygonWithFillAndLine(this.canvas, AxisUtils.changePointListByZoom(drawingPointList, this.zoom, this.currentPos), {
+        fillColor: toolData.fill,
+        strokeColor: toolData.stroke,
+        pointColor: "white",
+        thickness: 2,
+        lineCap: "round",
+        isClose: false,
+        lineType: this.config.lineType
+      });
+    }
+    if (this.hoverPointIndex > -1 && this.selectedID) {
+      const selectdPolygon = this.selectedPolygon;
+      if (!selectdPolygon) {
+        return;
+      }
+      const hoverColor = StyleUtils.getStrokeAndFill(defaultColor, selectdPolygon.valid, {isSelected: true});
+      const point = selectdPolygon == null ? void 0 : selectdPolygon.pointList[this.hoverPointIndex];
+      if (point) {
+        const {x, y} = AxisUtils.changePointByZoom(point, this.zoom, this.currentPos);
+        DrawUtils.drawCircleWithFill(this.canvas, {x, y}, 5, {
+          color: hoverColor.fill
+        });
+      }
+    }
+    if (this.hoverEdgeIndex > -1 && this.selectedID) {
+      const selectdPolygon = this.selectedPolygon;
+      if (!selectdPolygon) {
+        return;
+      }
+      const selectedColor = StyleUtils.getStrokeAndFill(defaultColor, selectdPolygon.valid, {isSelected: true});
+      DrawUtils.drawLineWithPointList(this.canvas, AxisUtils.changePointListByZoom(selectdPolygon.pointList, this.zoom, this.currentPos), {
+        color: selectedColor.stroke,
+        thickness: 10,
+        hoverEdgeIndex: this.hoverEdgeIndex,
+        lineType: (_d = this.config) == null ? void 0 : _d.lineType
+      });
+    }
+  }
+  render() {
+    if (!this.ctx) {
+      return;
+    }
+    super.render();
+    this.renderPolygon();
+    this.renderCursorLine(this.getLineColor(this.defaultAttribute));
+  }
+  renderCursorLine(lineColor) {
+    super.renderCursorLine(lineColor);
+    if (this.isCombined) {
+      const {x, y} = this.coord;
+      const padding = 10;
+      const rectWidth = 186;
+      const rectHeight = 32;
+      DrawUtils.drawRectWithFill(this.canvas, {
+        x: x + padding,
+        y: y - padding * 4 - 1,
+        width: rectWidth,
+        height: rectHeight
+      }, {color: "black"});
+      DrawUtils.drawText(this.canvas, {x, y}, i18n.t("ClickAnotherPolygon"), {
+        textAlign: "center",
+        color: "white",
+        offsetX: rectWidth / 2 + padding,
+        offsetY: -(rectHeight / 2 + padding / 2)
+      });
+      DrawUtils.drawRect(this.canvas, {
+        x: x - padding,
+        y: y - padding,
+        width: padding * 2,
+        height: padding * 2
+      }, {lineDash: [6], color: "white"});
+    }
+  }
+  undo() {
+    if (this.drawingPointList.length > 0) {
+      const drawingPointList = this.drawingHistory.undo();
+      if (!drawingPointList) {
+        return;
+      }
+      this.drawingPointList = drawingPointList;
+      this.render();
+      return;
+    }
+    const polygonList = this.history.undo();
+    if (polygonList) {
+      if (polygonList.length !== this.polygonList.length) {
+        this.deleteSelectedID();
+      }
+      this.setPolygonList(polygonList);
+      this.render();
+    }
+  }
+  redo() {
+    if (this.drawingPointList.length > 0) {
+      const drawingPointList = this.drawingHistory.redo();
+      if (!drawingPointList) {
+        return;
+      }
+      this.drawingPointList = drawingPointList;
+      this.render();
+      return;
+    }
+    const polygonList = this.history.redo();
+    if (polygonList) {
+      if (polygonList.length !== this.polygonList.length) {
+        this.deleteSelectedID();
+      }
+      this.setPolygonList(polygonList);
+      this.render();
+    }
+  }
+  deleteSelectedID() {
+    this.setSelectedID("");
+  }
+}
+
+export { PolygonOperation as default };