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

package/es/core/toolOperation/scribbleTool2.js

@@ -0,0 +1,249 @@
+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.getCoordinateUnderZoom(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;
+    };
+    this.penSize = DEFAULT_PEN_SIZE;
+  }
+  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;
+  }
+  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.clearResult();
+        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;
+    const {url} = (_a = data == null ? void 0 : data[0]) != null ? _a : {};
+    this.history.initRecord([url], !!url);
+    this.clearResult();
+    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 = AxisUtils.changePointByZoom(this.getCoordinateUnderZoom(e), 1 / this.zoom);
+    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, _c;
+    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((_c = this.cacheCanvas) == null ? void 0 : _c.toDataURL("image/png", 0));
+    }
+  }
+  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() {
+    var _a;
+    const imgBase64 = (_a = this.cacheCanvas) == null ? void 0 : _a.toDataURL("image/png", 0);
+    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();
+  }
+  renderPoint(radius) {
+    DrawUtils.drawCircleWithFill(this.canvas, this.coord, radius, {color: this.color});
+  }
+  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;
+    }
+    this.renderPoint(this.penSize / 2);
+  }
+  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/segmentByRect.js

@@ -1 +1,172 @@
-import{i18n as d}from"@labelbee/lb-utils";import m from"../../utils/tool/AxisUtils.js";import{RectOperation as g}from"./rectOperation.js";import f from"../../constant/keyCode.js";var p=(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 y extends g{constructor(e){super(e);this.onKeydown=t=>{switch(t.keyCode){case f.Esc:t.preventDefault(),t.stopPropagation(),this.clearPredictionInfo();break;case f.Z:t.ctrlKey&&(t.preventDefault(),t.stopPropagation(),this.rectList=[],this.render());break}},this.segmentPrediction=t=>p(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 ${d.t("FramingOfObjectToBeDivided")}`;const s=d.language==="en";let h=s?326:186;if(((e=this.rectList)==null?void 0:e.length)===1){o=`\u2461 ${d.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=d.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=m.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(){}}export{y as default};
+import { i18n } from '@labelbee/lb-utils';
+import AxisUtils from '../../utils/tool/AxisUtils.js';
+import { RectOperation } from './rectOperation.js';
+import EKeyCode from '../../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 {
+  constructor(props) {
+    super(props);
+    this.onKeydown = (e) => {
+      switch (e.keyCode) {
+        case EKeyCode.Esc:
+          e.preventDefault();
+          e.stopPropagation();
+          this.clearPredictionInfo();
+          break;
+        case EKeyCode.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 ${i18n.t("FramingOfObjectToBeDivided")}`;
+    const isEn = i18n.language === "en";
+    let rectWidth = isEn ? 326 : 186;
+    if (((_a = this.rectList) == null ? void 0 : _a.length) === 1) {
+      text = `\u2461 ${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 = 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.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() {
+  }
+}
+
+export { SegmentByRect as default };

package/es/core/toolOperation/tagOperation.js

@@ -1,5 +1,184 @@
-import c from"../../utils/tool/CommonToolUtils.js";import m from"../../utils/tool/TagUtils.js";import T from"../../utils/uuid.js";import{BasicToolOperation as D}from"./basicToolOperation.js";class R extends D{constructor(t){super(t);this.getInitResultList=(e,s)=>!(e===0||e===void 0)&&s.length===0?[]:m.getDefaultTagResult(this.config.inputList,s),this.setLabel=(e,s)=>{var i,h;if(this.isImgError||!this.basicResult&&this.dependToolName)return;const l=this.config.inputList;if(!l[e])return;const{subSelected:o}=l[e];if(e<l.length&&l[e].subSelected&&o&&s<o.length){const d=l[e].value;let r=(i=o[s])==null?void 0:i.value;const g=(h=l[e])==null?void 0:h.isMulti,u=this.tagResult.filter(f=>{const n=`${f.sourceID}`;return c.isSameSourceID(n,this.sourceID)})[0];if(u){let f=0;const{result:n}=u;u.sourceID===0&&(u.sourceID="0");for(const p in u.result)if(p===l[e].value){if(f++,g===!0){const a=n[p].split(";").filter(I=>I!==""),b=a.indexOf(r);b===-1?a.push(r):a.splice(b,1),r=a.join(";")}r===""?Object.keys(n).length===1?this.tagResult=this.tagResult.filter(a=>{const b=`${a.sourceID}`;return c.isDifferSourceID(b,this.sourceID)}):Object.keys(n).length>1&&delete n[p]:n[p]=r}f===0&&Object.assign(u.result,{[d]:r})}else this.tagResult=[{sourceID:this.sourceID,id:T(8,62),result:{[d]: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=c.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 c.isSameSourceID(s,this.sourceID)})[0])!=null?t:{}}get sourceID(){return c.getSourceID(this.basicResult)}onKeyDown(t){if(!c.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,h,l;if(this.clearTag(),!(((t=this.tagResult)==null?void 0:t.length)>0))return;const o=document.createElement("div"),d=m.getTagNameList((s=(e=this.currentTagResult)==null?void 0:e.result)!=null?s:{},this.config.inputList);o.innerHTML=(i=d.reduce((r,g)=>`${r}${g.keyName}: ${g.value.join(" \u3001 ")}
-`,""))!=null?i:"",o.setAttribute("id","tagToolTag"),o.setAttribute("style",`
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import TagUtil from '../../utils/tool/TagUtils.js';
+import uuid from '../../utils/uuid.js';
+import { BasicToolOperation } from './basicToolOperation.js';
+
+class TagOperation extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.getInitResultList = (dataSourceStep, basicResultList) => {
+      if (!(dataSourceStep === 0 || dataSourceStep === void 0) && basicResultList.length === 0) {
+        return [];
+      }
+      return TagUtil.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 = TagUtil.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 +195,21 @@ import c from"../../utils/tool/CommonToolUtils.js";import m from"../../utils/too
         background: rgba(102, 111, 255, 1);
         opacity: 0.6;
         clear: both;
-      `),(l=(h=this.canvas)==null?void 0:h.parentNode)==null||l.appendChild(o)}render(){this.renderTag(),super.render(),this.emit("render")}exportData(){let{tagResult:t}=this;return this.isImgError&&(t=[]),[t,this.basicImgInfo]}}export{R as default};
+      `);
+    (_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];
+  }
+}
+
+export { TagOperation as default };