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

package/dist/core/toolOperation/segmentByRect.js

@@ -1,174 +1 @@
-'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;
+"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;

package/dist/core/toolOperation/tagOperation.js

@@ -1,186 +1,5 @@
-'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", `
+"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",`
         position: absolute;
         top: 0;
         right: 0;
@@ -197,21 +16,4 @@ class TagOperation extends basicToolOperation.BasicToolOperation {
         background: rgba(102, 111, 255, 1);
         opacity: 0.6;
         clear: both;
-      `);
-    (_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;
+      `),(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;

package/dist/core/toolOperation/textAttributeClass.js

@@ -1,203 +1,37 @@
-'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;
+"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;
         word-break: break-all;
         white-space: pre-line;
         font-style: italic;
-      `);
-    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", `
+      `),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",`
         position: absolute;
         left: -20px;
         top: 4px;
         cursor: pointer;
         z-index: 10
-      `);
-    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", `
+      `),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",`
       background-color: transparent;
       border-radius: 5px;
-      border-color: ${color};
+      border-color: ${i};
       outline: none;
       resize: none;
-      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", `
+      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",`
       background-color: rgba(0,0,0,0.4);
       border-radius: 5px;
-      border-color: ${color};
+      border-color: ${r};
       outline: none;
       resize: none;
       font-style: italic;
       font-weight: 900;
       text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
-      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", `
+      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",`
         position: absolute; 
-        width: ${newWidth}px;
+        width: ${a}px;
         font-size: 14px; 
-        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;
+        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;