@labelbee/lb-annotation 1.14.0-alpha.2 → 1.14.0-alpha.3

package/dist/core/toolOperation/segmentByRect.js

@@ -1 +1,174 @@
-"use strict";var lbUtils=require("@labelbee/lb-utils"),AxisUtils=require("../../utils/tool/AxisUtils.js"),rectOperation=require("./rectOperation.js"),keyCode=require("../../constant/keyCode.js"),__async=(u,e,t)=>new Promise((i,c)=>{var r=s=>{try{o(t.next(s))}catch(h){c(h)}},n=s=>{try{o(t.throw(s))}catch(h){c(h)}},o=s=>s.done?i(s.value):Promise.resolve(s.value).then(r,n);o((t=t.apply(u,e)).next())});class SegmentByRect extends rectOperation.RectOperation{constructor(e){super(e);this.onKeydown=t=>{switch(t.keyCode){case keyCode.Esc:t.preventDefault(),t.stopPropagation(),this.clearPredictionInfo();break;case keyCode.Z:t.ctrlKey&&(t.preventDefault(),t.stopPropagation(),this.rectList=[],this.render());break}},this.segmentPrediction=t=>__async(this,null,function*(){const i=this.getCoordinateUnderZoom(t);if(this.isRunSegment=!0,this.render(),!this.runPrediction){this.emit("messageError","You needs to set runPrediction function"),this.clearPredictionInfo();return}yield this.runPrediction({point:i,rect:{x:this.rectList[0].x,y:this.rectList[0].y,w:this.rectList[0].width,h:this.rectList[0].height}}),this.clearPredictionInfo()}),this.isRunSegment=!1,this.runPrediction=e.runPrediction}setRunPrediction(e){this.runPrediction=e}eventBinding(){document.addEventListener("keydown",e=>this.onKeydown(e)),super.eventBinding()}clearPredictionInfo(){this.rectList=[],this.isShowCursor=!1,this.coord={x:-1,y:-1},this.drawingRect=void 0,this.isRunSegment=!1,this.clearCanvas(),this.render()}onMouseUp(e){if(!this.isRunSegment){if(e.button===0&&this.rectList.length===1&&!this.isRunSegment){e.stopPropagation(),this.segmentPrediction(e),this.clearActiveStatus();return}super.onMouseUp(e)}}onMouseDown(e){this.isRunSegment||super.onMouseDown(e)}renderCursorLine(){var e;if(!this.ctx)return;const{ctx:t}=this,i=10,c=1,{x:r,y:n}=this.coord;t.save(),t.strokeStyle="white",t.setLineDash([6]),t.lineWidth=c,t.strokeRect(r-i,n-i,i*2,i*2),t.restore();let o=`\u2460 ${lbUtils.i18n.t("FramingOfObjectToBeDivided")}`;const s=lbUtils.i18n.language==="en";let h=s?326:186;if(((e=this.rectList)==null?void 0:e.length)===1){o=`\u2461 ${lbUtils.i18n.t("ClickOnTarget")}`,h=s?232:142;const a=2;t.save(),t.strokeStyle="white";const l=c+i;t.beginPath(),t.moveTo(r+l+a*2,n+l+a),t.arc(r+l+a,n+l+a,a,0,Math.PI*2,!0),t.stroke(),t.restore()}this.isRunSegment&&(h=s?316:136,o=lbUtils.i18n.t("SplittingAlgorithmPrediction")),t.save(),t.fillStyle=this.style.strokeColor,t.fillRect(r+i,n-i*4-1,h,32),t.restore(),t.save(),t.font="14px Source Han Sans CN",t.fillStyle="white",t.fillText(o,r+i+14,n-i*2),t.restore(),super.renderCursorLine()}renderDrawingRect(e,t,i=!1){if(this.ctx&&e){const c=AxisUtils.default.changeRectByZoom(e,i?t:this.zoom,this.currentPos),{x:r,y:n,width:o,height:s}=c;this.ctx.save(),this.ctx.lineCap="butt",this.ctx.lineWidth=this.style.strokeWidth,this.ctx.strokeStyle="white",this.ctx.strokeRect(r,n,o,s),this.ctx.strokeStyle=this.style.strokeColor,this.ctx.setLineDash([6]),this.ctx.strokeRect(r,n,o,s),this.ctx.restore()}}renderTextAttribute(){}renderSelectedRect(){}}module.exports=SegmentByRect;
+'use strict';
+
+var lbUtils = require('@labelbee/lb-utils');
+var AxisUtils = require('../../utils/tool/AxisUtils.js');
+var rectOperation = require('./rectOperation.js');
+var keyCode = require('../../constant/keyCode.js');
+
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+class SegmentByRect extends rectOperation.RectOperation {
+  constructor(props) {
+    super(props);
+    this.onKeydown = (e) => {
+      switch (e.keyCode) {
+        case keyCode.Esc:
+          e.preventDefault();
+          e.stopPropagation();
+          this.clearPredictionInfo();
+          break;
+        case keyCode.Z:
+          if (e.ctrlKey) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.rectList = [];
+            this.render();
+          }
+          break;
+      }
+    };
+    this.segmentPrediction = (e) => __async(this, null, function* () {
+      const coord = this.getCoordinateUnderZoom(e);
+      this.isRunSegment = true;
+      this.render();
+      if (!this.runPrediction) {
+        this.emit("messageError", "You needs to set runPrediction function");
+        this.clearPredictionInfo();
+        return;
+      }
+      yield this.runPrediction({
+        point: coord,
+        rect: {
+          x: this.rectList[0].x,
+          y: this.rectList[0].y,
+          w: this.rectList[0].width,
+          h: this.rectList[0].height
+        }
+      });
+      this.clearPredictionInfo();
+    });
+    this.isRunSegment = false;
+    this.runPrediction = props.runPrediction;
+  }
+  setRunPrediction(runPrediction) {
+    this.runPrediction = runPrediction;
+  }
+  eventBinding() {
+    document.addEventListener("keydown", (e) => this.onKeydown(e));
+    super.eventBinding();
+  }
+  clearPredictionInfo() {
+    this.rectList = [];
+    this.isShowCursor = false;
+    this.coord = {x: -1, y: -1};
+    this.drawingRect = void 0;
+    this.isRunSegment = false;
+    this.clearCanvas();
+    this.render();
+  }
+  onMouseUp(e) {
+    if (this.isRunSegment) {
+      return;
+    }
+    if (e.button === 0 && this.rectList.length === 1 && !this.isRunSegment) {
+      e.stopPropagation();
+      this.segmentPrediction(e);
+      this.clearActiveStatus();
+      return;
+    }
+    super.onMouseUp(e);
+    return void 0;
+  }
+  onMouseDown(e) {
+    if (this.isRunSegment) {
+      return;
+    }
+    super.onMouseDown(e);
+    return void 0;
+  }
+  renderCursorLine() {
+    var _a;
+    if (!this.ctx) {
+      return;
+    }
+    const {ctx} = this;
+    const padding = 10;
+    const lineWidth = 1;
+    const {x, y} = this.coord;
+    ctx.save();
+    ctx.strokeStyle = "white";
+    ctx.setLineDash([6]);
+    ctx.lineWidth = lineWidth;
+    ctx.strokeRect(x - padding, y - padding, padding * 2, padding * 2);
+    ctx.restore();
+    let text = `\u2460 ${lbUtils.i18n.t("FramingOfObjectToBeDivided")}`;
+    const isEn = lbUtils.i18n.language === "en";
+    let rectWidth = isEn ? 326 : 186;
+    if (((_a = this.rectList) == null ? void 0 : _a.length) === 1) {
+      text = `\u2461 ${lbUtils.i18n.t("ClickOnTarget")}`;
+      rectWidth = isEn ? 232 : 142;
+      const radius = 2;
+      ctx.save();
+      ctx.strokeStyle = "white";
+      const margin = lineWidth + padding;
+      ctx.beginPath();
+      ctx.moveTo(x + margin + radius * 2, y + margin + radius);
+      ctx.arc(x + margin + radius, y + margin + radius, radius, 0, Math.PI * 2, true);
+      ctx.stroke();
+      ctx.restore();
+    }
+    if (this.isRunSegment) {
+      rectWidth = isEn ? 316 : 136;
+      text = lbUtils.i18n.t("SplittingAlgorithmPrediction");
+    }
+    ctx.save();
+    ctx.fillStyle = this.style.strokeColor;
+    ctx.fillRect(x + padding, y - padding * 4 - 1, rectWidth, 32);
+    ctx.restore();
+    ctx.save();
+    ctx.font = "14px Source Han Sans CN";
+    ctx.fillStyle = "white";
+    ctx.fillText(text, x + padding + 14, y - padding * 2);
+    ctx.restore();
+    super.renderCursorLine();
+  }
+  renderDrawingRect(rect, zoom, isZoom = false) {
+    if (this.ctx && rect) {
+      const transformRect = AxisUtils["default"].changeRectByZoom(rect, isZoom ? zoom : this.zoom, this.currentPos);
+      const {x, y, width, height} = transformRect;
+      this.ctx.save();
+      this.ctx.lineCap = "butt";
+      this.ctx.lineWidth = this.style.strokeWidth;
+      this.ctx.strokeStyle = "white";
+      this.ctx.strokeRect(x, y, width, height);
+      this.ctx.strokeStyle = this.style.strokeColor;
+      this.ctx.setLineDash([6]);
+      this.ctx.strokeRect(x, y, width, height);
+      this.ctx.restore();
+    }
+  }
+  renderTextAttribute() {
+  }
+  renderSelectedRect() {
+  }
+}
+
+module.exports = SegmentByRect;

