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

package/es/core/toolOperation/rectOperation.js

@@ -0,0 +1,1170 @@
+import MathUtils from '../../utils/MathUtils.js';
+import AxisUtils from '../../utils/tool/AxisUtils.js';
+import RectUtils from '../../utils/tool/RectUtils.js';
+import { EDragStatus, ESortDirection, DEFAULT_TEXT_SHADOW } from '../../constant/annotation.js';
+import EKeyCode from '../../constant/keyCode.js';
+import { EDragTarget } from '../../constant/tool.js';
+import Locale from '../../locales/index.js';
+import { EMessage } from '../../locales/constants.js';
+import AttributeUtils from '../../utils/tool/AttributeUtils.js';
+import CanvasUtils from '../../utils/tool/CanvasUtils.js';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import MarkerUtils from '../../utils/tool/MarkerUtils.js';
+import { getPolygonPointUnderZoom } from '../../utils/tool/polygonTool.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 scope = 6;
+class RectOperation extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.setMarkerIndex = (markerIndex) => {
+      this.markerIndex = markerIndex;
+    };
+    this.setMarkerIndexAndSelect = (markerIndex) => {
+      if (!this.config.markerList) {
+        return;
+      }
+      this.markerIndex = markerIndex;
+      const markerValue = this.config.markerList[markerIndex].value;
+      const currentRect = this.currentPageResult.find((rect) => rect.label === markerValue);
+      if (currentRect) {
+        this.setSelectedID(currentRect.id);
+        if (this.config.attributeConfigurable === true) {
+          this.setDefaultAttribute(currentRect.attribute);
+        }
+      }
+      this.emit("markIndexChange");
+    };
+    this.getHoverRectID = (e) => {
+      const coordinate = this.getCoordinateUnderZoom(e);
+      const newScope = scope;
+      const {currentShowList} = this;
+      if (currentShowList.length > 0) {
+        if (this.selectedRectID) {
+          const {selectedRect} = this;
+          if (selectedRect) {
+            if (RectUtils.isInRect(coordinate, selectedRect, newScope, this.zoom)) {
+              return selectedRect.id;
+            }
+          }
+        }
+        const hoverList = currentShowList.filter((rect) => RectUtils.isInRect(coordinate, rect, newScope, this.zoom));
+        if (hoverList.length === 0) {
+          return "";
+        }
+        if (hoverList.length === 1) {
+          return hoverList[0].id;
+        }
+        if (hoverList.length > 1) {
+          const rectSizeList = hoverList.map((rect) => ({size: rect.width * rect.height, id: rect.id})).sort((a, b) => a.size - b.size);
+          return rectSizeList[0].id;
+        }
+      }
+      return "";
+    };
+    this.textChange = (v) => {
+      if (this.config.textConfigurable !== true || !this.selectedRectID) {
+        return;
+      }
+      this.setRectList(AttributeUtils.textChange(v, this.selectedRectID, this.rectList), true);
+      this.emit("selectedChange");
+      this.render();
+    };
+    this.drawOutSideTarget = props.drawOutSideTarget || false;
+    this.rectList = [];
+    this.isFlow = true;
+    this.config = CommonToolUtils.jsonParser(props.config);
+    this.hoverRectEdgeIndex = -1;
+    this.hoverRectPointIndex = -1;
+    this.markerIndex = 0;
+    this.setStyle(props.style);
+    this.createNewDrawingRect = this.createNewDrawingRect.bind(this);
+    this.getDrawingRectWithRectList = this.getDrawingRectWithRectList.bind(this);
+    this.setSelectedIdAfterAddingDrawingRect = this.setSelectedIdAfterAddingDrawingRect.bind(this);
+    this.getCurrentSelectedData = this.getCurrentSelectedData.bind(this);
+    this.updateSelectedRectTextAttribute = this.updateSelectedRectTextAttribute.bind(this);
+    this.setSelectedID = this.setSelectedID.bind(this);
+  }
+  setResult(rectList) {
+    this.clearActiveStatus();
+    this.setRectList(rectList);
+    if (this.hasMarkerConfig) {
+      const nextMarkerInfo = CommonToolUtils.getNextMarker(this.getCurrentPageResult(rectList), this.config.markerList);
+      if (nextMarkerInfo) {
+        this.setMarkerIndex(nextMarkerInfo.index);
+      }
+    }
+    this.render();
+  }
+  destroy() {
+    super.destroy();
+    if (this._textAttributInstance) {
+      this._textAttributInstance.clearTextAttribute();
+    }
+  }
+  setConfig(config, isClear = false) {
+    this.config = CommonToolUtils.jsonParser(config);
+    if (isClear === true) {
+      this.clearResult(false);
+    }
+  }
+  setRectList(rectList, isUpload = false) {
+    const oldLen = this.rectList.length;
+    this.rectList = rectList;
+    if (oldLen !== rectList.length) {
+      this.emit("updatePageNumber");
+    }
+    if (isUpload) {
+      this.emit("updateResult");
+    }
+  }
+  get selectedRect() {
+    return this.rectList.find((v) => v.id === this.selectedRectID);
+  }
+  get selectedID() {
+    return this.selectedRectID;
+  }
+  get selectedText() {
+    var _a;
+    return (_a = this.selectedRect) == null ? void 0 : _a.textAttribute;
+  }
+  get dataList() {
+    return this.rectList;
+  }
+  get currentShowList() {
+    let rect = [];
+    const [showingRect, selectedRect] = CommonToolUtils.getRenderResultList(this.rectList, CommonToolUtils.getSourceID(this.basicResult), this.attributeLockList, this.selectedID);
+    rect = showingRect;
+    if (this.isHidden) {
+      rect = [];
+    }
+    if (selectedRect) {
+      rect.push(selectedRect);
+    }
+    return rect;
+  }
+  get currentPageResult() {
+    const [showingRect] = CommonToolUtils.getRenderResultList(this.rectList, CommonToolUtils.getSourceID(this.basicResult), []);
+    return showingRect;
+  }
+  getCurrentPageResult(rectList) {
+    const [showingRect] = CommonToolUtils.getRenderResultList(rectList, CommonToolUtils.getSourceID(this.basicResult), []);
+    return showingRect;
+  }
+  setSelectedID(newID) {
+    this.setSelectedRectID(newID);
+  }
+  setSelectedRectID(newID) {
+    var _a, _b;
+    const oldID = this.selectedRectID;
+    if (newID !== oldID && oldID) {
+      (_a = this._textAttributInstance) == null ? void 0 : _a.changeSelected();
+    }
+    if (!newID) {
+      (_b = this._textAttributInstance) == null ? void 0 : _b.clearTextAttribute();
+    }
+    this.selectedRectID = newID;
+    this.render();
+    this.emit("selectedChange");
+  }
+  setStyle(toolStyle) {
+    var _a;
+    super.setStyle(toolStyle);
+    if (this._textAttributInstance && this.config.attributeConfigurable === false) {
+      (_a = this._textAttributInstance) == null ? void 0 : _a.updateIcon(this.getTextIconSvg());
+    }
+  }
+  updateSelectedRectTextAttribute(newTextAttribute) {
+    if (this._textAttributInstance && newTextAttribute) {
+      let textAttribute = newTextAttribute;
+      if (AttributeUtils.textAttributeValidate(this.config.textCheckType, "", textAttribute) === false) {
+        this.emit("messageError", AttributeUtils.getErrorNotice(this.config.textCheckType, this.lang));
+        textAttribute = "";
+      }
+      this.setRectList(this.rectList.map((v) => {
+        if (v.id === this.selectedRectID) {
+          return __spreadProps(__spreadValues({}, v), {
+            textAttribute
+          });
+        }
+        return v;
+      }), true);
+      this.emit("updateTextAttribute");
+      this.render();
+    }
+  }
+  getHoverRectPointIndex(e) {
+    if (!this.selectedRect) {
+      return -1;
+    }
+    return AxisUtils.returnClosePointIndex(this.getCoordinateUnderZoom(e), RectUtils.getRectPointList(this.selectedRect, this.zoom), scope + 2);
+  }
+  getHoverRectEdgeIndex(e) {
+    if (!this.selectedRect) {
+      return -1;
+    }
+    let edgeIndex = -1;
+    const {selectedRect} = this;
+    const edgeList = RectUtils.getRectEdgeList(selectedRect, this.zoom);
+    const coordinate = this.getCoordinateUnderZoom(e);
+    for (let i = 0; i < edgeList.length; i++) {
+      const edge = edgeList[i];
+      const {length} = MathUtils.getFootOfPerpendicular(coordinate, edge.begin, edge.end);
+      if (length < scope + 10) {
+        edgeIndex = i;
+      }
+    }
+    return edgeIndex;
+  }
+  getTextIconSvg(attribute = "") {
+    return AttributeUtils.getTextIconSvg(attribute, this.config.attributeList, this.config.attributeConfigurable, this.baseIcon);
+  }
+  onMouseDown(e) {
+    if (super.onMouseDown(e) || this.forbidMouseOperation || e.ctrlKey === true) {
+      return;
+    }
+    const dragStartCoord = this.getCoordinateUnderZoom(e);
+    const hoverRectID = this.getHoverRectID(e);
+    const firstRect = this.currentShowList.find((v) => v.id === this.selectedRectID);
+    if (!firstRect || e.button === 2 || e.button === 0 && this.isSpaceKey === true) {
+      return;
+    }
+    if (this.selectedRectID) {
+      if (this.getHoverRectPointIndex(e) > -1) {
+        const dragTarget = EDragTarget.Point;
+        this.dragInfo = {
+          dragStartCoord,
+          dragTarget,
+          startTime: +new Date(),
+          firstRect
+        };
+        this.dragStatus = EDragStatus.Start;
+        return;
+      }
+      if (this.getHoverRectEdgeIndex(e) > -1) {
+        const dragTarget = EDragTarget.Line;
+        this.dragInfo = {
+          dragStartCoord,
+          dragTarget,
+          startTime: +new Date(),
+          firstRect
+        };
+        this.dragStatus = EDragStatus.Start;
+        return;
+      }
+    }
+    if (hoverRectID === this.selectedRectID && !this.drawingRect) {
+      const dragTarget = EDragTarget.Plane;
+      this.dragInfo = {
+        dragStartCoord,
+        dragTarget,
+        firstRect,
+        startTime: +new Date()
+      };
+      this.dragStatus = EDragStatus.Start;
+    }
+    return void 0;
+  }
+  onDragMove(coordinate) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!this.dragInfo) {
+      return;
+    }
+    this.dragStatus = EDragStatus.Move;
+    const dragRect = RectUtils.getRectUnderZoom(this.dragInfo.firstRect, this.zoom);
+    const {x, y, width, height} = dragRect;
+    const offset = {
+      x: coordinate.x - this.dragInfo.dragStartCoord.x,
+      y: coordinate.y - this.dragInfo.dragStartCoord.y
+    };
+    let selectedRect = this.rectList.filter((v) => v.id === this.selectedRectID)[0];
+    switch (this.dragInfo.dragTarget) {
+      case EDragTarget.Plane:
+        selectedRect = __spreadProps(__spreadValues({}, selectedRect), {
+          x: x + offset.x,
+          y: y + offset.y,
+          width,
+          height
+        });
+        break;
+      case EDragTarget.Point:
+        {
+          let newX = x;
+          let newY = y;
+          let newWidth = width;
+          let newHeight = height;
+          switch (this.hoverRectPointIndex) {
+            case 0: {
+              newX = width - offset.x < 0 ? x + width : x + offset.x;
+              newY = height - offset.y < 0 ? y + height : y + offset.y;
+              newWidth = Math.abs(offset.x - width);
+              newHeight = Math.abs(offset.y - height);
+              break;
+            }
+            case 1: {
+              newX = width + offset.x > 0 ? x : x + width + offset.x;
+              newY = height - offset.y < 0 ? y + height : y + offset.y;
+              newWidth = Math.abs(width + offset.x);
+              newHeight = Math.abs(height - offset.y);
+              break;
+            }
+            case 2: {
+              newX = width + offset.x > 0 ? x : x + width + offset.x;
+              newY = height + offset.y > 0 ? y : y + height + offset.y;
+              newWidth = Math.abs(width + offset.x);
+              newHeight = height + offset.y > 0 ? height + offset.y : Math.abs(height + offset.y);
+              break;
+            }
+            case 3: {
+              newX = width - offset.x < 0 ? x + width : x + offset.x;
+              newY = height + offset.y > 0 ? y : y + height + offset.y;
+              newWidth = Math.abs(offset.x - width);
+              newHeight = height + offset.y > 0 ? height + offset.y : Math.abs(height + offset.y);
+              break;
+            }
+            default: {
+              return;
+            }
+          }
+          selectedRect = __spreadProps(__spreadValues({}, selectedRect), {
+            x: newX,
+            y: newY,
+            width: newWidth,
+            height: newHeight
+          });
+        }
+        break;
+      case EDragTarget.Line: {
+        let newX = x;
+        let newY = y;
+        let newWidth = width;
+        let newHeight = height;
+        switch (this.hoverRectEdgeIndex) {
+          case 0: {
+            newY = height - offset.y < 0 ? y + height : y + offset.y;
+            newHeight = Math.abs(offset.y - height);
+            break;
+          }
+          case 1: {
+            newX = width + offset.x > 0 ? x : x + width + offset.x;
+            newWidth = Math.abs(width + offset.x);
+            break;
+          }
+          case 2: {
+            newY = height + offset.y > 0 ? y : y + height + offset.y;
+            newHeight = height + offset.y > 0 ? height + offset.y : Math.abs(height + offset.y);
+            break;
+          }
+          case 3: {
+            newX = width - offset.x < 0 ? x + width : x + offset.x;
+            newWidth = Math.abs(offset.x - width);
+            break;
+          }
+          default: {
+            return;
+          }
+        }
+        selectedRect = __spreadProps(__spreadValues({}, selectedRect), {
+          x: newX,
+          y: newY,
+          width: newWidth,
+          height: newHeight
+        });
+        break;
+      }
+      default: {
+        return;
+      }
+    }
+    if (this.config.drawOutsideTarget === false) {
+      if (this.basicResult) {
+        if (((_b = (_a = this.basicResult) == null ? void 0 : _a.pointList) == null ? void 0 : _b.length) > 0) {
+          if (RectUtils.isRectNotInPolygon(selectedRect, getPolygonPointUnderZoom(this.basicResult.pointList, this.zoom))) {
+            return;
+          }
+        }
+        const basicX = this.basicResult.x * this.zoom;
+        const basicY = this.basicResult.y * this.zoom;
+        const basicWidth = this.basicResult.width * this.zoom;
+        const basicHeight = this.basicResult.height * this.zoom;
+        if (this.dragInfo.dragTarget !== EDragTarget.Plane && (selectedRect.x < basicX - 0.01 || selectedRect.y < basicY - 0.01 || selectedRect.width > basicX + basicWidth - selectedRect.x + 0.01 || selectedRect.height > basicY + basicHeight - selectedRect.y + 0.01)) {
+          return;
+        }
+        if (selectedRect.x < basicX) {
+          selectedRect.x = basicX;
+        }
+        if (selectedRect.y < basicY) {
+          selectedRect.y = basicY;
+        }
+        if (selectedRect.width > basicX + basicWidth - selectedRect.x) {
+          switch (this.dragInfo.dragTarget) {
+            case EDragTarget.Plane:
+              selectedRect.x = basicX + basicWidth - width;
+              break;
+            case EDragTarget.Point:
+            case EDragTarget.Line:
+              if (offset.x > 0 && offset.y > 0) {
+                selectedRect.width = basicX + basicWidth - selectedRect.x;
+              }
+              break;
+            default: {
+              return;
+            }
+          }
+        }
+        if (selectedRect.height > basicY + basicHeight - selectedRect.y) {
+          switch (this.dragInfo.dragTarget) {
+            case EDragTarget.Plane:
+              selectedRect.y = basicY + basicHeight - height;
+              break;
+          }
+        }
+      } else {
+        if (selectedRect.x < 0) {
+          selectedRect.x = 0;
+        }
+        if (selectedRect.y < 0) {
+          selectedRect.y = 0;
+        }
+        if (this.imgInfo) {
+          switch (this.dragInfo.dragTarget) {
+            case EDragTarget.Plane:
+              if (selectedRect.x + selectedRect.width > ((_c = this.imgInfo) == null ? void 0 : _c.width)) {
+                selectedRect.x = this.imgInfo.width - width;
+              }
+              if (selectedRect.y + selectedRect.height > ((_d = this.imgInfo) == null ? void 0 : _d.height)) {
+                selectedRect.y = this.imgInfo.height - height;
+              }
+              break;
+            default: {
+              if (selectedRect.x + selectedRect.width > ((_e = this.imgInfo) == null ? void 0 : _e.width) + 0.01 || selectedRect.y + selectedRect.height > ((_f = this.imgInfo) == null ? void 0 : _f.height) + 0.01) {
+                return;
+              }
+            }
+          }
+        }
+      }
+    }
+    this.setRectList(this.rectList.map((v) => {
+      if (v.id === selectedRect.id) {
+        return RectUtils.getRectUnderZoom(selectedRect, 1 / this.zoom);
+      }
+      return v;
+    }));
+    this.render();
+  }
+  onMouseMove(e) {
+    var _a, _b;
+    if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return;
+    }
+    const coordinateZoom = this.getCoordinateUnderZoom(e);
+    const coordinate = AxisUtils.changeDrawOutsideTarget(coordinateZoom, {x: 0, y: 0}, this.imgInfo, this.config.drawOutsideTarget, this.basicResult, this.zoom);
+    if (this.selectedRectID && this.dragInfo) {
+      this.onDragMove(coordinate);
+      return;
+    }
+    if (this.selectedRectID) {
+      const hoverRectPointIndex = this.getHoverRectPointIndex(e);
+      if (hoverRectPointIndex !== this.hoverRectPointIndex) {
+        this.hoverRectPointIndex = hoverRectPointIndex;
+        this.hoverRectEdgeIndex = -1;
+        this.render();
+        return;
+      }
+      if (this.hoverRectPointIndex === -1) {
+        const hoverRectEdgeIndex = this.getHoverRectEdgeIndex(e);
+        if (hoverRectEdgeIndex !== this.hoverRectEdgeIndex) {
+          this.hoverRectEdgeIndex = hoverRectEdgeIndex;
+          this.render();
+          return;
+        }
+      }
+    }
+    const hoverRectID = this.getHoverRectID(e);
+    const oldHoverRectID = this.hoverRectID;
+    this.hoverRectID = hoverRectID;
+    if (hoverRectID !== oldHoverRectID) {
+      this.render();
+    }
+    if (this.drawingRect && this.firstClickCoord) {
+      let {x, y} = this.firstClickCoord;
+      let {width, height} = this.drawingRect;
+      width = Math.abs(x - coordinate.x);
+      height = Math.abs(y - coordinate.y);
+      if (coordinate.x < x) {
+        x = coordinate.x;
+      }
+      if (coordinate.y < y) {
+        y = coordinate.y;
+      }
+      if (this.config.drawOutsideTarget === false) {
+        if (((_b = (_a = this.basicResult) == null ? void 0 : _a.pointList) == null ? void 0 : _b.length) > 0) {
+          if (RectUtils.isRectNotInPolygon(__spreadProps(__spreadValues({}, this.drawingRect), {
+            x,
+            y,
+            width,
+            height
+          }), getPolygonPointUnderZoom(this.basicResult.pointList, this.zoom))) {
+            return;
+          }
+        }
+        if (coordinate.x < 0) {
+          width = Math.abs(this.firstClickCoord.x);
+          x = 0;
+        }
+        if (coordinate.y < 0) {
+          height = Math.abs(this.firstClickCoord.y);
+          y = 0;
+        }
+        if (this.imgInfo) {
+          if (x + width > this.imgInfo.width) {
+            width = Math.abs(this.imgInfo.width - x);
+          }
+          if (y + height > this.imgInfo.height) {
+            height = Math.abs(this.imgInfo.height - y);
+          }
+        }
+      }
+      this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+        x,
+        y,
+        width,
+        height
+      });
+      this.render();
+    }
+    return void 0;
+  }
+  setAttributeLockList(attributeLockList) {
+    this.setSelectedRectID(void 0);
+    super.setAttributeLockList(attributeLockList);
+  }
+  setBasicResult(basicResult) {
+    super.setBasicResult(basicResult);
+    this.clearActiveStatus();
+  }
+  setRectValidAndRender(id) {
+    if (!id) {
+      return;
+    }
+    this.setRectList(this.rectList.map((rect) => {
+      if (rect.id === id) {
+        return __spreadProps(__spreadValues({}, rect), {
+          valid: !rect.valid
+        });
+      }
+      return rect;
+    }), true);
+    this.render();
+    this.emit("updateResult");
+  }
+  createNewDrawingRect(e, basicSourceID) {
+    if (!this.imgInfo) {
+      return;
+    }
+    const coordinateZoom = this.getCoordinateUnderZoom(e);
+    const coordinate = AxisUtils.changeDrawOutsideTarget(coordinateZoom, {x: 0, y: 0}, this.imgInfo, this.config.drawOutsideTarget, this.basicResult, this.zoom);
+    this.setSelectedRectID("");
+    this.hoverRectID = "";
+    if (this.drawOutSideTarget) {
+      if (coordinate.x < 0) {
+        coordinate.x = 0;
+      }
+      if (coordinate.y < 0) {
+        coordinate.y = 0;
+      }
+    }
+    this.drawingRect = __spreadProps(__spreadValues({}, coordinate), {
+      width: 0,
+      height: 0,
+      attribute: this.defaultAttribute,
+      valid: !e.ctrlKey,
+      id: uuid(8, 62),
+      sourceID: basicSourceID,
+      textAttribute: ""
+    });
+    if (this.hasMarkerConfig) {
+      const nextMarkInfo = CommonToolUtils.getNextMarker(this.currentPageResult, this.config.markerList, this.markerIndex);
+      if (nextMarkInfo) {
+        if (this.drawingRect) {
+          this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+            label: nextMarkInfo.label
+          });
+        }
+        this.markerIndex = nextMarkInfo.index;
+        this.emit("markIndexChange");
+      } else {
+        this.emit("messageInfo", Locale.getMessagesByLocale(EMessage.MarkerFinish, this.lang));
+        this.drawingRect = void 0;
+        return;
+      }
+    }
+    if (this.config.textConfigurable) {
+      let textAttribute = "";
+      textAttribute = AttributeUtils.getTextAttribute(this.rectList.filter((rect) => CommonToolUtils.isSameSourceID(rect.sourceID, basicSourceID)), this.config.textCheckType);
+      if (this.drawingRect) {
+        this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+          textAttribute
+        });
+      }
+    }
+    Object.assign(this.drawingRect, {
+      order: CommonToolUtils.getMaxOrder(this.rectList.filter((v) => CommonToolUtils.isSameSourceID(v.sourceID, basicSourceID))) + 1
+    });
+    this.firstClickCoord = __spreadValues({}, coordinate);
+    this.firstCurrentPos = __spreadValues({}, this.currentPos);
+    if (this.dataInjectionAtCreation) {
+      const data = this.dataInjectionAtCreation(this.drawingRect);
+      if (data) {
+        Object.assign(this.drawingRect, data);
+      }
+    }
+  }
+  addDrawingRectToRectList() {
+    if (!this.drawingRect) {
+      return;
+    }
+    let {width, height} = this.drawingRect;
+    width /= this.zoom;
+    height /= this.zoom;
+    if (Math.round(width) < this.config.minWidth || Math.round(height) < this.config.minHeight) {
+      this.emit("messageInfo", Locale.getMessagesByLocale(EMessage.RectErrorSizeNotice, this.lang));
+      this.drawingRect = void 0;
+      this.firstClickCoord = void 0;
+      this.dragInfo = void 0;
+      this.dragStatus = EDragStatus.Wait;
+      this.render();
+      return;
+    }
+    const newRectList = this.getDrawingRectWithRectList();
+    this.setRectList(newRectList, true);
+    this.history.pushHistory(this.rectList);
+    this.setSelectedIdAfterAddingDrawingRect();
+    this.firstClickCoord = void 0;
+    this.drawingRect = void 0;
+    this.dragInfo = void 0;
+    this.dragStatus = EDragStatus.Wait;
+  }
+  setSelectedIdAfterAddingDrawingRect() {
+    if (!this.drawingRect) {
+      return;
+    }
+    if (this.config.textConfigurable) {
+      this.setSelectedRectID(this.drawingRect.id);
+    } else {
+      this.setSelectedRectID();
+    }
+  }
+  getDrawingRectWithRectList() {
+    if (!this.drawingRect) {
+      return this.rectList;
+    }
+    let {x, y, width, height} = this.drawingRect;
+    x /= this.zoom;
+    y /= this.zoom;
+    width /= this.zoom;
+    height /= this.zoom;
+    return [
+      ...this.rectList,
+      __spreadProps(__spreadValues({}, this.drawingRect), {
+        x,
+        y,
+        width,
+        height
+      })
+    ];
+  }
+  rightMouseUp(e) {
+    const hoverRectID = this.getHoverRectID(e);
+    const hoverRect = this.rectList.find((v) => v.id === hoverRectID);
+    const {selectedRectID} = this;
+    this.setSelectedRectID(void 0);
+    if (hoverRect) {
+      this.setDefaultAttribute(hoverRect.attribute);
+    }
+    if (this.drawingRect) {
+      this.drawingRect = void 0;
+      this.firstClickCoord = void 0;
+    } else {
+      if (selectedRectID !== hoverRectID) {
+        this.dblClickListener.clearRightDblClick();
+      }
+      this.setSelectedRectID(hoverRectID);
+      this.hoverRectID = "";
+      if ((hoverRect == null ? void 0 : hoverRect.label) && this.hasMarkerConfig) {
+        const markerIndex = CommonToolUtils.getCurrentMarkerIndex(hoverRect.label, this.config.markerList);
+        if (markerIndex >= 0) {
+          this.setMarkerIndex(markerIndex);
+          this.emit("markIndexChange");
+        }
+      }
+    }
+    this.render();
+  }
+  shiftRightMouseUp(e) {
+    const hoverRectID = this.getHoverRectID(e);
+    this.emit("shiftRightMouseUp", hoverRectID);
+  }
+  onMouseUp(e) {
+    if (super.onMouseUp(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return true;
+    }
+    if (this.dragInfo && this.dragStatus === EDragStatus.Move) {
+      this.dragInfo = void 0;
+      this.dragStatus = EDragStatus.Wait;
+      this.history.pushHistory(this.rectList);
+      this.emit("updateResult");
+      return;
+    }
+    if (e.button === 2 && e.shiftKey === true) {
+      this.shiftRightMouseUp(e);
+      return;
+    }
+    if (e.button === 2) {
+      this.rightMouseUp(e);
+      return;
+    }
+    const basicSourceID = CommonToolUtils.getSourceID(this.basicResult);
+    if (this.drawingRect) {
+      this.addDrawingRectToRectList();
+      return;
+    }
+    if (e.ctrlKey === true && e.button === 0 && this.hoverRectID) {
+      this.setRectValidAndRender(this.hoverRectID);
+      return;
+    }
+    this.createNewDrawingRect(e, basicSourceID);
+    this.render();
+    return void 0;
+  }
+  onRightDblClick(e) {
+    super.onRightDblClick(e);
+    const hoverRectID = this.getHoverRectID(e);
+    if (this.selectedRectID && this.selectedRectID === hoverRectID) {
+      this.deleteRect(hoverRectID);
+    }
+  }
+  onKeyDown(e) {
+    if (!CommonToolUtils.hotkeyFilter(e)) {
+      return;
+    }
+    if (super.onKeyDown(e) === false) {
+      return;
+    }
+    const {keyCode} = e;
+    switch (keyCode) {
+      case EKeyCode.Ctrl:
+        if (this.drawingRect) {
+          this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+            valid: !e.ctrlKey
+          });
+          this.render();
+        }
+        break;
+      case EKeyCode.F:
+        if (this.selectedRectID) {
+          this.setRectValidAndRender(this.selectedRectID);
+        }
+        break;
+      case EKeyCode.Z:
+        this.setIsHidden(!this.isHidden);
+        this.render();
+        break;
+      case EKeyCode.Delete:
+        this.deleteRect(this.selectedRectID);
+        break;
+      case EKeyCode.Tab: {
+        e.preventDefault();
+        if (this.drawingRect) {
+          return;
+        }
+        let sort = ESortDirection.ascend;
+        if (e.shiftKey) {
+          sort = ESortDirection.descend;
+        }
+        const [showingRect, selectedRect] = CommonToolUtils.getRenderResultList(this.rectList, CommonToolUtils.getSourceID(this.basicResult), this.attributeLockList, this.selectedRectID);
+        let rectList = [...showingRect];
+        if (selectedRect) {
+          rectList = [...rectList, selectedRect];
+        }
+        const viewPort = CanvasUtils.getViewPort(this.canvas, this.currentPos, this.zoom);
+        rectList = rectList.filter((rect) => CanvasUtils.inViewPort({x: rect.x, y: rect.y}, viewPort));
+        const nextSelectedRect = CommonToolUtils.getNextSelectedRectID(rectList, sort, this.selectedRectID);
+        if (nextSelectedRect) {
+          this.setSelectedRectID(nextSelectedRect.id);
+          if (this.config.attributeConfigurable === true) {
+            this.setDefaultAttribute(nextSelectedRect.attribute);
+          }
+        }
+        break;
+      }
+      default: {
+        if (this.config.attributeConfigurable) {
+          const keyCode2Attribute = AttributeUtils.getAttributeByKeycode(keyCode, this.config.attributeList);
+          if (keyCode2Attribute !== void 0) {
+            this.setDefaultAttribute(keyCode2Attribute);
+          }
+        }
+        break;
+      }
+    }
+    return true;
+  }
+  onKeyUp(e) {
+    super.onKeyUp(e);
+    switch (e.keyCode) {
+      case EKeyCode.Ctrl:
+        if (this.drawingRect) {
+          this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+            valid: true
+          });
+          this.render();
+        }
+        break;
+    }
+  }
+  onWheel(e) {
+    const oldZoom = this.zoom;
+    let newDrawingRect;
+    let newFirsClickCoord;
+    if (this.drawingRect && this.firstClickCoord) {
+      newDrawingRect = RectUtils.getRectUnderZoom(this.drawingRect, 1 / oldZoom);
+      newFirsClickCoord = AxisUtils.changePointByZoom(this.firstClickCoord, 1 / oldZoom);
+    }
+    super.onWheel(e, false);
+    if (newDrawingRect && newFirsClickCoord) {
+      this.drawingRect = RectUtils.getRectUnderZoom(newDrawingRect, this.zoom);
+      this.firstClickCoord = AxisUtils.changePointByZoom(newFirsClickCoord, this.zoom);
+    }
+    this.render();
+  }
+  getCurrentSelectedData() {
+    const {selectedRect} = this;
+    if (!selectedRect) {
+      return;
+    }
+    const toolColor = this.getColor(selectedRect.attribute);
+    const color = selectedRect.valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    return {
+      width: selectedRect.width * this.zoom * 0.6,
+      textAttribute: selectedRect.textAttribute,
+      color
+    };
+  }
+  getRenderStyle(rect) {
+    const customStyle = this.customRenderStyle && this.customRenderStyle(rect);
+    if (customStyle) {
+      return customStyle;
+    }
+    const toolColor = this.getColor(rect.attribute);
+    let strokeColor;
+    let fillColor;
+    if (rect.valid === false) {
+      strokeColor = toolColor == null ? void 0 : toolColor.invalid.stroke;
+      fillColor = toolColor == null ? void 0 : toolColor.invalid.fill;
+    } else {
+      strokeColor = toolColor == null ? void 0 : toolColor.valid.stroke;
+      fillColor = toolColor == null ? void 0 : toolColor.valid.fill;
+    }
+    return {
+      strokeColor,
+      fillColor,
+      textColor: strokeColor,
+      toolColor
+    };
+  }
+  renderTextAttribute() {
+    var _a;
+    const {selectedRect} = this;
+    if (!this.ctx || this.config.textConfigurable !== true || !selectedRect) {
+      return;
+    }
+    const {x, y, width, height, attribute, valid} = selectedRect;
+    const newWidth = width * this.zoom * 0.6;
+    const coordinate = AxisUtils.getOffsetCoordinate({x, y: y + height}, 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;
+    const distance = 4;
+    if (!this._textAttributInstance) {
+      this._textAttributInstance = new TextAttributeClass({
+        width: newWidth,
+        container: this.container,
+        icon: this.getTextIconSvg(attribute),
+        color,
+        getCurrentSelectedData: this.getCurrentSelectedData,
+        updateSelectedTextAttribute: this.updateSelectedRectTextAttribute
+      });
+    }
+    if (this._textAttributInstance && !((_a = this._textAttributInstance) == null ? void 0 : _a.isExit)) {
+      this._textAttributInstance.appendToContainer();
+    }
+    this._textAttributInstance.update(`${selectedRect.textAttribute}`, {
+      left: coordinate.x,
+      top: coordinate.y + distance,
+      color,
+      width: newWidth
+    });
+  }
+  renderSelectedRect(rect) {
+    const {selectedRect} = this;
+    if (!this.ctx || !rect || !selectedRect) {
+      return;
+    }
+    const {ctx} = this;
+    let radius = 10;
+    const pointList = RectUtils.getRectPointList(selectedRect);
+    const len = pointList.length;
+    const toolColor = this.getColor(rect.attribute);
+    pointList.forEach((v, i) => {
+      var _a, _b;
+      ctx.save();
+      ctx.moveTo(v.x, v.y);
+      ctx.beginPath();
+      if (this.hoverRectPointIndex === i) {
+        radius = scope + 6;
+      } else {
+        radius = scope;
+      }
+      if (rect.valid === false) {
+        ctx.strokeStyle = toolColor == null ? void 0 : toolColor.invalid.stroke;
+        ctx.fillStyle = toolColor == null ? void 0 : toolColor.invalid.stroke;
+      } else {
+        ctx.strokeStyle = toolColor == null ? void 0 : toolColor.valid.stroke;
+        ctx.fillStyle = toolColor == null ? void 0 : toolColor.valid.stroke;
+      }
+      ctx.arc(v.x * this.zoom + this.currentPos.x, v.y * this.zoom + this.currentPos.y, radius, 0, 2 * Math.PI);
+      ctx.fill();
+      if (this.hoverRectEdgeIndex === i) {
+        ctx.beginPath();
+        ctx.lineWidth = 10;
+        const lineColor = this.getColor(rect.attribute);
+        const strokeStyle = rect.valid === false ? (_a = lineColor == null ? void 0 : lineColor.invalid) == null ? void 0 : _a.stroke : (_b = lineColor == null ? void 0 : lineColor.valid) == null ? void 0 : _b.stroke;
+        ctx.strokeStyle = strokeStyle;
+        ctx.moveTo(pointList[i].x * this.zoom + this.currentPos.x, pointList[i].y * this.zoom + this.currentPos.y);
+        ctx.lineTo(pointList[(i + 1) % len].x * this.zoom + this.currentPos.x, pointList[(i + 1) % len].y * this.zoom + this.currentPos.y);
+        ctx.stroke();
+      }
+      ctx.restore();
+    });
+    this.renderTextAttribute();
+  }
+  renderDrawingRect(rect, zoom = this.zoom, isZoom = false) {
+    var _a, _b, _c, _d;
+    if (this.ctx && rect) {
+      const {ctx, style} = this;
+      const {hiddenText = false} = style;
+      ctx.save();
+      const {strokeColor, fillColor, textColor} = this.getRenderStyle(rect);
+      ctx.font = "lighter 14px Arial";
+      let showText = "";
+      if (((_a = this.config) == null ? void 0 : _a.isShowOrder) && rect.order && (rect == null ? void 0 : rect.order) > 0) {
+        showText = `${rect.order}`;
+      }
+      if (rect.label && this.hasMarkerConfig) {
+        const order = CommonToolUtils.getCurrentMarkerIndex(rect.label, this.config.markerList) + 1;
+        showText = `${order}_${MarkerUtils.getMarkerShowText(rect.label, this.config.markerList)}`;
+      }
+      if (rect.attribute) {
+        showText = `${showText}  ${AttributeUtils.getAttributeShowText(rect.attribute, (_b = this.config) == null ? void 0 : _b.attributeList)}`;
+      }
+      const transformRect = AxisUtils.changeRectByZoom(rect, isZoom ? zoom : this.zoom, this.currentPos);
+      if (!hiddenText) {
+        DrawUtils.drawText(this.canvas, {x: transformRect.x, y: transformRect.y - 6}, showText, __spreadProps(__spreadValues({
+          color: strokeColor,
+          font: "normal normal 900 14px SourceHanSansCN-Regular"
+        }, DEFAULT_TEXT_SHADOW), {
+          textMaxWidth: 300
+        }));
+      }
+      const lineWidth = (_d = (_c = this.style) == null ? void 0 : _c.width) != null ? _d : 2;
+      if (rect.id === this.hoverRectID || rect.id === this.selectedRectID) {
+        DrawUtils.drawRectWithFill(this.canvas, transformRect, {color: fillColor});
+      }
+      DrawUtils.drawRect(this.canvas, transformRect, {color: strokeColor, thickness: lineWidth, hiddenText: true});
+      ctx.restore();
+      let rectSize = `${Math.round(rect.width)} * ${Math.round(rect.height)}`;
+      if (isZoom === true) {
+        rectSize = `${Math.round(rect.width / this.zoom)} * ${Math.round(transformRect.height / this.zoom)}`;
+      }
+      const textSizeWidth = rectSize.length * 7;
+      if (!hiddenText) {
+        DrawUtils.drawText(this.canvas, {x: transformRect.x + transformRect.width - textSizeWidth, y: transformRect.y + transformRect.height + 15}, rectSize, __spreadValues({
+          color: textColor,
+          font: "normal normal 600 14px Arial"
+        }, DEFAULT_TEXT_SHADOW));
+      }
+      if (!hiddenText && rect.textAttribute && rect.id !== this.selectedRectID) {
+        const marginTop = 0;
+        const textWidth = Math.max(20, transformRect.width - textSizeWidth);
+        DrawUtils.drawText(this.canvas, {x: transformRect.x, y: transformRect.y + transformRect.height + 20 + marginTop}, rect.textAttribute, __spreadValues({
+          color: textColor,
+          font: "italic normal 900 14px Arial",
+          textMaxWidth: textWidth
+        }, DEFAULT_TEXT_SHADOW));
+      }
+    }
+  }
+  renderStaticRect() {
+    var _a;
+    if (!(((_a = this.rectList) == null ? void 0 : _a.length) > 0 && JSON.stringify(this.rectList))) {
+      return;
+    }
+    const {renderEnhance = {}} = this;
+    const [showingRect, selectedRect] = CommonToolUtils.getRenderResultList(this.rectList, CommonToolUtils.getSourceID(this.basicResult), this.attributeLockList, this.selectedRectID);
+    if (!this.isHidden) {
+      showingRect == null ? void 0 : showingRect.forEach((rect) => {
+        this.renderDrawingRect(rect);
+        if (renderEnhance.staticRender) {
+          renderEnhance.staticRender(this.canvas, AxisUtils.changeRectByZoom(rect, this.zoom, this.currentPos), this.getRenderStyle(rect));
+        }
+      });
+    }
+    if (selectedRect) {
+      this.renderDrawingRect(selectedRect);
+      this.renderSelectedRect(selectedRect);
+      if (renderEnhance.selectedRender) {
+        renderEnhance.selectedRender(this.canvas, AxisUtils.changeRectByZoom(selectedRect, this.zoom, this.currentPos), this.getRenderStyle(selectedRect));
+      }
+    }
+  }
+  renderCreatingRect() {
+    if (!this.drawingRect) {
+      return;
+    }
+    const {renderEnhance = {}} = this;
+    this.renderDrawingRect(this.drawingRect, 1, true);
+    if (renderEnhance.creatingRender) {
+      renderEnhance.creatingRender(this.canvas, AxisUtils.changeRectByZoom(this.drawingRect, 1, this.currentPos), this.getRenderStyle(this.drawingRect));
+    }
+  }
+  renderRect() {
+    this.renderStaticRect();
+    this.renderCreatingRect();
+  }
+  render() {
+    if (!this.ctx) {
+      return;
+    }
+    super.render();
+    this.renderRect();
+    this.renderCursorLine(this.getLineColor(this.defaultAttribute));
+  }
+  setDefaultAttribute(defaultAttribute) {
+    const oldDefault = this.defaultAttribute;
+    this.defaultAttribute = defaultAttribute != null ? defaultAttribute : "";
+    if (oldDefault !== defaultAttribute) {
+      this.changeStyle(defaultAttribute);
+      this.emit("changeAttributeSidebar");
+      const {selectedRect} = this;
+      if (selectedRect) {
+        this.setRectList(this.rectList.map((v) => {
+          if (v.id === this.selectedID) {
+            return __spreadProps(__spreadValues({}, v), {
+              attribute: this.defaultAttribute
+            });
+          }
+          return v;
+        }), true);
+        this.history.pushHistory(this.rectList);
+        this.render();
+      }
+      if (this.drawingRect) {
+        this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+          attribute: this.defaultAttribute
+        });
+        this.render();
+      }
+      if (this._textAttributInstance) {
+        if (this.attributeLockList.length > 0 && !this.attributeLockList.includes(this.defaultAttribute)) {
+          this._textAttributInstance.clearTextAttribute();
+          return;
+        }
+        this._textAttributInstance.updateIcon(this.getTextIconSvg(defaultAttribute));
+      }
+    }
+  }
+  setValid(valid) {
+    super.setValid(valid);
+    this.emit("updateResult");
+  }
+  clearActiveStatus() {
+    this.drawingRect = void 0;
+    this.firstClickCoord = void 0;
+    this.dragInfo = void 0;
+    this.dragStatus = EDragStatus.Wait;
+    this.setSelectedRectID(void 0);
+  }
+  clearResult(sendMessage = true) {
+    const newRectList = this.rectList.filter((rect) => rect.disableDelete === true);
+    if (newRectList.length > 0 && sendMessage) {
+      this.emit("messageInfo", Locale.getMessagesByLocale(EMessage.ClearPartialData, this.lang));
+    }
+    this.setRectList(newRectList, true);
+    this.setSelectedRectID(void 0);
+  }
+  deleteRect(rectID) {
+    var _a;
+    if (!rectID) {
+      return;
+    }
+    const selectedRect = this.rectList.find((v) => v.id === rectID);
+    if ((selectedRect == null ? void 0 : selectedRect.disableDelete) === true) {
+      this.emit("messageInfo", Locale.getMessagesByLocale(EMessage.DisableDelete, this.lang));
+      return;
+    }
+    this.setRectList(this.rectList.filter((v) => v.id !== rectID), true);
+    this.history.pushHistory(this.rectList);
+    this.setSelectedRectID(void 0);
+    (_a = this._textAttributInstance) == null ? void 0 : _a.clearTextAttribute();
+    this.render();
+  }
+  exportData() {
+    const {rectList} = this;
+    return [rectList, this.basicImgInfo];
+  }
+  undo() {
+    const rectList = this.history.undo();
+    if (rectList) {
+      if (rectList.length !== this.rectList.length) {
+        this.setSelectedRectID("");
+      }
+      this.setRectList(rectList, true);
+      this.render();
+    }
+  }
+  redo() {
+    const rectList = this.history.redo();
+    if (rectList) {
+      if (rectList.length !== this.rectList.length) {
+        this.setSelectedRectID("");
+      }
+      this.setRectList(rectList, true);
+      this.render();
+    }
+  }
+}
+
+export { RectOperation, RectOperation as default };