@labelbee/lb-annotation 1.27.0-alpha.2 → 1.27.0-alpha.4

package/dist/core/toolOperation/ScribbleTool.js

@@ -1 +1 @@
-"use strict";var lbUtils=require("@labelbee/lb-utils"),AxisUtils=require("../../utils/tool/AxisUtils.js"),DrawUtils=require("../../utils/tool/DrawUtils.js"),tool=require("../../constant/tool.js"),CommonToolUtils=require("../../utils/tool/CommonToolUtils.js"),AttributeUtils=require("../../utils/tool/AttributeUtils.js"),keyCode=require("../../constant/keyCode.js"),basicToolOperation=require("./basicToolOperation.js"),__defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(c,t,e)=>t in c?__defProp(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e,__spreadValues=(c,t)=>{for(var e in t||(t={}))__hasOwnProp.call(t,e)&&__defNormalProp(c,e,t[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(t))__propIsEnum.call(t,e)&&__defNormalProp(c,e,t[e]);return c};const DEFAULT_PEN_SIZE=20,DEFAULT_COLOR="white";class ScribbleTool extends basicToolOperation.BasicToolOperation{constructor(t){super(t);this.toolName=tool.EToolName.ScribbleTool,this.action=tool.EScribblePattern.Scribble,this.getOriginCoordinate=i=>AxisUtils.default.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=>({[tool.EScribblePattern.Scribble]:{onMouseMove:this.onScribbleMove,onMouseUp:this.onScribbleEnd,onMouseDown:this.onScribbleStart},[tool.EScribblePattern.Erase]:{onMouseMove:this.onEraseMove,onMouseUp:this.onEraseEnd,onMouseDown:this.onEraseStart}})[this.action][i],this.setPattern=i=>{switch(this.action=i,i){case tool.EScribblePattern.Erase:{this.setCustomCursor(this.cursorErase);break}default:{this.setCustomCursor("none");break}}};var e;if(this.penSize=DEFAULT_PEN_SIZE,this.isHidden=!1,this.pointList=[],this.curIndexOnLine=0,((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===tool.EScribblePattern.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:DEFAULT_COLOR}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,this.render()}initCacheCanvas(t){if(this.cacheCanvas||!t)return;const{canvas:e,ctx:i}=lbUtils.ImgConversionUtils.createCanvas(t);this.cacheCanvas=e,this.cacheContext=i;const{canvas:s,ctx:a}=lbUtils.ImgConversionUtils.createCanvas(t);this.preCacheCanvas=s,this.preCacheContext=a;const{ctx:n}=lbUtils.ImgConversionUtils.createCanvas(t);this.renderCacheContext=n}updateCacheCanvasSize(t){this.cacheCanvas&&(this.cacheCanvas.width=t.width,this.cacheCanvas.height=t.height)}updateUrl2CacheContext(t){lbUtils.ImgConversionUtils.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.filterCacheContext(),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(!CommonToolUtils.hotkeyFilter(t))return;const{keyCode:e}=t,i=AttributeUtils.default.getAttributeByKeycode(e,this.config.attributeList);i!==void 0&&this.setDefaultAttribute(i),e===keyCode.Z&&!t.ctrlKey&&this.toggleIsHide(),t.ctrlKey&&(this.action===tool.EScribblePattern.Scribble&&(this.lineActive=!0),e===keyCode.Z&&(this.lineActive=!1,t.shiftKey?this.redo():this.undo()),this.render())}onKeyUp(t){super.onKeyUp(t),t.keyCode===keyCode.Ctrl&&(this.lineActive=!1,this.pointList=[],this.curIndexOnLine=0,this.render())}toggleIsHide(){this.setIsHidden(!this.isHidden),this.render()}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){!this.cacheContext||[this.cacheContext,this.preCacheContext,this.renderCacheContext].forEach(e=>{e&&this.drawStartPoint(e,t)})}syncDrawCanvas({list:t,operation:e,params:i}){t.forEach(s=>{s&&e(__spreadValues({ctx:s},i))})}drawStartPoint(t,e){t.save(),t.beginPath(),t.strokeStyle=this.color,t.lineWidth=this.penSizeWithZoom,t.lineCap="round",t.lineJoin="round";const i=this.getOriginCoordinate(e);t.moveTo(i.x,i.y),this.startPoint=i}drawLine({ctx:t,prePoint:e,point:i}){t.beginPath(),t.save(),t.moveTo(e.x,e.y),t.lineTo(i.x,i.y),t.stroke(),t.restore()}drawLineTo({ctx:t,point:e}){t.lineTo(e.x,e.y),t.stroke()}scribbleOnImgByLine(t){const e=this.cacheContext,i=this.preCacheContext,s=this.renderCacheContext;!e||!s||!i||(this.pointList=this.pointList.slice(0,this.curIndexOnLine+1),this.pointList.push(t),this.pointList.length>1&&(this.curIndexOnLine=this.pointList.length-1,this.pointList.forEach((a,n)=>{if(n>0){const C=this.pointList[n-1];this.syncDrawCanvas({list:[e,i,s],operation:this.drawLine,params:{prePoint:C,point:a}})}})))}onScribbleMove(t){const e=this.getOriginCoordinate(t);if(this.lineActive){this.prePoint=e;return}t.buttons===1&&this.cacheContext&&this.startPoint&&this.syncDrawCanvas({list:[this.cacheContext,this.preCacheContext,this.renderCacheContext],operation:this.drawLineTo,params:{point:e}})}onScribbleEnd(t){if(!t||(t==null?void 0:t.button)===2)return;const e=this.getOriginCoordinate(t);this.lineActive?this.scribbleOnImgByLine(e):this.cacheContext&&this.renderCacheContext&&this.syncDrawCanvas({list:[this.cacheContext,this.renderCacheContext],operation:this.drawLineTo,params:{point:e}}),this.saveUrlIntoHistory()}saveUrlIntoHistory(){var t,e;(t=this.cacheContext)==null||t.closePath(),(e=this.cacheContext)==null||e.restore(),this.startPoint=void 0,this.fillPixelSawtooth(),this.history.pushHistory(this.cacheCanvasToDataUrl),this.filterCacheContext()}fillPixelSawtooth(t){var e;if(this.cacheContext&&this.renderCacheContext){const i=this.cacheContext.canvas.width,s=this.cacheContext.canvas.height,a=(e=this.renderCacheContext)==null?void 0:e.getImageData(0,0,i,s),n=lbUtils.ToolStyleUtils.toRGBAArr(this.color||"")||[],C=~~n[0],u=~~n[1],r=~~n[2];for(let h=0;h<a.height;h++)for(let o=0;o<a.width;o++){const l=(h*a.width+o)*4,v=a.data[l],f=a.data[l+1],d=a.data[l+2];(v!==0||f!==0||d!==0)&&(t?this.cacheContext.clearRect(o,h,1,1):(this.cacheContext.fillStyle=`rgba(${C},${u},${r},${255})`,this.cacheContext.fillRect(o,h,1,1)))}this.renderCacheContext.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height)}}filterCacheContext(){var t,e,i;if(((t=this.attributeLockList)==null?void 0:t.length)>0&&this.cacheContext&&this.preCacheContext){const s=this.cacheContext.canvas.width,a=this.cacheContext.canvas.height,n=(e=this.cacheContext)==null?void 0:e.getImageData(0,0,s,a),u=this.config.attributeList.filter(r=>!this.attributeLockList.includes(r.value)).map(r=>lbUtils.ToolStyleUtils.toRGBAArr((r==null?void 0:r.color)||"")||[]);if(n){for(let r=0;r<u.length;r++)for(let h=0;h<n.data.length/4;h++){const o=h*4,l=n.data[o],v=n.data[o+1],f=n.data[o+2],d=u[r]||[];~~d[0]===l&&~~d[1]===v&&~~d[2]===f&&(n.data[o]=0,n.data[o+1]=0,n.data[o+2]=0,n.data[o+3]=0)}(i=this.preCacheContext)==null||i.putImageData(n,0,0)}}}eraseArc(t){var e,i;if(this.cacheContext){const s=this.getOriginCoordinate(t);this.cacheContext.save(),this.cacheContext.beginPath(),this.cacheContext.arc(s.x,s.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(),this.preCacheContext&&(this.preCacheContext.save(),this.preCacheContext.beginPath(),this.preCacheContext.arc(s.x,s.y,this.penSizeWithZoom/2,0,Math.PI*2,!1),this.preCacheContext.clip(),this.preCacheContext.clearRect(0,0,this.preCacheContext.canvas.width,this.preCacheContext.canvas.height),(i=this.preCacheContext)==null||i.restore())}}onEraseStart(t){!this.cacheContext||t.buttons!==1||this.isHidden||(this.renderCacheContext&&this.drawStartPoint(this.renderCacheContext,t),this.eraseArc(t))}onEraseMove(t){if(!(!this.cacheContext||t.buttons!==1||this.isHidden)){if(this.renderCacheContext){const e=this.getOriginCoordinate(t);this.drawLineTo({ctx:this.renderCacheContext,point:e})}this.eraseArc(t)}}onEraseEnd(){var t;(t=this.renderCacheContext)==null||t.clearRect(0,0,this.renderCacheContext.canvas.width,this.renderCacheContext.canvas.height),this.startPoint=void 0,this.fillPixelSawtooth(!0),this.filterCacheContext()}exportData(){const t=this.cacheCanvasToDataUrl;return[[],this.basicImgInfo,{imgBase64:t}]}clearCacheCanvas(){var t,e,i;(t=this.cacheContext)==null||t.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height),(e=this.preCacheContext)==null||e.clearRect(0,0,this.preCacheContext.canvas.width,this.preCacheContext.canvas.height),(i=this.renderCacheContext)==null||i.clearRect(0,0,this.renderCacheContext.canvas.width,this.renderCacheContext.canvas.height),this.render()}clearResult(){this.curIndexOnLine=0,this.pointList=[],this.clearCacheCanvas(),this.history.pushHistory(this.cacheCanvasToDataUrl)}renderPoint(t){DrawUtils.drawCircleWithFill(this.canvas,this.coord,t,{color:this.color})}renderBorderPoint(t){DrawUtils.drawCircle(this.canvas,this.coord,t,{color:"black"})}drawLineSegment(){if(this.prePoint&&this.pointList.length>0){const i=[this.pointList[this.curIndexOnLine]].concat(this.prePoint).map(s=>this.getCoordinateUnderZoomByRotateFromImgPoint(s));this.drawStraightLine(i,{color:this.color,lineWidth:this.penSize,globalAlpha:.5})}}render(){var t;if(super.render(),!this.ctx||!this.cacheCanvas)return;this.lineActive&&(this.renderCursorLine(this.color),this.drawLineSegment());const e=this.penSize/2;if(this.isHidden){this.action===tool.EScribblePattern.Scribble&&this.renderPoint(e);return}this.ctx.save(),this.ctx.globalAlpha=.5;let i=this.cacheCanvas;((t=this.attributeLockList)==null?void 0:t.length)>0&&this.preCacheCanvas&&(i=this.preCacheCanvas),DrawUtils.drawImg(this.canvas,i,{zoom:this.zoom,currentPos:this.currentPos,rotate:this.rotate}),this.ctx.restore(),!(this.forbidOperation||this.forbidCursorLine)&&(this.action===tool.EScribblePattern.Erase?this.renderBorderPoint(e):this.renderPoint(e))}undo(){var t,e;if(this.lineActive&&(this.curIndexOnLine<1||((t=this.pointList)==null?void 0:t.length)<1))return;this.curIndexOnLine>0&&((e=this.pointList)==null?void 0:e.length)>0&&(this.curIndexOnLine-=1);const i=this.history.undo();i&&this.cacheCanvas&&this.updateUrl2CacheContext(i)}redo(){var t,e;this.curIndexOnLine<((t=this.pointList)==null?void 0:t.length)-1&&((e=this.pointList)==null?void 0:e.length)>0&&(this.curIndexOnLine+=1);const i=this.history.redo();i&&this.cacheCanvas&&this.updateUrl2CacheContext(i)}}module.exports=ScribbleTool;
+"use strict";var lbUtils=require("@labelbee/lb-utils"),AxisUtils=require("../../utils/tool/AxisUtils.js"),DrawUtils=require("../../utils/tool/DrawUtils.js"),tool=require("../../constant/tool.js"),CommonToolUtils=require("../../utils/tool/CommonToolUtils.js"),AttributeUtils=require("../../utils/tool/AttributeUtils.js"),keyCode=require("../../constant/keyCode.js"),basicToolOperation=require("./basicToolOperation.js"),__defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(c,t,e)=>t in c?__defProp(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e,__spreadValues=(c,t)=>{for(var e in t||(t={}))__hasOwnProp.call(t,e)&&__defNormalProp(c,e,t[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(t))__propIsEnum.call(t,e)&&__defNormalProp(c,e,t[e]);return c};const DEFAULT_PEN_SIZE=20,DEFAULT_COLOR="white";class ScribbleTool extends basicToolOperation.BasicToolOperation{constructor(t){super(t);this.toolName=tool.EToolName.ScribbleTool,this.action=tool.EScribblePattern.Scribble,this.getOriginCoordinate=i=>AxisUtils.default.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=>({[tool.EScribblePattern.Scribble]:{onMouseMove:this.onScribbleMove,onMouseUp:this.onScribbleEnd,onMouseDown:this.onScribbleStart},[tool.EScribblePattern.Erase]:{onMouseMove:this.onEraseMove,onMouseUp:this.onEraseEnd,onMouseDown:this.onEraseStart}})[this.action][i],this.setPattern=i=>{switch(this.action=i,i){case tool.EScribblePattern.Erase:{this.setCustomCursor(this.cursorErase);break}default:{this.setCustomCursor("none");break}}};var e;if(this.penSize=DEFAULT_PEN_SIZE,this.isHidden=!1,this.pointList=[],this.curIndexOnLine=0,((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===tool.EScribblePattern.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:DEFAULT_COLOR}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,this.render()}initCacheCanvas(t){if(this.cacheCanvas||!t)return;const{canvas:e,ctx:i}=lbUtils.ImgConversionUtils.createCanvas(t);this.cacheCanvas=e,this.cacheContext=i;const{canvas:s,ctx:r}=lbUtils.ImgConversionUtils.createCanvas(t);this.preCacheCanvas=s,this.preCacheContext=r;const{ctx:n}=lbUtils.ImgConversionUtils.createCanvas(t);this.renderCacheContext=n}updateCacheCanvasSize(t){this.cacheCanvas&&(this.cacheCanvas.width=t.width,this.cacheCanvas.height=t.height)}updateUrl2CacheContext(t){lbUtils.ImgConversionUtils.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.filterCacheContext(),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(!CommonToolUtils.hotkeyFilter(t))return;const{keyCode:e}=t,i=AttributeUtils.default.getAttributeByKeycode(e,this.config.attributeList);i!==void 0&&this.setDefaultAttribute(i),e===keyCode.Z&&!t.ctrlKey&&this.toggleIsHide(),t.ctrlKey&&(this.action===tool.EScribblePattern.Scribble&&(this.lineActive=!0),e===keyCode.Z&&(this.lineActive=!1,t.shiftKey?this.redo():this.undo()),this.render())}onKeyUp(t){super.onKeyUp(t),t.keyCode===keyCode.Ctrl&&(this.lineActive=!1,this.pointList=[],this.curIndexOnLine=0,this.render())}toggleIsHide(){this.setIsHidden(!this.isHidden),this.render()}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){!this.cacheContext||[this.cacheContext,this.preCacheContext,this.renderCacheContext].forEach(e=>{e&&this.drawStartPoint(e,t)})}syncDrawCanvas({list:t,operation:e,params:i}){t.forEach(s=>{s&&e(__spreadValues({ctx:s},i))})}drawStartPoint(t,e){t.save(),t.beginPath(),t.strokeStyle=this.color,t.lineWidth=this.penSizeWithZoom,t.lineCap="round",t.lineJoin="round";const i=this.getOriginCoordinate(e);t.moveTo(i.x,i.y),this.startPoint=i}drawLine({ctx:t,prePoint:e,point:i}){t.beginPath(),t.save(),t.moveTo(e.x,e.y),t.lineTo(i.x,i.y),t.stroke(),t.restore()}drawLineTo({ctx:t,point:e}){t.lineTo(e.x,e.y),t.stroke()}scribbleOnImgByLine(t){const e=this.cacheContext,i=this.preCacheContext,s=this.renderCacheContext;!e||!s||!i||(this.pointList=this.pointList.slice(0,this.curIndexOnLine+1),this.pointList.push(t),this.pointList.length>1&&(this.curIndexOnLine=this.pointList.length-1,this.pointList.forEach((r,n)=>{if(n>0){const C=this.pointList[n-1];this.syncDrawCanvas({list:[e,i,s],operation:this.drawLine,params:{prePoint:C,point:r}})}})))}onScribbleMove(t){const e=this.getOriginCoordinate(t);if(this.lineActive){this.prePoint=e;return}t.buttons===1&&this.cacheContext&&this.startPoint&&this.syncDrawCanvas({list:[this.cacheContext,this.preCacheContext,this.renderCacheContext],operation:this.drawLineTo,params:{point:e}})}onScribbleEnd(t){if(!t||(t==null?void 0:t.button)===2)return;const e=this.getOriginCoordinate(t);this.lineActive?this.scribbleOnImgByLine(e):this.cacheContext&&this.renderCacheContext&&this.syncDrawCanvas({list:[this.cacheContext,this.renderCacheContext],operation:this.drawLineTo,params:{point:e}}),this.saveUrlIntoHistory()}saveUrlIntoHistory(){var t,e;(t=this.cacheContext)==null||t.closePath(),(e=this.cacheContext)==null||e.restore(),this.startPoint=void 0,this.fillPixelSawtooth(),this.history.pushHistory(this.cacheCanvasToDataUrl),this.filterCacheContext()}fillPixelSawtooth(t){var e;if(this.cacheContext&&this.renderCacheContext){const i=this.cacheContext.canvas.width,s=this.cacheContext.canvas.height,r=(e=this.renderCacheContext)==null?void 0:e.getImageData(0,0,i,s),n=lbUtils.ToolStyleUtils.toRGBAArr(this.color||"")||[],C=~~n[0],u=~~n[1],a=~~n[2];for(let h=0;h<r.height;h++)for(let o=0;o<r.width;o++){const l=(h*r.width+o)*4,v=r.data[l],f=r.data[l+1],d=r.data[l+2];(v!==0||f!==0||d!==0)&&(t?this.cacheContext.clearRect(o,h,1,1):(this.cacheContext.fillStyle=`rgba(${C},${u},${a},${255})`,this.cacheContext.fillRect(o,h,1,1)))}this.renderCacheContext.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height)}}filterCacheContext(){var t,e,i;if(((t=this.attributeLockList)==null?void 0:t.length)>0&&this.cacheContext&&this.preCacheContext){const s=this.cacheContext.canvas.width,r=this.cacheContext.canvas.height,n=(e=this.cacheContext)==null?void 0:e.getImageData(0,0,s,r),u=this.config.attributeList.filter(a=>!this.attributeLockList.includes(a.value)).map(a=>lbUtils.ToolStyleUtils.toRGBAArr((a==null?void 0:a.color)||"")||[]);if(n){for(let a=0;a<u.length;a++)for(let h=0;h<n.data.length/4;h++){const o=h*4,l=n.data[o],v=n.data[o+1],f=n.data[o+2],d=u[a]||[];~~d[0]===l&&~~d[1]===v&&~~d[2]===f&&(n.data[o]=0,n.data[o+1]=0,n.data[o+2]=0,n.data[o+3]=0)}(i=this.preCacheContext)==null||i.putImageData(n,0,0)}}}eraseArc(t){var e,i;if(this.cacheContext){const s=this.getOriginCoordinate(t);this.cacheContext.save(),this.cacheContext.beginPath(),this.cacheContext.arc(s.x,s.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(),this.preCacheContext&&(this.preCacheContext.save(),this.preCacheContext.beginPath(),this.preCacheContext.arc(s.x,s.y,this.penSizeWithZoom/2,0,Math.PI*2,!1),this.preCacheContext.clip(),this.preCacheContext.clearRect(0,0,this.preCacheContext.canvas.width,this.preCacheContext.canvas.height),(i=this.preCacheContext)==null||i.restore())}}onEraseStart(t){!this.cacheContext||t.buttons!==1||this.isHidden||(this.renderCacheContext&&this.drawStartPoint(this.renderCacheContext,t),this.eraseArc(t))}onEraseMove(t){if(!(!this.cacheContext||t.buttons!==1||this.isHidden)){if(this.renderCacheContext){const e=this.getOriginCoordinate(t);this.drawLineTo({ctx:this.renderCacheContext,point:e})}this.eraseArc(t)}}onEraseEnd(t){var e,i;if(this.renderCacheContext){const s=this.getOriginCoordinate(t);this.drawLineTo({ctx:this.renderCacheContext,point:s})}(e=this.renderCacheContext)==null||e.closePath(),(i=this.renderCacheContext)==null||i.restore(),this.startPoint=void 0,this.fillPixelSawtooth(!0),this.filterCacheContext()}exportData(){const t=this.cacheCanvasToDataUrl;return[[],this.basicImgInfo,{imgBase64:t}]}clearCacheCanvas(){var t,e,i;(t=this.cacheContext)==null||t.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height),(e=this.preCacheContext)==null||e.clearRect(0,0,this.preCacheContext.canvas.width,this.preCacheContext.canvas.height),(i=this.renderCacheContext)==null||i.clearRect(0,0,this.renderCacheContext.canvas.width,this.renderCacheContext.canvas.height),this.render()}clearResult(){this.curIndexOnLine=0,this.pointList=[],this.clearCacheCanvas(),this.history.pushHistory(this.cacheCanvasToDataUrl)}renderPoint(t){DrawUtils.drawCircleWithFill(this.canvas,this.coord,t,{color:this.color})}renderBorderPoint(t){DrawUtils.drawCircle(this.canvas,this.coord,t,{color:"black"})}drawLineSegment(){if(this.prePoint&&this.pointList.length>0){const i=[this.pointList[this.curIndexOnLine]].concat(this.prePoint).map(s=>this.getCoordinateUnderZoomByRotateFromImgPoint(s));this.drawStraightLine(i,{color:this.color,lineWidth:this.penSize,globalAlpha:.5})}}render(){var t;if(super.render(),!this.ctx||!this.cacheCanvas)return;this.lineActive&&(this.renderCursorLine(this.color),this.drawLineSegment());const e=this.penSize/2;if(this.isHidden){this.action===tool.EScribblePattern.Scribble&&this.renderPoint(e);return}this.ctx.save(),this.ctx.globalAlpha=.5;let i=this.cacheCanvas;((t=this.attributeLockList)==null?void 0:t.length)>0&&this.preCacheCanvas&&(i=this.preCacheCanvas),DrawUtils.drawImg(this.canvas,i,{zoom:this.zoom,currentPos:this.currentPos,rotate:this.rotate}),this.ctx.restore(),!(this.forbidOperation||this.forbidCursorLine)&&(this.action===tool.EScribblePattern.Erase?this.renderBorderPoint(e):this.renderPoint(e))}undo(){var t,e;if(this.lineActive&&(this.curIndexOnLine<1||((t=this.pointList)==null?void 0:t.length)<1))return;this.curIndexOnLine>0&&((e=this.pointList)==null?void 0:e.length)>0&&(this.curIndexOnLine-=1);const i=this.history.undo();i&&this.cacheCanvas&&this.updateUrl2CacheContext(i)}redo(){var t,e;this.curIndexOnLine<((t=this.pointList)==null?void 0:t.length)-1&&((e=this.pointList)==null?void 0:e.length)>0&&(this.curIndexOnLine+=1);const i=this.history.redo();i&&this.cacheCanvas&&this.updateUrl2CacheContext(i)}}module.exports=ScribbleTool;

package/dist/types/core/toolOperation/ScribbleTool.d.ts

@@ -50,7 +50,7 @@ declare class ScribbleTool extends BasicToolOperation {
     onMouseDown: (e: MouseEvent) => undefined;
     onMouseMove: (e: MouseEvent) => undefined;
     onMouseUp: (e: MouseEvent) => undefined;
-    mouseEvents: (eventType: 'onMouseMove' | 'onMouseUp' | 'onMouseDown') => ((e?: MouseEvent) => void) | ((e: MouseEvent) => void) | ((e: MouseEvent) => void) | ((e: MouseEvent) => void) | (() => void) | ((e: MouseEvent) => void);
+    mouseEvents: (eventType: 'onMouseMove' | 'onMouseUp' | 'onMouseDown') => ((e?: MouseEvent) => void) | ((e: MouseEvent) => void) | ((e: MouseEvent) => void) | ((e: MouseEvent) => void) | ((e: MouseEvent) => void) | ((e: MouseEvent) => void);
     setPattern: (pattern: EScribblePattern) => void;
     setDefaultAttribute(attributeValue: string): void;
     clearStatusAfterLeave(): void;
@@ -69,7 +69,7 @@ declare class ScribbleTool extends BasicToolOperation {
     eraseArc(e: MouseEvent): void;
     onEraseStart(e: MouseEvent): void;
     onEraseMove(e: MouseEvent): void;
-    onEraseEnd(): void;
+    onEraseEnd(e: MouseEvent): void;
     exportData(): any[];
     clearCacheCanvas(): void;
     clearResult(): void;

package/es/core/toolOperation/ScribbleTool.js

@@ -1 +1 @@
-import{ImgConversionUtils as f,ToolStyleUtils as m}from"@labelbee/lb-utils";import S from"../../utils/tool/AxisUtils.js";import g from"../../utils/tool/DrawUtils.js";import{EToolName as y,EScribblePattern as l}from"../../constant/tool.js";import P from"../../utils/tool/CommonToolUtils.js";import I from"../../utils/tool/AttributeUtils.js";import b from"../../constant/keyCode.js";import{BasicToolOperation as _}from"./basicToolOperation.js";var U=Object.defineProperty,L=Object.getOwnPropertySymbols,A=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,w=(c,t,e)=>t in c?U(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e,E=(c,t)=>{for(var e in t||(t={}))A.call(t,e)&&w(c,e,t[e]);if(L)for(var e of L(t))O.call(t,e)&&w(c,e,t[e]);return c};const M=20,D="white";class T extends _{constructor(t){super(t);this.toolName=y.ScribbleTool,this.action=l.Scribble,this.getOriginCoordinate=i=>S.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=>({[l.Scribble]:{onMouseMove:this.onScribbleMove,onMouseUp:this.onScribbleEnd,onMouseDown:this.onScribbleStart},[l.Erase]:{onMouseMove:this.onEraseMove,onMouseUp:this.onEraseEnd,onMouseDown:this.onEraseStart}})[this.action][i],this.setPattern=i=>{switch(this.action=i,i){case l.Erase:{this.setCustomCursor(this.cursorErase);break}default:{this.setCustomCursor("none");break}}};var e;if(this.penSize=M,this.isHidden=!1,this.pointList=[],this.curIndexOnLine=0,((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===l.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:D}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,this.render()}initCacheCanvas(t){if(this.cacheCanvas||!t)return;const{canvas:e,ctx:i}=f.createCanvas(t);this.cacheCanvas=e,this.cacheContext=i;const{canvas:s,ctx:a}=f.createCanvas(t);this.preCacheCanvas=s,this.preCacheContext=a;const{ctx:n}=f.createCanvas(t);this.renderCacheContext=n}updateCacheCanvasSize(t){this.cacheCanvas&&(this.cacheCanvas.width=t.width,this.cacheCanvas.height=t.height)}updateUrl2CacheContext(t){f.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.filterCacheContext(),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(!P.hotkeyFilter(t))return;const{keyCode:e}=t,i=I.getAttributeByKeycode(e,this.config.attributeList);i!==void 0&&this.setDefaultAttribute(i),e===b.Z&&!t.ctrlKey&&this.toggleIsHide(),t.ctrlKey&&(this.action===l.Scribble&&(this.lineActive=!0),e===b.Z&&(this.lineActive=!1,t.shiftKey?this.redo():this.undo()),this.render())}onKeyUp(t){super.onKeyUp(t),t.keyCode===b.Ctrl&&(this.lineActive=!1,this.pointList=[],this.curIndexOnLine=0,this.render())}toggleIsHide(){this.setIsHidden(!this.isHidden),this.render()}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){!this.cacheContext||[this.cacheContext,this.preCacheContext,this.renderCacheContext].forEach(e=>{e&&this.drawStartPoint(e,t)})}syncDrawCanvas({list:t,operation:e,params:i}){t.forEach(s=>{s&&e(E({ctx:s},i))})}drawStartPoint(t,e){t.save(),t.beginPath(),t.strokeStyle=this.color,t.lineWidth=this.penSizeWithZoom,t.lineCap="round",t.lineJoin="round";const i=this.getOriginCoordinate(e);t.moveTo(i.x,i.y),this.startPoint=i}drawLine({ctx:t,prePoint:e,point:i}){t.beginPath(),t.save(),t.moveTo(e.x,e.y),t.lineTo(i.x,i.y),t.stroke(),t.restore()}drawLineTo({ctx:t,point:e}){t.lineTo(e.x,e.y),t.stroke()}scribbleOnImgByLine(t){const e=this.cacheContext,i=this.preCacheContext,s=this.renderCacheContext;!e||!s||!i||(this.pointList=this.pointList.slice(0,this.curIndexOnLine+1),this.pointList.push(t),this.pointList.length>1&&(this.curIndexOnLine=this.pointList.length-1,this.pointList.forEach((a,n)=>{if(n>0){const u=this.pointList[n-1];this.syncDrawCanvas({list:[e,i,s],operation:this.drawLine,params:{prePoint:u,point:a}})}})))}onScribbleMove(t){const e=this.getOriginCoordinate(t);if(this.lineActive){this.prePoint=e;return}t.buttons===1&&this.cacheContext&&this.startPoint&&this.syncDrawCanvas({list:[this.cacheContext,this.preCacheContext,this.renderCacheContext],operation:this.drawLineTo,params:{point:e}})}onScribbleEnd(t){if(!t||(t==null?void 0:t.button)===2)return;const e=this.getOriginCoordinate(t);this.lineActive?this.scribbleOnImgByLine(e):this.cacheContext&&this.renderCacheContext&&this.syncDrawCanvas({list:[this.cacheContext,this.renderCacheContext],operation:this.drawLineTo,params:{point:e}}),this.saveUrlIntoHistory()}saveUrlIntoHistory(){var t,e;(t=this.cacheContext)==null||t.closePath(),(e=this.cacheContext)==null||e.restore(),this.startPoint=void 0,this.fillPixelSawtooth(),this.history.pushHistory(this.cacheCanvasToDataUrl),this.filterCacheContext()}fillPixelSawtooth(t){var e;if(this.cacheContext&&this.renderCacheContext){const i=this.cacheContext.canvas.width,s=this.cacheContext.canvas.height,a=(e=this.renderCacheContext)==null?void 0:e.getImageData(0,0,i,s),n=m.toRGBAArr(this.color||"")||[],u=~~n[0],v=~~n[1],r=~~n[2];for(let h=0;h<a.height;h++)for(let o=0;o<a.width;o++){const d=(h*a.width+o)*4,p=a.data[d],x=a.data[d+1],C=a.data[d+2];(p!==0||x!==0||C!==0)&&(t?this.cacheContext.clearRect(o,h,1,1):(this.cacheContext.fillStyle=`rgba(${u},${v},${r},${255})`,this.cacheContext.fillRect(o,h,1,1)))}this.renderCacheContext.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height)}}filterCacheContext(){var t,e,i;if(((t=this.attributeLockList)==null?void 0:t.length)>0&&this.cacheContext&&this.preCacheContext){const s=this.cacheContext.canvas.width,a=this.cacheContext.canvas.height,n=(e=this.cacheContext)==null?void 0:e.getImageData(0,0,s,a),v=this.config.attributeList.filter(r=>!this.attributeLockList.includes(r.value)).map(r=>m.toRGBAArr((r==null?void 0:r.color)||"")||[]);if(n){for(let r=0;r<v.length;r++)for(let h=0;h<n.data.length/4;h++){const o=h*4,d=n.data[o],p=n.data[o+1],x=n.data[o+2],C=v[r]||[];~~C[0]===d&&~~C[1]===p&&~~C[2]===x&&(n.data[o]=0,n.data[o+1]=0,n.data[o+2]=0,n.data[o+3]=0)}(i=this.preCacheContext)==null||i.putImageData(n,0,0)}}}eraseArc(t){var e,i;if(this.cacheContext){const s=this.getOriginCoordinate(t);this.cacheContext.save(),this.cacheContext.beginPath(),this.cacheContext.arc(s.x,s.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(),this.preCacheContext&&(this.preCacheContext.save(),this.preCacheContext.beginPath(),this.preCacheContext.arc(s.x,s.y,this.penSizeWithZoom/2,0,Math.PI*2,!1),this.preCacheContext.clip(),this.preCacheContext.clearRect(0,0,this.preCacheContext.canvas.width,this.preCacheContext.canvas.height),(i=this.preCacheContext)==null||i.restore())}}onEraseStart(t){!this.cacheContext||t.buttons!==1||this.isHidden||(this.renderCacheContext&&this.drawStartPoint(this.renderCacheContext,t),this.eraseArc(t))}onEraseMove(t){if(!(!this.cacheContext||t.buttons!==1||this.isHidden)){if(this.renderCacheContext){const e=this.getOriginCoordinate(t);this.drawLineTo({ctx:this.renderCacheContext,point:e})}this.eraseArc(t)}}onEraseEnd(){var t;(t=this.renderCacheContext)==null||t.clearRect(0,0,this.renderCacheContext.canvas.width,this.renderCacheContext.canvas.height),this.startPoint=void 0,this.fillPixelSawtooth(!0),this.filterCacheContext()}exportData(){const t=this.cacheCanvasToDataUrl;return[[],this.basicImgInfo,{imgBase64:t}]}clearCacheCanvas(){var t,e,i;(t=this.cacheContext)==null||t.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height),(e=this.preCacheContext)==null||e.clearRect(0,0,this.preCacheContext.canvas.width,this.preCacheContext.canvas.height),(i=this.renderCacheContext)==null||i.clearRect(0,0,this.renderCacheContext.canvas.width,this.renderCacheContext.canvas.height),this.render()}clearResult(){this.curIndexOnLine=0,this.pointList=[],this.clearCacheCanvas(),this.history.pushHistory(this.cacheCanvasToDataUrl)}renderPoint(t){g.drawCircleWithFill(this.canvas,this.coord,t,{color:this.color})}renderBorderPoint(t){g.drawCircle(this.canvas,this.coord,t,{color:"black"})}drawLineSegment(){if(this.prePoint&&this.pointList.length>0){const i=[this.pointList[this.curIndexOnLine]].concat(this.prePoint).map(s=>this.getCoordinateUnderZoomByRotateFromImgPoint(s));this.drawStraightLine(i,{color:this.color,lineWidth:this.penSize,globalAlpha:.5})}}render(){var t;if(super.render(),!this.ctx||!this.cacheCanvas)return;this.lineActive&&(this.renderCursorLine(this.color),this.drawLineSegment());const e=this.penSize/2;if(this.isHidden){this.action===l.Scribble&&this.renderPoint(e);return}this.ctx.save(),this.ctx.globalAlpha=.5;let i=this.cacheCanvas;((t=this.attributeLockList)==null?void 0:t.length)>0&&this.preCacheCanvas&&(i=this.preCacheCanvas),g.drawImg(this.canvas,i,{zoom:this.zoom,currentPos:this.currentPos,rotate:this.rotate}),this.ctx.restore(),!(this.forbidOperation||this.forbidCursorLine)&&(this.action===l.Erase?this.renderBorderPoint(e):this.renderPoint(e))}undo(){var t,e;if(this.lineActive&&(this.curIndexOnLine<1||((t=this.pointList)==null?void 0:t.length)<1))return;this.curIndexOnLine>0&&((e=this.pointList)==null?void 0:e.length)>0&&(this.curIndexOnLine-=1);const i=this.history.undo();i&&this.cacheCanvas&&this.updateUrl2CacheContext(i)}redo(){var t,e;this.curIndexOnLine<((t=this.pointList)==null?void 0:t.length)-1&&((e=this.pointList)==null?void 0:e.length)>0&&(this.curIndexOnLine+=1);const i=this.history.redo();i&&this.cacheCanvas&&this.updateUrl2CacheContext(i)}}export{T as default};
+import{ImgConversionUtils as f,ToolStyleUtils as m}from"@labelbee/lb-utils";import S from"../../utils/tool/AxisUtils.js";import g from"../../utils/tool/DrawUtils.js";import{EToolName as y,EScribblePattern as l}from"../../constant/tool.js";import P from"../../utils/tool/CommonToolUtils.js";import I from"../../utils/tool/AttributeUtils.js";import b from"../../constant/keyCode.js";import{BasicToolOperation as _}from"./basicToolOperation.js";var O=Object.defineProperty,L=Object.getOwnPropertySymbols,U=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable,w=(c,t,e)=>t in c?O(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e,E=(c,t)=>{for(var e in t||(t={}))U.call(t,e)&&w(c,e,t[e]);if(L)for(var e of L(t))A.call(t,e)&&w(c,e,t[e]);return c};const M=20,D="white";class T extends _{constructor(t){super(t);this.toolName=y.ScribbleTool,this.action=l.Scribble,this.getOriginCoordinate=i=>S.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=>({[l.Scribble]:{onMouseMove:this.onScribbleMove,onMouseUp:this.onScribbleEnd,onMouseDown:this.onScribbleStart},[l.Erase]:{onMouseMove:this.onEraseMove,onMouseUp:this.onEraseEnd,onMouseDown:this.onEraseStart}})[this.action][i],this.setPattern=i=>{switch(this.action=i,i){case l.Erase:{this.setCustomCursor(this.cursorErase);break}default:{this.setCustomCursor("none");break}}};var e;if(this.penSize=M,this.isHidden=!1,this.pointList=[],this.curIndexOnLine=0,((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===l.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:D}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,this.render()}initCacheCanvas(t){if(this.cacheCanvas||!t)return;const{canvas:e,ctx:i}=f.createCanvas(t);this.cacheCanvas=e,this.cacheContext=i;const{canvas:s,ctx:a}=f.createCanvas(t);this.preCacheCanvas=s,this.preCacheContext=a;const{ctx:n}=f.createCanvas(t);this.renderCacheContext=n}updateCacheCanvasSize(t){this.cacheCanvas&&(this.cacheCanvas.width=t.width,this.cacheCanvas.height=t.height)}updateUrl2CacheContext(t){f.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.filterCacheContext(),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(!P.hotkeyFilter(t))return;const{keyCode:e}=t,i=I.getAttributeByKeycode(e,this.config.attributeList);i!==void 0&&this.setDefaultAttribute(i),e===b.Z&&!t.ctrlKey&&this.toggleIsHide(),t.ctrlKey&&(this.action===l.Scribble&&(this.lineActive=!0),e===b.Z&&(this.lineActive=!1,t.shiftKey?this.redo():this.undo()),this.render())}onKeyUp(t){super.onKeyUp(t),t.keyCode===b.Ctrl&&(this.lineActive=!1,this.pointList=[],this.curIndexOnLine=0,this.render())}toggleIsHide(){this.setIsHidden(!this.isHidden),this.render()}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){!this.cacheContext||[this.cacheContext,this.preCacheContext,this.renderCacheContext].forEach(e=>{e&&this.drawStartPoint(e,t)})}syncDrawCanvas({list:t,operation:e,params:i}){t.forEach(s=>{s&&e(E({ctx:s},i))})}drawStartPoint(t,e){t.save(),t.beginPath(),t.strokeStyle=this.color,t.lineWidth=this.penSizeWithZoom,t.lineCap="round",t.lineJoin="round";const i=this.getOriginCoordinate(e);t.moveTo(i.x,i.y),this.startPoint=i}drawLine({ctx:t,prePoint:e,point:i}){t.beginPath(),t.save(),t.moveTo(e.x,e.y),t.lineTo(i.x,i.y),t.stroke(),t.restore()}drawLineTo({ctx:t,point:e}){t.lineTo(e.x,e.y),t.stroke()}scribbleOnImgByLine(t){const e=this.cacheContext,i=this.preCacheContext,s=this.renderCacheContext;!e||!s||!i||(this.pointList=this.pointList.slice(0,this.curIndexOnLine+1),this.pointList.push(t),this.pointList.length>1&&(this.curIndexOnLine=this.pointList.length-1,this.pointList.forEach((a,n)=>{if(n>0){const u=this.pointList[n-1];this.syncDrawCanvas({list:[e,i,s],operation:this.drawLine,params:{prePoint:u,point:a}})}})))}onScribbleMove(t){const e=this.getOriginCoordinate(t);if(this.lineActive){this.prePoint=e;return}t.buttons===1&&this.cacheContext&&this.startPoint&&this.syncDrawCanvas({list:[this.cacheContext,this.preCacheContext,this.renderCacheContext],operation:this.drawLineTo,params:{point:e}})}onScribbleEnd(t){if(!t||(t==null?void 0:t.button)===2)return;const e=this.getOriginCoordinate(t);this.lineActive?this.scribbleOnImgByLine(e):this.cacheContext&&this.renderCacheContext&&this.syncDrawCanvas({list:[this.cacheContext,this.renderCacheContext],operation:this.drawLineTo,params:{point:e}}),this.saveUrlIntoHistory()}saveUrlIntoHistory(){var t,e;(t=this.cacheContext)==null||t.closePath(),(e=this.cacheContext)==null||e.restore(),this.startPoint=void 0,this.fillPixelSawtooth(),this.history.pushHistory(this.cacheCanvasToDataUrl),this.filterCacheContext()}fillPixelSawtooth(t){var e;if(this.cacheContext&&this.renderCacheContext){const i=this.cacheContext.canvas.width,s=this.cacheContext.canvas.height,a=(e=this.renderCacheContext)==null?void 0:e.getImageData(0,0,i,s),n=m.toRGBAArr(this.color||"")||[],u=~~n[0],v=~~n[1],r=~~n[2];for(let h=0;h<a.height;h++)for(let o=0;o<a.width;o++){const d=(h*a.width+o)*4,p=a.data[d],x=a.data[d+1],C=a.data[d+2];(p!==0||x!==0||C!==0)&&(t?this.cacheContext.clearRect(o,h,1,1):(this.cacheContext.fillStyle=`rgba(${u},${v},${r},${255})`,this.cacheContext.fillRect(o,h,1,1)))}this.renderCacheContext.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height)}}filterCacheContext(){var t,e,i;if(((t=this.attributeLockList)==null?void 0:t.length)>0&&this.cacheContext&&this.preCacheContext){const s=this.cacheContext.canvas.width,a=this.cacheContext.canvas.height,n=(e=this.cacheContext)==null?void 0:e.getImageData(0,0,s,a),v=this.config.attributeList.filter(r=>!this.attributeLockList.includes(r.value)).map(r=>m.toRGBAArr((r==null?void 0:r.color)||"")||[]);if(n){for(let r=0;r<v.length;r++)for(let h=0;h<n.data.length/4;h++){const o=h*4,d=n.data[o],p=n.data[o+1],x=n.data[o+2],C=v[r]||[];~~C[0]===d&&~~C[1]===p&&~~C[2]===x&&(n.data[o]=0,n.data[o+1]=0,n.data[o+2]=0,n.data[o+3]=0)}(i=this.preCacheContext)==null||i.putImageData(n,0,0)}}}eraseArc(t){var e,i;if(this.cacheContext){const s=this.getOriginCoordinate(t);this.cacheContext.save(),this.cacheContext.beginPath(),this.cacheContext.arc(s.x,s.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(),this.preCacheContext&&(this.preCacheContext.save(),this.preCacheContext.beginPath(),this.preCacheContext.arc(s.x,s.y,this.penSizeWithZoom/2,0,Math.PI*2,!1),this.preCacheContext.clip(),this.preCacheContext.clearRect(0,0,this.preCacheContext.canvas.width,this.preCacheContext.canvas.height),(i=this.preCacheContext)==null||i.restore())}}onEraseStart(t){!this.cacheContext||t.buttons!==1||this.isHidden||(this.renderCacheContext&&this.drawStartPoint(this.renderCacheContext,t),this.eraseArc(t))}onEraseMove(t){if(!(!this.cacheContext||t.buttons!==1||this.isHidden)){if(this.renderCacheContext){const e=this.getOriginCoordinate(t);this.drawLineTo({ctx:this.renderCacheContext,point:e})}this.eraseArc(t)}}onEraseEnd(t){var e,i;if(this.renderCacheContext){const s=this.getOriginCoordinate(t);this.drawLineTo({ctx:this.renderCacheContext,point:s})}(e=this.renderCacheContext)==null||e.closePath(),(i=this.renderCacheContext)==null||i.restore(),this.startPoint=void 0,this.fillPixelSawtooth(!0),this.filterCacheContext()}exportData(){const t=this.cacheCanvasToDataUrl;return[[],this.basicImgInfo,{imgBase64:t}]}clearCacheCanvas(){var t,e,i;(t=this.cacheContext)==null||t.clearRect(0,0,this.cacheContext.canvas.width,this.cacheContext.canvas.height),(e=this.preCacheContext)==null||e.clearRect(0,0,this.preCacheContext.canvas.width,this.preCacheContext.canvas.height),(i=this.renderCacheContext)==null||i.clearRect(0,0,this.renderCacheContext.canvas.width,this.renderCacheContext.canvas.height),this.render()}clearResult(){this.curIndexOnLine=0,this.pointList=[],this.clearCacheCanvas(),this.history.pushHistory(this.cacheCanvasToDataUrl)}renderPoint(t){g.drawCircleWithFill(this.canvas,this.coord,t,{color:this.color})}renderBorderPoint(t){g.drawCircle(this.canvas,this.coord,t,{color:"black"})}drawLineSegment(){if(this.prePoint&&this.pointList.length>0){const i=[this.pointList[this.curIndexOnLine]].concat(this.prePoint).map(s=>this.getCoordinateUnderZoomByRotateFromImgPoint(s));this.drawStraightLine(i,{color:this.color,lineWidth:this.penSize,globalAlpha:.5})}}render(){var t;if(super.render(),!this.ctx||!this.cacheCanvas)return;this.lineActive&&(this.renderCursorLine(this.color),this.drawLineSegment());const e=this.penSize/2;if(this.isHidden){this.action===l.Scribble&&this.renderPoint(e);return}this.ctx.save(),this.ctx.globalAlpha=.5;let i=this.cacheCanvas;((t=this.attributeLockList)==null?void 0:t.length)>0&&this.preCacheCanvas&&(i=this.preCacheCanvas),g.drawImg(this.canvas,i,{zoom:this.zoom,currentPos:this.currentPos,rotate:this.rotate}),this.ctx.restore(),!(this.forbidOperation||this.forbidCursorLine)&&(this.action===l.Erase?this.renderBorderPoint(e):this.renderPoint(e))}undo(){var t,e;if(this.lineActive&&(this.curIndexOnLine<1||((t=this.pointList)==null?void 0:t.length)<1))return;this.curIndexOnLine>0&&((e=this.pointList)==null?void 0:e.length)>0&&(this.curIndexOnLine-=1);const i=this.history.undo();i&&this.cacheCanvas&&this.updateUrl2CacheContext(i)}redo(){var t,e;this.curIndexOnLine<((t=this.pointList)==null?void 0:t.length)-1&&((e=this.pointList)==null?void 0:e.length)>0&&(this.curIndexOnLine+=1);const i=this.history.redo();i&&this.cacheCanvas&&this.updateUrl2CacheContext(i)}}export{T as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-annotation",
-  "version": "1.27.0-alpha.2",
+  "version": "1.27.0-alpha.4",
   "description": "Annotation tool collection",
   "keywords": [
     "annotation",