package/dist/core/toolOperation/tagOperation.js

@@ -1,5 +1,186 @@
-"use strict";var CommonToolUtils=require("../../utils/tool/CommonToolUtils.js"),TagUtils=require("../../utils/tool/TagUtils.js"),uuid=require("../../utils/uuid.js"),basicToolOperation=require("./basicToolOperation.js");class TagOperation extends basicToolOperation.BasicToolOperation{constructor(t){super(t);this.getInitResultList=(e,s)=>!(e===0||e===void 0)&&s.length===0?[]:TagUtils.getDefaultTagResult(this.config.inputList,s),this.setLabel=(e,s)=>{var i,c;if(this.isImgError||!this.basicResult&&this.dependToolName)return;const l=this.config.inputList;if(!l[e])return;const{subSelected:n}=l[e];if(e<l.length&&l[e].subSelected&&n&&s<n.length){const h=l[e].value;let r=(i=n[s])==null?void 0:i.value;const d=(c=l[e])==null?void 0:c.isMulti,u=this.tagResult.filter(g=>{const o=`${g.sourceID}`;return CommonToolUtils.isSameSourceID(o,this.sourceID)})[0];if(u){let g=0;const{result:o}=u;u.sourceID===0&&(u.sourceID="0");for(const f in u.result)if(f===l[e].value){if(g++,d===!0){const a=o[f].split(";").filter(p=>p!==""),b=a.indexOf(r);b===-1?a.push(r):a.splice(b,1),r=a.join(";")}r===""?Object.keys(o).length===1?this.tagResult=this.tagResult.filter(a=>{const b=`${a.sourceID}`;return CommonToolUtils.isDifferSourceID(b,this.sourceID)}):Object.keys(o).length>1&&delete o[f]:o[f]=r}g===0&&Object.assign(u.result,{[h]:r})}else this.tagResult=[{sourceID:this.sourceID,id:uuid(8,62),result:{[h]:r}}];this.render()}},this.clearResult=(e=!0,s)=>{s?this.tagResult=this.tagResult.map(i=>((i==null?void 0:i.result[s])&&delete i.result[s],i)):this.tagResult=[],this.render()},this.config=CommonToolUtils.jsonParser(t.config),this.tagResult=[],this.labelSelectedList=[],this.setShowDefaultCursor(!0)}destroy(){this.clearTag(),super.destroy()}setResult(t){this.tagResult=t,this.render()}get currentPageResult(){return[this.currentTagResult]}get currentTagResult(){var t;return(t=this.tagResult.filter(e=>{const s=`${e.sourceID}`;return CommonToolUtils.isSameSourceID(s,this.sourceID)})[0])!=null?t:{}}get sourceID(){return CommonToolUtils.getSourceID(this.basicResult)}onKeyDown(t){if(!CommonToolUtils.hotkeyFilter(t)||super.onKeyDown(t)===!1)return;let{keyCode:e}=t;if(e&&(e<=57&&e>=49||e<=105&&e>=97)){if(e>57?e-=97:e-=49,this.config.inputList.length===1){this.labelSelectedList=[0,e],this.setLabel(0,e),setTimeout(()=>{this.labelSelectedList=[],this.render()},500);return}this.labelSelectedList.length===1?(this.labelSelectedList=[this.labelSelectedList[0],e],this.setLabel(this.labelSelectedList[0],e),setTimeout(()=>{this.labelSelectedList=[],this.render()},500)):(this.labelSelectedList=[e],this.emit("expend"))}}clearTag(){var t;const e=(t=this.canvas)==null?void 0:t.parentNode,s=window.self.document.getElementById("tagToolTag");s&&e&&e.contains(s)&&(e==null||e.removeChild(s))}renderTag(){var t,e,s,i,c,l;if(this.clearTag(),!(((t=this.tagResult)==null?void 0:t.length)>0))return;const n=document.createElement("div"),h=TagUtils.getTagNameList((s=(e=this.currentTagResult)==null?void 0:e.result)!=null?s:{},this.config.inputList);n.innerHTML=(i=h.reduce((r,d)=>`${r}${d.keyName}: ${d.value.join(" \u3001 ")}
-`,""))!=null?i:"",n.setAttribute("id","tagToolTag"),n.setAttribute("style",`
+'use strict';
+
+var CommonToolUtils = require('../../utils/tool/CommonToolUtils.js');
+var TagUtils = require('../../utils/tool/TagUtils.js');
+var uuid = require('../../utils/uuid.js');
+var basicToolOperation = require('./basicToolOperation.js');
+
+class TagOperation extends basicToolOperation.BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.getInitResultList = (dataSourceStep, basicResultList) => {
+      if (!(dataSourceStep === 0 || dataSourceStep === void 0) && basicResultList.length === 0) {
+        return [];
+      }
+      return TagUtils.getDefaultTagResult(this.config.inputList, basicResultList);
+    };
+    this.setLabel = (i, j) => {
+      var _a, _b;
+      if (this.isImgError) {
+        return;
+      }
+      if (!this.basicResult && this.dependToolName) {
+        return;
+      }
+      const labelInfoSet = this.config.inputList;
+      if (!labelInfoSet[i]) {
+        return;
+      }
+      const {subSelected} = labelInfoSet[i];
+      if (i < labelInfoSet.length && labelInfoSet[i].subSelected && subSelected && j < subSelected.length) {
+        const key = labelInfoSet[i].value;
+        let value = (_a = subSelected[j]) == null ? void 0 : _a.value;
+        const isMulti = (_b = labelInfoSet[i]) == null ? void 0 : _b.isMulti;
+        const basicTagResult = this.tagResult.filter((v) => {
+          const basicSourceID = `${v.sourceID}`;
+          return CommonToolUtils.isSameSourceID(basicSourceID, this.sourceID);
+        })[0];
+        if (basicTagResult) {
+          let times = 0;
+          const {result} = basicTagResult;
+          if (basicTagResult.sourceID === 0) {
+            basicTagResult.sourceID = "0";
+          }
+          for (const oldKey in basicTagResult.result) {
+            if (oldKey === labelInfoSet[i].value) {
+              times++;
+              if (isMulti === true) {
+                const keyList = result[oldKey].split(";").filter((v) => v !== "");
+                const index = keyList.indexOf(value);
+                if (index === -1) {
+                  keyList.push(value);
+                } else {
+                  keyList.splice(index, 1);
+                }
+                value = keyList.join(";");
+              }
+              if (value === "") {
+                if (Object.keys(result).length === 1) {
+                  this.tagResult = this.tagResult.filter((v) => {
+                    const basicSourceID = `${v.sourceID}`;
+                    return CommonToolUtils.isDifferSourceID(basicSourceID, this.sourceID);
+                  });
+                } else if (Object.keys(result).length > 1) {
+                  delete result[oldKey];
+                }
+              } else {
+                result[oldKey] = value;
+              }
+            }
+          }
+          if (times === 0) {
+            Object.assign(basicTagResult.result, {[key]: value});
+          }
+        } else {
+          this.tagResult = [
+            {
+              sourceID: this.sourceID,
+              id: uuid(8, 62),
+              result: {
+                [key]: value
+              }
+            }
+          ];
+        }
+        this.render();
+      }
+    };
+    this.clearResult = (sendMessage = true, value) => {
+      if (value) {
+        this.tagResult = this.tagResult.map((v) => {
+          if (v == null ? void 0 : v.result[value]) {
+            delete v.result[value];
+          }
+          return v;
+        });
+      } else {
+        this.tagResult = [];
+      }
+      this.render();
+    };
+    this.config = CommonToolUtils.jsonParser(props.config);
+    this.tagResult = [];
+    this.labelSelectedList = [];
+    this.setShowDefaultCursor(true);
+  }
+  destroy() {
+    this.clearTag();
+    super.destroy();
+  }
+  setResult(tagResult) {
+    this.tagResult = tagResult;
+    this.render();
+  }
+  get currentPageResult() {
+    return [this.currentTagResult];
+  }
+  get currentTagResult() {
+    var _a;
+    return (_a = this.tagResult.filter((v) => {
+      const basicSourceID = `${v.sourceID}`;
+      return CommonToolUtils.isSameSourceID(basicSourceID, this.sourceID);
+    })[0]) != null ? _a : {};
+  }
+  get sourceID() {
+    return CommonToolUtils.getSourceID(this.basicResult);
+  }
+  onKeyDown(e) {
+    if (!CommonToolUtils.hotkeyFilter(e) || super.onKeyDown(e) === false) {
+      return;
+    }
+    let {keyCode} = e;
+    if (keyCode) {
+      if (keyCode <= 57 && keyCode >= 49 || keyCode <= 105 && keyCode >= 97) {
+        if (keyCode > 57) {
+          keyCode -= 97;
+        } else {
+          keyCode -= 49;
+        }
+        if (this.config.inputList.length === 1) {
+          this.labelSelectedList = [0, keyCode];
+          this.setLabel(0, keyCode);
+          setTimeout(() => {
+            this.labelSelectedList = [];
+            this.render();
+          }, 500);
+          return;
+        }
+        if (this.labelSelectedList.length === 1) {
+          this.labelSelectedList = [this.labelSelectedList[0], keyCode];
+          this.setLabel(this.labelSelectedList[0], keyCode);
+          setTimeout(() => {
+            this.labelSelectedList = [];
+            this.render();
+          }, 500);
+        } else {
+          this.labelSelectedList = [keyCode];
+          this.emit("expend");
+        }
+      }
+    }
+  }
+  clearTag() {
+    var _a;
+    const parentNode = (_a = this.canvas) == null ? void 0 : _a.parentNode;
+    const oldDom = window.self.document.getElementById("tagToolTag");
+    if (oldDom && parentNode && parentNode.contains(oldDom)) {
+      parentNode == null ? void 0 : parentNode.removeChild(oldDom);
+    }
+  }
+  renderTag() {
+    var _a, _b, _c, _d, _e, _f;
+    this.clearTag();
+    if (!(((_a = this.tagResult) == null ? void 0 : _a.length) > 0)) {
+      return;
+    }
+    const dom = document.createElement("div");
+    const tagInfoList = TagUtils.getTagNameList((_c = (_b = this.currentTagResult) == null ? void 0 : _b.result) != null ? _c : {}, this.config.inputList);
+    dom.innerHTML = (_d = tagInfoList.reduce((acc, cur) => {
+      return `${acc}${cur.keyName}: ${cur.value.join(` \u3001 `)}
+`;
+    }, "")) != null ? _d : "";
+    dom.setAttribute("id", "tagToolTag");
+    dom.setAttribute("style", `
         position: absolute;
         top: 0;
         right: 0;
@@ -16,4 +197,21 @@
         background: rgba(102, 111, 255, 1);
         opacity: 0.6;
         clear: both;
-      `),(l=(c=this.canvas)==null?void 0:c.parentNode)==null||l.appendChild(n)}render(){this.renderTag(),super.render(),this.emit("render")}exportData(){let{tagResult:t}=this;return this.isImgError&&(t=[]),[t,this.basicImgInfo]}}module.exports=TagOperation;
+      `);
+    (_f = (_e = this.canvas) == null ? void 0 : _e.parentNode) == null ? void 0 : _f.appendChild(dom);
+  }
+  render() {
+    this.renderTag();
+    super.render();
+    this.emit("render");
+  }
+  exportData() {
+    let {tagResult} = this;
+    if (this.isImgError) {
+      tagResult = [];
+    }
+    return [tagResult, this.basicImgInfo];
+  }
+}
+
+module.exports = TagOperation;

