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

package/es/core/toolOperation/ScribbleTool.js

@@ -1 +1,290 @@
-import{ImgConversionUtils as n}from"@labelbee/lb-utils";import r from"../../utils/tool/AxisUtils.js";import a from"../../utils/tool/DrawUtils.js";import{EToolName as h,EScribblePattern as o}from"../../constant/tool.js";import c from"../../utils/tool/CommonToolUtils.js";import l from"../../utils/tool/AttributeUtils.js";import{BasicToolOperation as u}from"./basicToolOperation.js";const d=20,C="white";class v extends u{constructor(t){super(t);this.toolName=h.ScribbleTool,this.action=o.Scribble,this.getOriginCoordinate=i=>r.changePointByZoom(this.getCoordinateUnderZoomByRotate(i),1/this.zoom),this.onMouseDown=i=>{super.onMouseDown(i)||this.forbidMouseOperation||!this.imgInfo||(this.initCacheCanvas(this.imgNode),this.mouseEvents("onMouseDown").call(this,i))},this.onMouseMove=i=>{super.onMouseMove(i)||this.forbidMouseOperation||!this.imgInfo||this.mouseEvents("onMouseMove").call(this,i)},this.onMouseUp=i=>{super.onMouseUp(i)||this.forbidMouseOperation||!this.imgInfo||this.mouseEvents("onMouseUp").call(this,i)},this.mouseEvents=i=>({[o.Scribble]:{onMouseMove:this.onScribbleMove,onMouseUp:this.onScribbleEnd,onMouseDown:this.onScribbleStart},[o.Erase]:{onMouseMove:this.onEraseMove,onMouseUp:this.onEraseEnd,onMouseDown:this.onEraseStart}})[this.action][i],this.setPattern=i=>{switch(this.action=i,i){case o.Erase:{this.setCustomCursor(this.cursorErase);break}default:{this.setCustomCursor("none");break}}};var e;if(this.penSize=d,((e=this.config.attributeList)==null?void 0:e.length)>0){const i=this.config.attributeList[0];this.setDefaultAttribute(i.value)}}get cursorErase(){const t='<?xml version="1.0" encoding="UTF-8"?><svg width="24" heighst="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#icon-65e7e1747c11bad3)"><path d="M44.7818 24.1702L31.918 7.09935L14.1348 20.5L27.5 37L30.8556 34.6643L44.7818 24.1702Z" fill="#141414" stroke="#000000" stroke-width="4" stroke-linejoin="miter"/><path d="M27.4998 37L23.6613 40.0748L13.0978 40.074L10.4973 36.6231L4.06543 28.0876L14.4998 20.2248" stroke="#000000" stroke-width="4" stroke-linejoin="miter"/><path d="M13.2056 40.072L44.5653 40.072" stroke="#000000" stroke-width="4" stroke-linecap="round"/></g><defs><clipPath id="icon-65e7e1747c11bad3"><rect width="48" height="48" fill="#df4c4c"/></clipPath></defs></svg>';return`url(${`data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(t)))}`}) 0 0, auto`}get defaultCursor(){return this.action===o.Erase?this.cursorErase:this.isShowDefaultCursor?"default":"none"}get color(){var t,e;return(e=(t=this==null?void 0:this.defaultAttributeInfo)==null?void 0:t.color)!=null?e:C}get penSizeWithZoom(){return this.penSize/this.zoom}get cacheCanvasToDataUrl(){var t;return(t=this.cacheCanvas)==null?void 0:t.toDataURL("image/png",0)}setPenSize(t){this.penSize=t}initCacheCanvas(t){if(this.cacheCanvas||!t)return;const{canvas:e,ctx:i}=n.createCanvas(t);this.cacheCanvas=e,this.cacheContext=i}updateCacheCanvasSize(t){this.cacheCanvas&&(this.cacheCanvas.width=t.width,this.cacheCanvas.height=t.height)}updateUrl2CacheContext(t){n.createImgDom(t).then(e=>{this.cacheContext||this.initCacheCanvas(e),this.cacheContext&&(this.cacheContext.save(),this.clearCacheCanvas(),this.cacheContext.drawImage(e,0,0,e.width,e.height),this.cacheContext.restore(),this.render())})}setImgNode(t,e){super.setImgNode(t,e),this.cacheCanvas?this.updateCacheCanvasSize(t):this.initCacheCanvas(t)}setResult(t){var e,i;let{url:s}=(e=t==null?void 0:t[0])!=null?e:{};if(this.clearCacheCanvas(),s||(s=(i=this.cacheCanvasToDataUrl)!=null?i:""),this.history.initRecord([s],!0),!s){this.render();return}this.updateUrl2CacheContext(s)}onKeyDown(t){if(!c.hotkeyFilter(t)||super.onKeyDown(t)===!1)return;const{keyCode:e}=t,i=l.getAttributeByKeycode(e,this.config.attributeList);i!==void 0&&this.setDefaultAttribute(i)}eventBinding(){super.eventBinding()}setDefaultAttribute(t){const e=this.config.attributeList.find(i=>i.value===t);e&&(this.defaultAttribute=e.value,this.defaultAttributeInfo=e,this.emit("changeAttributeSidebar"),this.render())}clearStatusAfterLeave(){this.onScribbleEnd(),this.startPoint=void 0}onMouseLeave(){super.onMouseLeave(),this.clearStatusAfterLeave()}onScribbleStart(t){if(!this.cacheContext)return;this.cacheContext.save(),this.cacheContext.beginPath(),this.cacheContext.strokeStyle=this.color,this.cacheContext.lineWidth=this.penSizeWithZoom,this.cacheContext.lineCap="round",this.cacheContext.lineJoin="round";const e=this.getOriginCoordinate(t);this.cacheContext.moveTo(e.x,e.y),this.startPoint=e}onScribbleMove(t){if(t.buttons===1&&this.cacheContext&&this.startPoint){const e=this.getOriginCoordinate(t);this.cacheContext.lineTo(e.x,e.y),this.cacheContext.stroke()}}onScribbleEnd(){var t,e;this.startPoint&&((t=this.cacheContext)==null||t.closePath(),(e=this.cacheContext)==null||e.restore(),this.startPoint=void 0,this.history.pushHistory(this.cacheCanvasToDataUrl))}eraseArc(t){var e;if(this.cacheContext){const i=this.getOriginCoordinate(t);this.cacheContext.save(),this.cacheContext.beginPath(),this.cacheContext.arc(i.x,i.y,this.penSizeWithZoom/2,0,Math.PI*2,!1),this.cacheContext.clip(),this.cacheContext.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height),(e=this.cacheContext)==null||e.restore()}}onEraseStart(t){!this.cacheContext||t.buttons!==1||this.eraseArc(t)}onEraseMove(t){!this.cacheContext||t.buttons!==1||this.eraseArc(t)}onEraseEnd(){}exportData(){const t=this.cacheCanvasToDataUrl;return[[],this.basicImgInfo,{imgBase64:t}]}clearCacheCanvas(){var t;(t=this.cacheContext)==null||t.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height),this.render()}clearResult(){this.clearCacheCanvas(),this.history.pushHistory(this.cacheCanvasToDataUrl)}renderPoint(t){a.drawCircleWithFill(this.canvas,this.coord,t,{color:this.color})}renderBorderPoint(t){a.drawCircle(this.canvas,this.coord,t,{color:"black"})}render(){if(super.render(),!this.ctx||!this.cacheCanvas||(this.ctx.save(),this.ctx.globalAlpha=.5,a.drawImg(this.canvas,this.cacheCanvas,{zoom:this.zoom,currentPos:this.currentPos,rotate:this.rotate}),this.ctx.restore(),this.forbidOperation||this.forbidCursorLine))return;const t=this.penSize/2;this.action===o.Erase?this.renderBorderPoint(t):this.renderPoint(t)}undo(){const t=this.history.undo();t&&this.cacheCanvas&&this.updateUrl2CacheContext(t)}redo(){const t=this.history.redo();t&&this.cacheCanvas&&this.updateUrl2CacheContext(t)}}export{v as default};
+import { ImgConversionUtils } from '@labelbee/lb-utils';
+import AxisUtils from '../../utils/tool/AxisUtils.js';
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import { EToolName, EScribblePattern } from '../../constant/tool.js';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import AttributeUtils from '../../utils/tool/AttributeUtils.js';
+import { BasicToolOperation } from './basicToolOperation.js';
+
+const DEFAULT_PEN_SIZE = 20;
+const DEFAULT_COLOR = "white";
+class ScribbleTool extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.toolName = EToolName.ScribbleTool;
+    this.action = EScribblePattern.Scribble;
+    this.getOriginCoordinate = (e) => {
+      return AxisUtils.changePointByZoom(this.getCoordinateUnderZoomByRotate(e), 1 / this.zoom);
+    };
+    this.onMouseDown = (e) => {
+      if (super.onMouseDown(e) || this.forbidMouseOperation || !this.imgInfo) {
+        return void 0;
+      }
+      this.initCacheCanvas(this.imgNode);
+      this.mouseEvents("onMouseDown").call(this, e);
+    };
+    this.onMouseMove = (e) => {
+      if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
+        return void 0;
+      }
+      this.mouseEvents("onMouseMove").call(this, e);
+    };
+    this.onMouseUp = (e) => {
+      if (super.onMouseUp(e) || this.forbidMouseOperation || !this.imgInfo) {
+        return void 0;
+      }
+      this.mouseEvents("onMouseUp").call(this, e);
+    };
+    this.mouseEvents = (eventType) => {
+      const events = {
+        [EScribblePattern.Scribble]: {
+          onMouseMove: this.onScribbleMove,
+          onMouseUp: this.onScribbleEnd,
+          onMouseDown: this.onScribbleStart
+        },
+        [EScribblePattern.Erase]: {
+          onMouseMove: this.onEraseMove,
+          onMouseUp: this.onEraseEnd,
+          onMouseDown: this.onEraseStart
+        }
+      };
+      return events[this.action][eventType];
+    };
+    this.setPattern = (pattern) => {
+      this.action = pattern;
+      switch (pattern) {
+        case EScribblePattern.Erase: {
+          this.setCustomCursor(this.cursorErase);
+          break;
+        }
+        default: {
+          this.setCustomCursor("none");
+          break;
+        }
+      }
+    };
+    var _a;
+    this.penSize = DEFAULT_PEN_SIZE;
+    if (((_a = this.config.attributeList) == null ? void 0 : _a.length) > 0) {
+      const firstAttributeInfo = this.config.attributeList[0];
+      this.setDefaultAttribute(firstAttributeInfo.value);
+    }
+  }
+  get cursorErase() {
+    const svgIcon = `<?xml version="1.0" encoding="UTF-8"?><svg width="24" heighst="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#icon-65e7e1747c11bad3)"><path d="M44.7818 24.1702L31.918 7.09935L14.1348 20.5L27.5 37L30.8556 34.6643L44.7818 24.1702Z" fill="#141414" stroke="#000000" stroke-width="4" stroke-linejoin="miter"/><path d="M27.4998 37L23.6613 40.0748L13.0978 40.074L10.4973 36.6231L4.06543 28.0876L14.4998 20.2248" stroke="#000000" stroke-width="4" stroke-linejoin="miter"/><path d="M13.2056 40.072L44.5653 40.072" stroke="#000000" stroke-width="4" stroke-linecap="round"/></g><defs><clipPath id="icon-65e7e1747c11bad3"><rect width="48" height="48" fill="#df4c4c"/></clipPath></defs></svg>`;
+    const iconUrl = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgIcon)))}`;
+    return `url(${iconUrl}) 0 0, auto`;
+  }
+  get defaultCursor() {
+    if (this.action === EScribblePattern.Erase) {
+      return this.cursorErase;
+    }
+    return this.isShowDefaultCursor ? "default" : "none";
+  }
+  get color() {
+    var _a, _b;
+    return (_b = (_a = this == null ? void 0 : this.defaultAttributeInfo) == null ? void 0 : _a.color) != null ? _b : DEFAULT_COLOR;
+  }
+  get penSizeWithZoom() {
+    return this.penSize / this.zoom;
+  }
+  get cacheCanvasToDataUrl() {
+    var _a;
+    return (_a = this.cacheCanvas) == null ? void 0 : _a.toDataURL("image/png", 0);
+  }
+  setPenSize(size) {
+    this.penSize = size;
+  }
+  initCacheCanvas(imgNode) {
+    if (this.cacheCanvas || !imgNode) {
+      return;
+    }
+    const {canvas, ctx} = ImgConversionUtils.createCanvas(imgNode);
+    this.cacheCanvas = canvas;
+    this.cacheContext = ctx;
+  }
+  updateCacheCanvasSize(imgNode) {
+    if (this.cacheCanvas) {
+      this.cacheCanvas.width = imgNode.width;
+      this.cacheCanvas.height = imgNode.height;
+    }
+  }
+  updateUrl2CacheContext(url) {
+    ImgConversionUtils.createImgDom(url).then((img) => {
+      if (!this.cacheContext) {
+        this.initCacheCanvas(img);
+      }
+      if (this.cacheContext) {
+        this.cacheContext.save();
+        this.clearCacheCanvas();
+        this.cacheContext.drawImage(img, 0, 0, img.width, img.height);
+        this.cacheContext.restore();
+        this.render();
+      }
+    });
+  }
+  setImgNode(imgNode, basicImgInfo) {
+    super.setImgNode(imgNode, basicImgInfo);
+    if (this.cacheCanvas) {
+      this.updateCacheCanvasSize(imgNode);
+    } else {
+      this.initCacheCanvas(imgNode);
+    }
+  }
+  setResult(data) {
+    var _a, _b;
+    let {url} = (_a = data == null ? void 0 : data[0]) != null ? _a : {};
+    this.clearCacheCanvas();
+    if (!url) {
+      url = (_b = this.cacheCanvasToDataUrl) != null ? _b : "";
+    }
+    this.history.initRecord([url], true);
+    if (!url) {
+      this.render();
+      return;
+    }
+    this.updateUrl2CacheContext(url);
+  }
+  onKeyDown(e) {
+    if (!CommonToolUtils.hotkeyFilter(e) || super.onKeyDown(e) === false) {
+      return;
+    }
+    const {keyCode} = e;
+    const keyCode2Attribute = AttributeUtils.getAttributeByKeycode(keyCode, this.config.attributeList);
+    if (keyCode2Attribute !== void 0) {
+      this.setDefaultAttribute(keyCode2Attribute);
+    }
+  }
+  eventBinding() {
+    super.eventBinding();
+  }
+  setDefaultAttribute(attributeValue) {
+    const attributeInfo = this.config.attributeList.find((v) => v.value === attributeValue);
+    if (attributeInfo) {
+      this.defaultAttribute = attributeInfo.value;
+      this.defaultAttributeInfo = attributeInfo;
+      this.emit("changeAttributeSidebar");
+      this.render();
+    }
+  }
+  clearStatusAfterLeave() {
+    this.onScribbleEnd();
+    this.startPoint = void 0;
+  }
+  onMouseLeave() {
+    super.onMouseLeave();
+    this.clearStatusAfterLeave();
+  }
+  onScribbleStart(e) {
+    if (!this.cacheContext) {
+      return;
+    }
+    this.cacheContext.save();
+    this.cacheContext.beginPath();
+    this.cacheContext.strokeStyle = this.color;
+    this.cacheContext.lineWidth = this.penSizeWithZoom;
+    this.cacheContext.lineCap = "round";
+    this.cacheContext.lineJoin = "round";
+    const originCoordinate = this.getOriginCoordinate(e);
+    this.cacheContext.moveTo(originCoordinate.x, originCoordinate.y);
+    this.startPoint = originCoordinate;
+  }
+  onScribbleMove(e) {
+    if (e.buttons === 1 && this.cacheContext && this.startPoint) {
+      const originCoordinate = this.getOriginCoordinate(e);
+      this.cacheContext.lineTo(originCoordinate.x, originCoordinate.y);
+      this.cacheContext.stroke();
+    }
+  }
+  onScribbleEnd() {
+    var _a, _b;
+    if (this.startPoint) {
+      (_a = this.cacheContext) == null ? void 0 : _a.closePath();
+      (_b = this.cacheContext) == null ? void 0 : _b.restore();
+      this.startPoint = void 0;
+      this.history.pushHistory(this.cacheCanvasToDataUrl);
+    }
+  }
+  eraseArc(e) {
+    var _a;
+    if (this.cacheContext) {
+      const originCoordinate = this.getOriginCoordinate(e);
+      this.cacheContext.save();
+      this.cacheContext.beginPath();
+      this.cacheContext.arc(originCoordinate.x, originCoordinate.y, this.penSizeWithZoom / 2, 0, Math.PI * 2, false);
+      this.cacheContext.clip();
+      this.cacheContext.clearRect(0, 0, this.cacheContext.canvas.width, this.cacheContext.canvas.height);
+      (_a = this.cacheContext) == null ? void 0 : _a.restore();
+    }
+  }
+  onEraseStart(e) {
+    if (!this.cacheContext || e.buttons !== 1) {
+      return;
+    }
+    this.eraseArc(e);
+  }
+  onEraseMove(e) {
+    if (!this.cacheContext || e.buttons !== 1) {
+      return;
+    }
+    this.eraseArc(e);
+  }
+  onEraseEnd() {
+  }
+  exportData() {
+    const imgBase64 = this.cacheCanvasToDataUrl;
+    return [[], this.basicImgInfo, {imgBase64}];
+  }
+  clearCacheCanvas() {
+    var _a;
+    (_a = this.cacheContext) == null ? void 0 : _a.clearRect(0, 0, this.cacheContext.canvas.width, this.cacheContext.canvas.height);
+    this.render();
+  }
+  clearResult() {
+    this.clearCacheCanvas();
+    this.history.pushHistory(this.cacheCanvasToDataUrl);
+  }
+  renderPoint(radius) {
+    DrawUtils.drawCircleWithFill(this.canvas, this.coord, radius, {color: this.color});
+  }
+  renderBorderPoint(radius) {
+    DrawUtils.drawCircle(this.canvas, this.coord, radius, {color: "black"});
+  }
+  render() {
+    super.render();
+    if (!this.ctx || !this.cacheCanvas) {
+      return;
+    }
+    this.ctx.save();
+    this.ctx.globalAlpha = 0.5;
+    DrawUtils.drawImg(this.canvas, this.cacheCanvas, {
+      zoom: this.zoom,
+      currentPos: this.currentPos,
+      rotate: this.rotate
+    });
+    this.ctx.restore();
+    if (this.forbidOperation || this.forbidCursorLine) {
+      return;
+    }
+    const radius = this.penSize / 2;
+    if (this.action === EScribblePattern.Erase) {
+      this.renderBorderPoint(radius);
+    } else {
+      this.renderPoint(radius);
+    }
+  }
+  undo() {
+    const url = this.history.undo();
+    if (url && this.cacheCanvas) {
+      this.updateUrl2CacheContext(url);
+    }
+  }
+  redo() {
+    const url = this.history.redo();
+    if (url && this.cacheCanvas) {
+      this.updateUrl2CacheContext(url);
+    }
+  }
+}
+
+export { ScribbleTool as default };

package/es/core/toolOperation/TextToolOperation.js

@@ -1 +1,129 @@
-import a from"../../utils/uuid.js";import r from"../../constant/keyCode.js";import l from"../../utils/tool/CommonToolUtils.js";import{BasicToolOperation as u}from"./basicToolOperation.js";class d extends u{constructor(t){super(t);this.getSingleResult=i=>{const e={};return this.config.configList.length>0&&this.config.configList.forEach(n=>{var o;e[n.key]=(o=n.default)!=null?o:""}),{value:e,id:a(),sourceID:i!=null?i:l.getSourceID()}},this.getInitResultList=(i,e)=>i>0?e.map(n=>this.getSingleResult(n.id)):[this.getSingleResult()],this.textList=[],this.setShowDefaultCursor(!0),this.setConfig(t.config),this.initTextDisplayContainer()}get dataList(){return this.textList}get textValueContainerID(){return"textValueContainer"}get textValueContainer(){return document.getElementById(this.textValueContainerID)}get currentPageResult(){return this.textList}setResult(t){var i;this.textList=t,this.toggleTextContainerVisible(!0);const e=(i=this.textList[0])==null?void 0:i.value;e&&Object.keys(e).forEach(n=>{this.renderText(n,e[n])}),this.emit("valueUpdated"),this.toggleTextContainerVisible(!!e)}updateTextValue(t,i){this.textList[0].value[t]=i,this.renderText(t,i),this.emit("valueUpdated")}renderText(t,i){const e=document.getElementById(`textKey${t}`);e&&(e.innerText=i)}getTextDomID(t){return`textKey${t}`}initTextDisplayContainer(){const t=document.createElement("div"),i={position:"absolute",right:"0",top:"0","z-index":"20","max-width":"20%","font-family":"SourceHanSansCN-Regular",background:"rgb(102, 230, 255)",color:"white","word-break":"break-all","line-height":"24px","white-space":"pre-wrap","max-height":"80%","overflow-y":"auto",opacity:"0.6"};t.setAttribute("style",Object.keys(i).reduce((e,n)=>(e+=`${n}: ${i[n]};`,e),"")),t.setAttribute("id",this.textValueContainerID),this.config.configList.forEach(e=>{const n=document.createElement("div"),o=document.createElement("div"),s=document.createElement("div");n.setAttribute("style","padding: 8px 16px"),o.innerText=`${e.key}:`,s.innerText="",s.setAttribute("id",this.getTextDomID(e.key)),n.appendChild(o),n.appendChild(s),t.appendChild(n)}),this.container.appendChild(t)}exportData(){return[this.textList,this.basicImgInfo]}destroyCanvas(){super.destroyCanvas(),this.textValueContainer&&this.container.removeChild(this.textValueContainer)}onKeyDown(t){super.onKeyDown(t),t.keyCode===r.Z&&this.toggleTextContainerVisible()}toggleTextContainerVisible(t){if(this.textValueContainer){const i=(t!==void 0?!t:this.textValueContainer.style.display==="block")?"none":"block";this.textValueContainer.style.display=i}}}export{d as default};
+import uuid from '../../utils/uuid.js';
+import EKeyCode from '../../constant/keyCode.js';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import { BasicToolOperation } from './basicToolOperation.js';
+
+class TextToolOperation extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.getSingleResult = (sourceID) => {
+      const initValue = {};
+      if (this.config.configList.length > 0) {
+        this.config.configList.forEach((i) => {
+          var _a;
+          initValue[i.key] = (_a = i.default) != null ? _a : "";
+        });
+      }
+      return {value: initValue, id: uuid(), sourceID: sourceID != null ? sourceID : CommonToolUtils.getSourceID()};
+    };
+    this.getInitResultList = (dataSourceStep, basicResultList) => {
+      if (dataSourceStep > 0) {
+        return basicResultList.map((i) => this.getSingleResult(i.id));
+      }
+      return [this.getSingleResult()];
+    };
+    this.textList = [];
+    this.setShowDefaultCursor(true);
+    this.setConfig(props.config);
+    this.initTextDisplayContainer();
+  }
+  get dataList() {
+    return this.textList;
+  }
+  get textValueContainerID() {
+    return "textValueContainer";
+  }
+  get textValueContainer() {
+    return document.getElementById(this.textValueContainerID);
+  }
+  get currentPageResult() {
+    return this.textList;
+  }
+  setResult(textResultList) {
+    var _a;
+    this.textList = textResultList;
+    this.toggleTextContainerVisible(true);
+    const values = (_a = this.textList[0]) == null ? void 0 : _a.value;
+    if (values) {
+      Object.keys(values).forEach((k) => {
+        this.renderText(k, values[k]);
+      });
+    }
+    this.emit("valueUpdated");
+    this.toggleTextContainerVisible(!!values);
+  }
+  updateTextValue(k, v) {
+    this.textList[0].value[k] = v;
+    this.renderText(k, v);
+    this.emit("valueUpdated");
+  }
+  renderText(key, value) {
+    const textDom = document.getElementById(`textKey${key}`);
+    if (textDom) {
+      textDom.innerText = value;
+    }
+  }
+  getTextDomID(key) {
+    return `textKey${key}`;
+  }
+  initTextDisplayContainer() {
+    const dom = document.createElement("div");
+    const domStyle = {
+      position: "absolute",
+      right: "0",
+      top: "0",
+      "z-index": "20",
+      "max-width": "20%",
+      "font-family": "SourceHanSansCN-Regular",
+      background: "rgb(102, 230, 255)",
+      color: "white",
+      "word-break": "break-all",
+      "line-height": "24px",
+      "white-space": "pre-wrap",
+      "max-height": "80%",
+      "overflow-y": "auto",
+      opacity: "0.6"
+    };
+    dom.setAttribute("style", Object.keys(domStyle).reduce((pre, key) => {
+      pre += `${key}: ${domStyle[key]};`;
+      return pre;
+    }, ""));
+    dom.setAttribute("id", this.textValueContainerID);
+    this.config.configList.forEach((i) => {
+      const div = document.createElement("div");
+      const label = document.createElement("div");
+      const value = document.createElement("div");
+      div.setAttribute("style", "padding: 8px 16px");
+      label.innerText = `${i.key}:`;
+      value.innerText = "";
+      value.setAttribute("id", this.getTextDomID(i.key));
+      div.appendChild(label);
+      div.appendChild(value);
+      dom.appendChild(div);
+    });
+    this.container.appendChild(dom);
+  }
+  exportData() {
+    return [this.textList, this.basicImgInfo];
+  }
+  destroyCanvas() {
+    super.destroyCanvas();
+    if (this.textValueContainer) {
+      this.container.removeChild(this.textValueContainer);
+    }
+  }
+  onKeyDown(e) {
+    super.onKeyDown(e);
+    if (e.keyCode === EKeyCode.Z) {
+      this.toggleTextContainerVisible();
+    }
+  }
+  toggleTextContainerVisible(isVisible) {
+    if (this.textValueContainer) {
+      const display = (isVisible !== void 0 ? !isVisible : this.textValueContainer.style.display === "block") ? "none" : "block";
+      this.textValueContainer.style.display = display;
+    }
+  }
+}
+
+export { TextToolOperation as default };