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

package/es/core/toolOperation/ScribbleTool.js

@@ -1,290 +1 @@
-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 };
+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};

package/es/core/toolOperation/TextToolOperation.js

@@ -1,129 +1 @@
-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 };
+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};