package/dist/core/toolOperation/textAttributeClass.js

@@ -1,37 +1,203 @@
-"use strict";var keyCode=require("../../constant/keyCode.js"),tool=require("../../constant/tool.js");const defaultWidth=30,DEFAULT_TEXT_WIDTH=164;class TextAttributeClass{constructor(t){this.textKeyDown=a=>{switch(a.stopPropagation(),a.keyCode){case keyCode.Enter:this.submitTextarea(),this.appendToContainer();break}};const{container:i,icon:e,color:r,getCurrentSelectedData:o,updateSelectedTextAttribute:n}=t,s=t.width||DEFAULT_TEXT_WIDTH;this.container=i,this.getCurrentSelectedData=o,this.updateSelectedTextAttribute=n,this._textAttributeDOM=this.initTextAttributeDOM(),this._iconDOM=this.initIconDOM(e),this._textDOM=this.initTextDOM(s,tool.TEXT_ATTRIBUTE_LINE_HEIGHT),this._textareaDOM=this.initTextareaDOM(s,r),this.appendToContainer()}get isExit(){return this._textAttributeDOM?this.container.contains(this._textAttributeDOM):!1}get isExitTextareaDOM(){return this._textareaDOM?this.container.contains(this._textareaDOM):!1}updateIcon(t){this._iconDOM&&(this._iconDOM.innerHTML=t)}appendToContainer(){!this._textAttributeDOM||!this._textDOM||!this._iconDOM||(this.container.appendChild(this._textAttributeDOM),this._textAttributeDOM.appendChild(this._textDOM),this._textAttributeDOM.appendChild(this._iconDOM))}initTextAttributeDOM(){const t=document.createElement("div");return t.setAttribute("id","textArea"),t}initTextDOM(t,i){const e=document.createElement("span");return e.setAttribute("style",`
-        width: ${Math.max(t,defaultWidth)}px;
-        line-height: ${i}px;
+'use strict';
+
+var keyCode = require('../../constant/keyCode.js');
+var tool = require('../../constant/tool.js');
+
+const defaultWidth = 30;
+const DEFAULT_TEXT_WIDTH = 164;
+class TextAttributeClass {
+  constructor(props) {
+    this.textKeyDown = (e) => {
+      e.stopPropagation();
+      switch (e.keyCode) {
+        case keyCode.Enter:
+          this.submitTextarea();
+          this.appendToContainer();
+          break;
+      }
+    };
+    const {container, icon, color, getCurrentSelectedData, updateSelectedTextAttribute} = props;
+    const width = props.width || DEFAULT_TEXT_WIDTH;
+    this.container = container;
+    this.getCurrentSelectedData = getCurrentSelectedData;
+    this.updateSelectedTextAttribute = updateSelectedTextAttribute;
+    this._textAttributeDOM = this.initTextAttributeDOM();
+    this._iconDOM = this.initIconDOM(icon);
+    this._textDOM = this.initTextDOM(width, tool.TEXT_ATTRIBUTE_LINE_HEIGHT);
+    this._textareaDOM = this.initTextareaDOM(width, color);
+    this.appendToContainer();
+  }
+  get isExit() {
+    if (!this._textAttributeDOM) {
+      return false;
+    }
+    return this.container.contains(this._textAttributeDOM);
+  }
+  get isExitTextareaDOM() {
+    if (!this._textareaDOM) {
+      return false;
+    }
+    return this.container.contains(this._textareaDOM);
+  }
+  updateIcon(icon) {
+    if (this._iconDOM) {
+      this._iconDOM.innerHTML = icon;
+    }
+  }
+  appendToContainer() {
+    if (!this._textAttributeDOM || !this._textDOM || !this._iconDOM) {
+      return;
+    }
+    this.container.appendChild(this._textAttributeDOM);
+    this._textAttributeDOM.appendChild(this._textDOM);
+    this._textAttributeDOM.appendChild(this._iconDOM);
+  }
+  initTextAttributeDOM() {
+    const _textAttributeDOM = document.createElement("div");
+    _textAttributeDOM.setAttribute("id", "textArea");
+    return _textAttributeDOM;
+  }
+  initTextDOM(width, lineHeight) {
+    const _textDOM = document.createElement("span");
+    _textDOM.setAttribute("style", `
+        width: ${Math.max(width, defaultWidth)}px;
+        line-height: ${lineHeight}px;
         word-break: break-all;
         white-space: pre-line;
         font-style: italic;
-      `),e}initIconDOM(t){const i=document.createElement("div");return i.setAttribute("id","annotation_text"),i.innerHTML=t,i.addEventListener("mouseup",e=>{e.stopPropagation(),this.renderTextarea()}),i.addEventListener("mousedown",e=>{e.stopPropagation()}),i.addEventListener("contextmenu",e=>{e.stopPropagation()}),i.setAttribute("style",`
+      `);
+    return _textDOM;
+  }
+  initIconDOM(icon) {
+    const _iconDOM = document.createElement("div");
+    _iconDOM.setAttribute("id", "annotation_text");
+    _iconDOM.innerHTML = icon;
+    _iconDOM.addEventListener("mouseup", (e) => {
+      e.stopPropagation();
+      this.renderTextarea();
+    });
+    _iconDOM.addEventListener("mousedown", (e) => {
+      e.stopPropagation();
+    });
+    _iconDOM.addEventListener("contextmenu", (e) => {
+      e.stopPropagation();
+    });
+    _iconDOM.setAttribute("style", `
         position: absolute;
         left: -20px;
         top: 4px;
         cursor: pointer;
         z-index: 10
-      `),i}initTextareaDOM(t,i){const e=document.createElement("textarea");return e.addEventListener("click",r=>{r.stopPropagation()}),e.addEventListener("mouseup",r=>{r.stopPropagation()}),e.setAttribute("style",`
+      `);
+    return _iconDOM;
+  }
+  initTextareaDOM(width, color) {
+    const _textareaDOM = document.createElement("textarea");
+    _textareaDOM.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    _textareaDOM.addEventListener("mouseup", (e) => {
+      e.stopPropagation();
+    });
+    _textareaDOM.setAttribute("style", `
       background-color: transparent;
       border-radius: 5px;
-      border-color: ${i};
+      border-color: ${color};
       outline: none;
       resize: none;
-      width: ${Math.max(t,30)}px;
-      `),e.setAttribute("maxLength",`${tool.TEXT_ATTRIBUTE_MAX_LENGTH}`),e}removeTextDOM(){!this._textAttributeDOM||this._textDOM&&this._textAttributeDOM.removeChild(this._textDOM)}removeIconDOM(){!this._textAttributeDOM||this._iconDOM&&this._textAttributeDOM.removeChild(this._iconDOM)}removeTextareaDOM(){var t,i;this._textareaDOM&&this._textAttributeDOM&&((t=this._textAttributeDOM)==null?void 0:t.contains(this._textareaDOM))&&((i=this._textAttributeDOM)==null||i.removeChild(this._textareaDOM))}submitTextarea(){var t;this._textareaDOM&&(this.updateSelectedTextAttribute((t=this._textareaDOM)==null?void 0:t.value),this.removeTextareaDOM(),this.clearTextAttribute())}clearTextAttribute(){this._textAttributeDOM&&this.container.contains(this._textAttributeDOM)&&this.container.removeChild(this._textAttributeDOM)}renderTextarea(){if(!this._textAttributeDOM||!this._textareaDOM)return;const t=this.getCurrentSelectedData();if(!t)return;const{width:i=DEFAULT_TEXT_WIDTH,textAttribute:e,color:r}=t;this._textareaDOM.value=`${e}`,this._textareaDOM.setAttribute("style",`
+      width: ${Math.max(width, 30)}px;
+      `);
+    _textareaDOM.setAttribute("maxLength", `${tool.TEXT_ATTRIBUTE_MAX_LENGTH}`);
+    return _textareaDOM;
+  }
+  removeTextDOM() {
+    if (!this._textAttributeDOM) {
+      return;
+    }
+    if (this._textDOM) {
+      this._textAttributeDOM.removeChild(this._textDOM);
+    }
+  }
+  removeIconDOM() {
+    if (!this._textAttributeDOM) {
+      return;
+    }
+    if (this._iconDOM) {
+      this._textAttributeDOM.removeChild(this._iconDOM);
+    }
+  }
+  removeTextareaDOM() {
+    var _a, _b;
+    if (this._textareaDOM && this._textAttributeDOM && ((_a = this._textAttributeDOM) == null ? void 0 : _a.contains(this._textareaDOM))) {
+      (_b = this._textAttributeDOM) == null ? void 0 : _b.removeChild(this._textareaDOM);
+    }
+  }
+  submitTextarea() {
+    var _a;
+    if (this._textareaDOM) {
+      this.updateSelectedTextAttribute((_a = this._textareaDOM) == null ? void 0 : _a.value);
+      this.removeTextareaDOM();
+      this.clearTextAttribute();
+    }
+  }
+  clearTextAttribute() {
+    if (this._textAttributeDOM && this.container.contains(this._textAttributeDOM)) {
+      this.container.removeChild(this._textAttributeDOM);
+    }
+  }
+  renderTextarea() {
+    if (!this._textAttributeDOM || !this._textareaDOM) {
+      return;
+    }
+    const data = this.getCurrentSelectedData();
+    if (!data) {
+      return;
+    }
+    const {width = DEFAULT_TEXT_WIDTH, textAttribute, color} = data;
+    this._textareaDOM.value = `${textAttribute}`;
+    this._textareaDOM.setAttribute("style", `
       background-color: rgba(0,0,0,0.4);
       border-radius: 5px;
-      border-color: ${r};
+      border-color: ${color};
       outline: none;
       resize: none;
       font-style: italic;
       font-weight: 900;
       text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
-      width: ${Math.max(i,defaultWidth)}px;
-      `),this._textareaDOM.setAttribute("maxLength",`${tool.TEXT_ATTRIBUTE_MAX_LENGTH}`),this._textAttributeDOM.appendChild(this._textareaDOM),this.removeIconDOM(),this.removeTextDOM(),this._textareaDOM.focus(),this._textareaDOM.addEventListener("keydown",this.textKeyDown)}update(t,i){var e;const{left:r,top:o,color:n,width:s=DEFAULT_TEXT_WIDTH}=i,a=Math.max(s,defaultWidth);(e=this._textAttributeDOM)==null||e.setAttribute("style",`
+      width: ${Math.max(width, defaultWidth)}px;
+      `);
+    this._textareaDOM.setAttribute("maxLength", `${tool.TEXT_ATTRIBUTE_MAX_LENGTH}`);
+    this._textAttributeDOM.appendChild(this._textareaDOM);
+    this.removeIconDOM();
+    this.removeTextDOM();
+    this._textareaDOM.focus();
+    this._textareaDOM.addEventListener("keydown", this.textKeyDown);
+  }
+  update(textAttribute, position) {
+    var _a;
+    const {left, top, color, width = DEFAULT_TEXT_WIDTH} = position;
+    const newWidth = Math.max(width, defaultWidth);
+    (_a = this._textAttributeDOM) == null ? void 0 : _a.setAttribute("style", `
         position: absolute; 
-        width: ${a}px;
+        width: ${newWidth}px;
         font-size: 14px; 
-        left:${r}px; 
-        top: ${o}px; 
-        color: ${n};
-      `),this._textDOM&&(this._textDOM.innerHTML=`${t}`),this._textareaDOM&&(this._textareaDOM.style.width=`${a}px`,this._textareaDOM.style.borderColor=`${n}`)}changeSelected(){this.isExitTextareaDOM&&this.submitTextarea()}}module.exports=TextAttributeClass;
+        left:${left}px; 
+        top: ${top}px; 
+        color: ${color};
+      `);
+    if (this._textDOM) {
+      this._textDOM.innerHTML = `${textAttribute}`;
+    }
+    if (this._textareaDOM) {
+      this._textareaDOM.style.width = `${newWidth}px`;
+      this._textareaDOM.style.borderColor = `${color}`;
+    }
+  }
+  changeSelected() {
+    if (this.isExitTextareaDOM) {
+      this.submitTextarea();
+    }
+  }
+}
+
+module.exports = TextAttributeClass;