ccc-react-paint/ccc-paint-es.min.js

a simple paint tool for ccc

import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import n,{createContext as o,useState as a,useRef as i,useContext as s,useEffect as c,isValidElement as l,PureComponent as p,Component as u,useMemo as h,useImperativeHandle as d}from"react";import{Input as f,Slider as v,Select as g}from"antd";import{LoadingOutlined as b}from"@ant-design/icons";import x from"prop-types";var y=function(e,t){return y=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},y(e,t)};function m(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}y(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var w=function(){return w=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},w.apply(this,arguments)};function k(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{c(n.next(e))}catch(e){a(e)}}function s(e){try{c(n.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,s)}c((n=n.apply(e,t||[])).next())}))}function C(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(a){return function(s){return function(a){if(r)throw new TypeError("Generator is already executing.");for(;i;)try{if(r=1,n&&(o=2&a[0]?n.return:a[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;switch(n=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e],n=0}finally{r=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,s])}}}function E(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var S,_,O,j,A;E(".all-canvas{height:100%;overflow:hidden;position:relative;width:100%}.ccc-paint-canvas{-webkit-transform-origin:left top;transform-origin:left top}.canvas-text{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:auto;z-index:-1}.text-show{display:none!important}.text-box{border:1px solid blue;float:left;line-height:1;margin:0;padding:0;pointer-events:painted;position:absolute;vertical-align:top!important;word-break:break-all;z-index:-1}"),function(e){e[e.PEN=0]="PEN",e[e.COLOR_FILL=1]="COLOR_FILL",e[e.TEXT=2]="TEXT",e[e.COLOR_EXTRACT=3]="COLOR_EXTRACT",e[e.ERASER=4]="ERASER",e[e.MAGNIFYING=5]="MAGNIFYING",e[e.SHAPE=6]="SHAPE"}(S||(S={})),function(e){e[e.LINE=0]="LINE",e[e.RECT=1]="RECT",e[e.CIRCLE=2]="CIRCLE",e[e.RHOMBUS=3]="RHOMBUS",e[e.TRIANGLE=4]="TRIANGLE",e[e.PENTAGON=5]="PENTAGON",e[e.SEXANGLE=6]="SEXANGLE",e[e.ARROW_TOP=7]="ARROW_TOP",e[e.ARROW_RIGHT=8]="ARROW_RIGHT",e[e.ARROW_DOWN=9]="ARROW_DOWN",e[e.ARROW_LEFT=10]="ARROW_LEFT",e[e.FOUR_STAR=11]="FOUR_STAR"}(_||(_={})),function(e){e[e.SOLID=0]="SOLID",e[e.DOTTED=1]="DOTTED"}(O||(O={})),function(e){e[e.THIN=0]="THIN",e[e.MIDDLE=1]="MIDDLE",e[e.BOLD=2]="BOLD",e[e.MAXBOLD=3]="MAXBOLD",e[e.LINESIZE=4]="LINESIZE"}(j||(j={})),function(e){e[e.MAIN=0]="MAIN",e[e.SUB=1]="SUB"}(A||(A={}));var L=function(e){if(z.strawFlag&&e){var t=D(z.ctx,e.x,e.y);z.strawColor=t,z.strawFlag=!1}},T=function(e,t,r,n){var o=e.getBoundingClientRect(),a=z.currentScale||1;return n?{x:(n.x-o.left)/a,y:(n.y-o.top)/a}:t?{x:(t.clientX-o.left)/a,y:(t.clientY-o.top)/a}:{x:0,y:0}},R=function(e,t){return{x:t.touches[0].pageX-e.offsetLeft,y:t.touches[0].pageY-e.offsetTop}},D=function(e,t,r){var n,o,a,i,s,c,l=e.getImageData(t,r,1,1).data;return n=l[0],o=l[1],a=l[2],i=l[3],c="#"+(s=function(e){var t=e.toString(16);return 1==t.length?"0"+t:t})(n)+s(o)+s(a),i?c+s(i):c},M=function(e){return!z.showArea||z.showArea.find((function(t){return t[0]===e.x&&t[1]===e.y}))},z=function(){function e(){this.currentScale=1,this.strawFlag=!1}return e.prototype.onMouseDown=function(e){},e.prototype.onMouseMove=function(e){},e.prototype.onMouseUp=function(e){},e.prototype.onTouchStart=function(e){},e.prototype.onTouchMove=function(e){},e.prototype.onTouchEnd=function(e){},e.prototype.onKeyDown=function(e){},e.lineWidthFactor=1,e.fillColormainColor="black",e.subColor="white",e.strawColor="",e.fillColor="#2d2d2d",e.textList={},e.OptPixel={stepX:2,stepY:2,EMPTY_COLOR:"#fff",size:2,penHeight:2},e.isPixel=!1,e.PixelBoxs=[],e.zoom={scaleX:1,scaleY:1},e}(),P=function(e){return"".concat(e>15?"":0).concat(e.toString(16))},B=function(e){var t=e.slice(1),r=1;3===t.length&&(t="".concat(t[0]).concat(t[0]).concat(t[1]).concat(t[1]).concat(t[2]).concat(t[2])),8===t.length&&(r=parseInt(t.slice(6),16)/255,t=t.slice(0,6));var n=parseInt(t,16);return{r:n>>16&255,g:n>>8&255,b:255&n,a:r}},F=function(e){if(e.startsWith("#"))return B(e);if(e.startsWith("rgb"))return function(e){var t=e.match(/(\d(\.\d+)?)+/g)||[],r=t.map((function(e){return parseInt(e,10)}));return{r:r[0],g:r[1],b:r[2],a:parseFloat(t[3])}}(e);if("transparent"===e)return B("#00000000");throw new Error("color string error: ".concat(e))},N=function(e){return function(e,t){void 0===t&&(t=1e4);var r=e.r,n=e.g,o=e.b,a=e.a,i=void 0===a?1:a;return"rgba(".concat(r,",").concat(n,",").concat(o,",").concat(Math.floor(i*t)/t,")")}(F(e))},I=function(e){return e*e},H=function(e,t){return I(e.x-t.x)+I(e.y-t.y)},U=function(e,t){for(var r=e.canvas.width,n=e.canvas.height,o=t||e.getImageData(0,0,r,n).data,a=[],i=0;i<r;i+=z.OptPixel.size)for(var s=0;s<n;s+=z.OptPixel.size){var c=4*(p=s*r+i),l="rgba(".concat(o[c],",").concat(o[c+1],",").concat(o[c+2],")");a.push(l)}if(z.PixelBoxs.length>0){for(var p=0;p<a.length;p++)z.PixelBoxs[p].setColor(a[p]);G()}},W=function(e,t,r){z.ctx.lineWidth,z.OptPixel.size,z.PixelBoxs.forEach((function(n,o){var a={x:n.x,y:n.y};X(a,e,t,z.ctx.lineWidth)<=z.ctx.lineWidth&&z.PixelBoxs[o].setColor(r)})),G()},G=function(){z.ctx.clearRect(0,0,z.ctx.canvas.width,z.ctx.canvas.height);for(var e=0;e<z.PixelBoxs.length;e++){z.PixelBoxs[e].draw(z.ctx)}},X=function(e,t,r,n){var o=Math.min(t.x,r.x)-n,a=Math.max(t.x,r.x)+n,i=Math.min(t.y,r.y)-n,s=Math.max(t.y,r.y)+n;return(e.x<o||e.x>a)&&(e.y<i||e.y>s)?Number.MAX_VALUE:Math.sqrt(function(e,t,r){var n=H(t,r);if(0==n)return H(e,t);var o=((e.x-t.x)*(r.x-t.x)+(e.y-t.y)*(r.y-t.y))/n;return H(e,o<0?t:o>1?r:{x:t.x+o*(r.x-t.x),y:t.y+o*(r.y-t.y)})}(e,t,r))},Y=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.lineWidthBase=1,t.drawColorType=A.MAIN,t.eraser="",t.mouseDown=!1,t.previousPos={x:0,y:0},t.penColor="",t}return m(t,e),t.prototype.operateStart=function(e){if(z.ctx){L(e),this.mouseDown=!0;var t=z.strawColor?z.strawColor:this.drawColorType===A.MAIN?z.mainColor:z.subColor,r=N(t);this.previousPos=e,this.penColor=r,z.ctx.lineWidth=z.isPixel?z.lineWidthFactor*this.lineWidthBase*z.OptPixel.size/2:z.lineWidthFactor*this.lineWidthBase,this.saveImageData=z.ctx.getImageData(0,0,z.ctx.canvas.width,z.ctx.canvas.height),z.ctx.strokeStyle=r,z.ctx.lineJoin="round",z.ctx.lineCap="round",z.ctx.beginPath(),z.isPixel&&W(e,e,this.penColor)}},t.prototype.operateMove=function(e){if(this.mouseDown){if(z.isPixel)return W(this.previousPos,e,this.penColor),void(this.previousPos=e);z.ctx.moveTo(this.previousPos.x,this.previousPos.y);var t=.5*(this.previousPos.x+e.x),r=.5*(this.previousPos.y+e.y);z.ctx.quadraticCurveTo(t,r,e.x,e.y),z.ctx.stroke(),this.previousPos=e}},t.prototype.operateEnd=function(){this.mouseDown&&(z.ctx.closePath(),this.mouseDown=!1)},t.prototype.onMouseDown=function(e){e.preventDefault();var t=T(z.ctx.canvas,e);M(t)&&this.operateStart(t)},t.prototype.onMouseUp=function(e){e.preventDefault(),this.operateEnd()},t.prototype.onMouseMove=function(e){e.preventDefault();var t=T(z.ctx.canvas,e);this.operateMove(t)},t.prototype.onTouchStart=function(e){e.cancelable&&e.preventDefault();var t=R(e.target,e);this.operateStart(t)},t.prototype.onTouchMove=function(e){e.cancelable&&e.preventDefault();var t=R(e.target,e);this.operateMove(t)},t.prototype.onTouchEnd=function(e){e.cancelable&&e.preventDefault(),this.operateEnd()},t}(z),V=function(e){function t(t){var r=e.call(this)||this;return r.lineWidthBase=1,r.mouseDown=!1,r.color="",r.previousPos={x:0,y:0},r.lineWidthBase=t,r.color="",r}return m(t,e),t.prototype.operateStart=function(e){if(z.ctx){this.saveImageData=z.ctx.getImageData(0,0,z.ctx.canvas.width,z.ctx.canvas.height),this.mouseDown=!0,this.previousPos=e,z.ctx.lineWidth=z.isPixel?this.lineWidthBase*z.OptPixel.size/2:this.lineWidthBase;var t={x:e.x-z.ctx.lineWidth,y:e.y-z.ctx.lineWidth};this.color=z.isPixel?function(e){for(var t=0;t<z.PixelBoxs.length;t++){var r=z.PixelBoxs[t];if(r.x-z.OptPixel.size/2<=e.x&&e.x<=r.x+z.OptPixel.size/2&&r.y-z.OptPixel.size/2<=e.y&&e.y<=r.y+z.OptPixel.size/2)return r.getColor()}return""}(t):D(z.ctx,e.x-2,e.y-2),console.log(this.color),z.ctx.strokeStyle=this.color,z.ctx.lineJoin="round",z.ctx.lineCap="round",z.ctx.beginPath(),z.isPixel&&W(e,e,this.color)}},t.prototype.operateMove=function(e){if(this.mouseDown){if(z.isPixel)return W(this.previousPos,e,this.color),void(this.previousPos=e);z.ctx.moveTo(this.previousPos.x,this.previousPos.y);var t=.5*(this.previousPos.x+e.x),r=.5*(this.previousPos.y+e.y);z.ctx.quadraticCurveTo(t,r,e.x,e.y),z.ctx.stroke(),this.previousPos=e}},t.prototype.operateEnd=function(){if(this.mouseDown)if(z.ctx.closePath(),this.mouseDown=!1,z.isPixel)U(z.ctx);else{var e=z.ctx.getImageData(0,0,z.ctx.canvas.width,z.ctx.canvas.height),t=(r=this.color,(n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r))?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16),a:parseInt(n[4],16)}:null);t&&this.saveImageData&&(e=function(e,t,r){for(var n=0;n<t.height;n++)for(var o=0;o<t.width;o++){var a=n*t.width*4+4*o,i=t.data[a],s=t.data[a+1],c=t.data[a+2],l=t.data[a+3],p=e.data[a],u=e.data[a+1],h=e.data[a+2],d=e.data[a+3],f=i===p&&s===u&&c===h&&l===d,v=i===r[0]&&s===r[1]&&c===r[2]&&l===r[3];f||v||(t.data[a]=r[0],t.data[a+1]=r[1],t.data[a+2]=r[2],t.data[a+3]=r[3])}return t}(this.saveImageData,e,[t.r,t.g,t.b,t.a]),z.ctx.putImageData(e,0,0))}var r,n},t.prototype.onMouseDown=function(e){e.preventDefault();var t=T(z.ctx.canvas,e);M(t)&&this.operateStart(t)},t.prototype.onMouseUp=function(e){e.preventDefault(),this.operateEnd()},t.prototype.onMouseMove=function(e){e.preventDefault();var t=T(z.ctx.canvas,e);this.operateMove(t)},t.prototype.onTouchStart=function(e){e.cancelable&&e.preventDefault();var t=R(e.target,e);this.operateStart(t)},t.prototype.onTouchMove=function(e){e.cancelable&&e.preventDefault();var t=R(e.target,e);this.operateMove(t)},t.prototype.onTouchEnd=function(e){e.cancelable&&e.preventDefault(),this.operateEnd()},t}(z);!function(e){function t(t){var r=e.call(this)||this;return r.setColor=t,r}m(t,e),t.prototype.operateStart=function(e){var t=D(z.ctx,e.x,e.y);this.setColor(t)},t.prototype.onMouseDown=function(e){e.preventDefault();var t=T(z.ctx.canvas,e);this.operateStart(t)},t.prototype.onTouchStart=function(e){e.cancelable&&e.preventDefault();var t=e.target,r=R(t,e);this.operateStart(r)}}(z);var Z=function(e,t,r){var n=e.data[t],o=e.data[t+1],a=e.data[t+2];return z.isPixel?Math.abs(n-r[0])<10&&Math.abs(o-r[1])<10&&Math.abs(a-r[2])<10:Math.abs(n-r[0])<30&&Math.abs(o-r[1])<30&&Math.abs(a-r[2])<30},K=function(e,t,r){return e.data[t]=r[0],e.data[t+1]=r[1],e.data[t+2]=r[2],e.data[t+3]=r[3],e},q=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return m(t,e),t.prototype.operateStart=function(e){var t=F(z.strawColor||z.fillColor||"#000000FF");console.time("efficentFloodFill");var r=[t.r,t.g,t.b,255*t.a];Promise.resolve().then((function(){!function(e,t,r,n){t=Math.round(t),r=Math.round(r);var o=[[Math.round(t),Math.round(r)]],a=e.canvas.width,i=e.canvas.height,s=4*(r*a+t),c=e.getImageData(0,0,a,i),l=[c.data[s],c.data[s+1],c.data[s+2],c.data[s+3]],p={};if(l[0]!==n[0]||l[1]!==n[1]||l[2]!==n[2]||l[3]!==n[3]){for(;o.length>0;){for(var u=o.pop(),h=u[0],d=u[1],f=4*(d*a+h);d-- >=0&&Z(c,f,l);)f-=4*a;++d;var v=!1,g=!1;if(!p[f+=4*a])for(p[f]=!0;d++<i-1&&Z(c,f,l);)K(c,f,n),h>0&&(Z(c,f-4,l)?v||(o.push([h-1,d]),v=!0):v&&(v=!1)),h<a-1&&(Z(c,f+4,l)?g||(o.push([h+1,d]),g=!0):g&&(g=!1)),f+=4*a}e.putImageData(c,0,0),z.isPixel&&U(z.ctx)}}(z.ctx,e.x,e.y,r)})),console.timeEnd("efficentFloodFill")},t.prototype.onMouseDown=function(e){var t=this;if(e.preventDefault(),!this.mouseDownTimer){var r=T(z.ctx.canvas,e);L(r),z.strawFlag||this.operateStart(r),this.mouseDownTimer=setTimeout((function(){clearTimeout(t.mouseDownTimer),t.mouseDownTimer=void 0}),300)}},t.prototype.onTouchStart=function(e){e.cancelable&&e.preventDefault();var t=R(e.target,e);this.operateStart(t)},t}(z);var J=function(e){function t(t){var r=e.call(this)||this;return r.isMouseDown=!1,r.calcCurrentElement=function(e){if(r.fontStyle){var t=r.fontStyle,n=t.fontSize;t.fontFamily;var o=t.color,a=t.letterSpacing;e.setAttribute("font-size",n),e.setAttribute("font-family",n),e.setAttribute("color",o),e.setAttribute("letterSpacing",a)}},r._x=NaN,r._y=NaN,r.textBox=document.getElementById("textBox"),r.canvasBox=document.getElementById("text-container"),r.allCanvas=document.getElementById("all-canvas"),r.mousePos={x:0,y:0},r.textContent="",r.fontStyle=w({fontSize:72,fontFamily:"System Font"},t),r.width=10,r.testList={},r}return m(t,e),t.prototype.drawingText=function(e,r,n){var o,a=document.createElement("textarea");function i(e){if(t.currentDown){var r=e.clientX-t.currentPos.x,n=e.clientY-t.currentPos.y;a.style.left=t.currentCanvas.x+r+"px",a.style.top=t.currentCanvas.y+n+"px"}}null===(o=this.allCanvas)||void 0===o||o.appendChild(a),a.setAttribute("style","position:absolute;\n      left:".concat(this._x,"px;\n      background:#362F395E; \n      top: ").concat(this._y,"px;\n      cursor:pointer;\n      transform:scale(").concat(z.currentScale,");\n      transform-origin: left top;")),a.addEventListener("mousedown",(function(e){a.style.transform="scale(".concat(z.currentScale,")"),t.currentDown=!0,t.currentPos={x:e.clientX,y:e.clientY},t.currentCanvas={x:Number(a.style.left.split("px")[0]),y:Number(a.style.top.split("px")[0])},a.addEventListener("mousemove",i)})),a.addEventListener("mouseup",(function(e){t.currentDown=!1,a.removeEventListener("mousemove",i),z.textList={data:a,textArea:a,event:e,pos:[Number(a.style.left.split("px")[0])+80,Number(a.style.top.split("px")[0])+80]}})),this.calcCurrentElement(a)},t.prototype.drawing=function(e,r,n){var o,a=document.createElement("canvas"),i=this.fontStyle,s=i.fontSize,c=i.fontFamily,l=i.color,p=i.lineHeight,u=void 0===p?24:p,h=i.letterSpacing,d=z.strawColor||l,f="".concat((new Date).getTime());function v(e){if(t.currentDown){var r=e.clientX-t.currentPos.x,n=e.clientY-t.currentPos.y;a.style.left=t.currentCanvas.x+r+"px",a.style.top=t.currentCanvas.y+n+"px"}}a.width=Math.ceil(this.textBox.clientWidth),a.height=Math.ceil(this.textBox.clientHeight),null===(o=this.allCanvas)||void 0===o||o.appendChild(a),a.setAttribute("style","position:absolute;left:".concat(this._x,"px;top:").concat(this._y,"px;cursor:pointer;transform:scale(").concat(z.currentScale,");transform-origin: left top;")),a.addEventListener("mousedown",(function(e){a.style.transform="scale(".concat(z.currentScale,")"),a.style.background="#362F395E",t.currentDown=!0,t.currentPos={x:e.clientX,y:e.clientY},t.currentCanvas={x:Number(a.style.left.split("px")[0]),y:Number(a.style.top.split("px")[0])},a.addEventListener("mousemove",v)})),a.addEventListener("mouseup",(function(e){t.currentDown=!1,a.removeEventListener("mousemove",v),a.style.background="transparent",z.textList[f]={data:a.toDataURL(),canvas:a,event:e,pos:[Number(a.style.left.split("px")[0])+80,Number(a.style.top.split("px")[0])+80]}}));var g=a.getContext("2d");if(g){g.fillStyle="#000",g.lineWidth=5,g.font="72px System Font",g&&this.fontStyle&&(g.fillStyle=d||"#000",g.font="".concat(s,"px ").concat(c),g.canvas&&h&&(g.canvas.style.letterSpacing=h));var b=[];n.forEach((function(e){var t=Number(g.measureText(e).width);if(t>a.width){a.width;var r=function(e,t){void 0===t&&(t=1);for(var r=t?Math.ceil(e.length/t):Math.ceil(e.length/1),n=new Array(r),o=0;o<r;o++)n[o]=e.substr(o*t,t);return n}(e,Math.floor((a.width-14)/Math.ceil(t/e.length)));b.push.apply(b,r)}else b.push(e)}));var x=a.height+(b.length-1)*u;g.canvas.style.height=x+"px";var y=Math.floor(a.height/b.length);b.length>0&&(b.forEach((function(e,t){g.fillText(e,7,y/2+s/4+y*t)})),z.textList[f]={data:a.toDataURL(),canvas:a,pos:[this._x+80,this._y+80]},this.textBox.setAttribute("style","z-index:-1;display:none"),this.canvasBox.setAttribute("style","z-index:-2"),this.textBox.value="")}},t.prototype.startText=function(){if(this.textContent=this.textBox.value,this.isMouseDown=!1,this.textContent){var e=this.textBox.value.split(/[(\r\n)\r\n]+/);this.drawing(this.mousePos.x,this.mousePos.y,e)}else this.textBox.setAttribute("style","z-index:-1;display:none"),this.canvasBox.setAttribute("style","z-index:-2"),this.textBox.value=""},t.prototype.drawLastText=function(){Object.keys(z.textList).forEach((function(e){var t,r=z.textList[e],n=r.data,o=r.pos,a=new Image;a.crossOrigin="anonymous",a.src=n,a.onload=function(){var e=T(z.ctx.canvas,void 0,0,{x:o[0],y:o[1]}),t=e.x,r=e.y;z.ctx.drawImage(a,t,r)},z.textList[e].canvas&&!z.isPixel&&(null===(t=document.getElementById("all-canvas"))||void 0===t||t.removeChild(z.textList[e].canvas))})),z.textList={}},t.prototype.onKeyDown=function(e){8==e.keyCode&&(Object.keys(z.textList).forEach((function(e){var t;z.textList[e].canvas&&!z.isPixel&&(null===(t=document.getElementById("all-canvas"))||void 0===t||t.removeChild(z.textList[e].canvas))})),z.textList={})},t.prototype.onMouseDown=function(e){e.preventDefault();var t=T(z.ctx.canvas,e);if(z.strawFlag)L(t);else if(this.isMouseDown)this.startText();else if(!this.isMouseDown){this.drawLastText(),this.mousePos=t,this._x=e.clientX-80,this._y=e.clientY-80,this.client={x:e.clientX,y:e.clientY},this.isMouseDown=!0,this.textBox.innerText="";var r="display:block;\n        position:absolute;\n        z-index:6;\n        width:auto;\n        left:".concat(this._x,"px;\n        top:").concat(this._y,"px;\n        "),n=this.fontStyle,o=n.fontSize,a=n.fontFamily,i=n.color;n.lineHeight;var s=n.letterSpacing,c=z.strawColor||i;this.fontStyle&&(r="".concat(r,"; font-size:").concat(o,"px;font-family:").concat(a,";color:").concat(c,";letterSpacing:").concat(s,";"));var l=this.canvasBox.clientWidth-this._x;r="".concat(r," max-width:").concat(l,"px;"),o/2<260&&(r="".concat(r," width:").concat(260,"px;")),this.width=l,this.canvasBox.setAttribute("style","z-index:5;display:block,pointer-events:auto"),this.textBox.setAttribute("style",r)}},t.canvasList={},t}(z),Q=function(e){function t(t,r){void 0===r&&(r=!1);var n=e.call(this)||this;return n.isMouseDown=!1,n.mouseDownPos={x:0,y:0},n.lineWidthBase=1,n.isDashed=!1,n.dashLineStyle=[10,10],n.type=t,n.isDashed=r,n}return m(t,e),t.prototype.setType=function(e){this.type=e},t.prototype.operateStart=function(e){L(e);var r=t.shapeWidth||1;this.saveImageData=z.ctx.getImageData(0,0,z.ctx.canvas.width,z.ctx.canvas.height),this.isMouseDown=!0,this.mouseDownPos=e,z.ctx.strokeStyle=z.mainColor,z.ctx.lineWidth=z.isPixel?r*z.OptPixel.size:r,z.ctx.fillStyle=z.subColor,this.isDashed&&z.ctx.setLineDash(this.dashLineStyle)},t.prototype.operateMove=function(e){var t=z.ctx;if(this.isMouseDown&&this.saveImageData){t.clearRect(0,0,z.ctx.canvas.width,z.ctx.canvas.height),t.putImageData(this.saveImageData,0,0);var r=function(e,t,r,n,o){var a=[],i=.5*(t+n),s=.5*(r+o);switch(e){case _.LINE:a.push({x:t,y:r}),a.push({x:n,y:o});break;case _.RECT:a.push({x:t,y:r}),a.push({x:n,y:r}),a.push({x:n,y:o}),a.push({x:t,y:o});break;case _.CIRCLE:a.push({x:.5*(t+n),y:.5*(r+o)});break;case _.RHOMBUS:a.push({x:i,y:r}),a.push({x:n,y:s}),a.push({x:i,y:o}),a.push({x:t,y:s});break;case _.TRIANGLE:a.push({x:i,y:r}),a.push({x:t,y:o}),a.push({x:n,y:o});break;case _.PENTAGON:a.push({x:i,y:r}),a.push({x:n,y:s}),a.push({x:.5*(i+n),y:o}),a.push({x:.5*(i+t),y:o}),a.push({x:t,y:s});break;case _.SEXANGLE:a.push({x:i,y:r}),a.push({x:n,y:.5*(r+s)}),a.push({x:n,y:.5*(o+s)}),a.push({x:i,y:o}),a.push({x:t,y:.5*(o+s)}),a.push({x:t,y:.5*(r+s)});break;case _.ARROW_TOP:a.push({x:i,y:r}),a.push({x:n,y:s}),a.push({x:n-1/3*(n-t),y:s}),a.push({x:n-1/3*(n-t),y:o}),a.push({x:t+1/3*(n-t),y:o}),a.push({x:t+1/3*(n-t),y:s}),a.push({x:t,y:s});break;case _.ARROW_RIGHT:a.push({x:n,y:s}),a.push({x:i,y:o}),a.push({x:i,y:o-1/3*(o-r)}),a.push({x:t,y:o-1/3*(o-r)}),a.push({x:t,y:r+1/3*(o-r)}),a.push({x:i,y:r+1/3*(o-r)}),a.push({x:i,y:r});break;case _.ARROW_DOWN:a.push({x:i,y:o}),a.push({x:t,y:s}),a.push({x:t+1/3*(n-t),y:s}),a.push({x:t+1/3*(n-t),y:r}),a.push({x:n-1/3*(n-t),y:r}),a.push({x:n-1/3*(n-t),y:s}),a.push({x:n,y:s});break;case _.ARROW_LEFT:a.push({x:t,y:s}),a.push({x:i,y:r}),a.push({x:i,y:r+1/3*(o-r)}),a.push({x:n,y:r+1/3*(o-r)}),a.push({x:n,y:o-1/3*(o-r)}),a.push({x:i,y:o-1/3*(o-r)}),a.push({x:i,y:o});break;case _.FOUR_STAR:var c=.125*(n-t),l=.125*(o-r);a.push({x:i,y:r}),a.push({x:i+c,y:s-l}),a.push({x:n,y:s}),a.push({x:i+c,y:s+l}),a.push({x:i,y:o}),a.push({x:i-c,y:s+l}),a.push({x:t,y:s}),a.push({x:i-c,y:s-l})}return a}(this.type,this.mouseDownPos.x,this.mouseDownPos.y,e.x,e.y);if(this.type===_.CIRCLE)t.beginPath(),t.ellipse(r[0].x,r[0].y,Math.abs(.5*(e.x-this.mouseDownPos.x)),Math.abs(.5*(e.y-this.mouseDownPos.y)),0,0,2*Math.PI),t.stroke();else{t.beginPath(),t.moveTo(r[0].x,r[0].y);for(var n=1;n<r.length;n++)t.lineTo(r[n].x,r[n].y);t.closePath(),t.stroke()}z.isPixel&&U(z.ctx)}},t.prototype.operateEnd=function(){z.ctx.setLineDash([]),z.isPixel&&U(z.ctx),this.isMouseDown=!1,this.saveImageData=void 0},t.prototype.onMouseDown=function(e){e.preventDefault();var t=T(z.ctx.canvas,e);M(t)&&this.operateStart(t)},t.prototype.onMouseMove=function(e){e.preventDefault();var t=T(z.ctx.canvas,e);this.operateMove(t)},t.prototype.onMouseUp=function(e){e.preventDefault(),this.operateEnd()},t.prototype.onTouchStart=function(e){e.cancelable&&e.preventDefault();var t=e.target,r=R(t,e);this.operateStart(r)},t.prototype.onTouchMove=function(e){e.cancelable&&e.preventDefault();var t=e.target,r=R(t,e);this.operateMove(r)},t.prototype.onTouchEnd=function(e){e.cancelable&&e.preventDefault(),this.operateEnd()},t.shapeWidth=1,t}(z),$=function(){function e(e){this.eventName=e,this.callbacks=[]}return e.prototype.registerCallback=function(e){this.callbacks.push(e)},e.prototype.unregisterCallback=function(e){var t=this.callbacks.indexOf(e);t>-1&&this.callbacks.splice(t,1)},e.prototype.fire=function(e){this.callbacks.slice(0).forEach((function(t){t(e)}))},e}(),ee=function(){function e(){this.events={}}return e.prototype.dispatch=function(e,t){var r=this.events[e];r&&r.fire(t)},e.prototype.on=function(e,t){var r=this.events[e];r||(r=new $(e),this.events[e]=r),r.registerCallback(t)},e.prototype.off=function(e,t){var r=this.events[e];r&&r.callbacks.indexOf(t)>-1&&(r.unregisterCallback(t),0===r.callbacks.length&&delete this.events[e])},e}(),te=o({type:S.PEN,setType:function(e){},strawType:!1,setStrawType:function(e){}}),re=o({type:_.LINE,setType:function(e){}}),ne=o({type:O.SOLID,setType:function(e){}}),oe=o({type:j.LINESIZE,setType:function(e){},lineSize:1,setLineSize:function(e){}}),ae=o({mainColor:"black",subColor:"white",activeColor:A.MAIN,setColor:function(e){},setActiveColor:function(e){}}),ie=o({fillColor:"black",setFillColor:function(e){}}),se=o({dispatcher:new ee});o({size:{},onSize:function(e){}});var ce=o({fontStyle:{fontSize:72},setFont:function(e){}}),le=function(){function e(){this.imageData1=[],this.imageData2=[]}return e.prototype.add=function(e){10===this.imageData1.length&&this.imageData1.shift(),this.imageData1.push(e)},e.prototype.clear=function(e){switch(e){case"back":this.imageData2=[];break;case"forward":this.imageData1=[];break;default:this.imageData1=[],this.imageData2=[]}},e.prototype.getCurrent=function(){return this.imageData1[this.imageData1.length-1]},e.prototype.back=function(){if(this.imageData1.length>1){var e=this.imageData1.pop();this.imageData2.push(e)}return this.imageData1.length>0?this.imageData1[this.imageData1.length-1]:null},e.prototype.forward=function(){if(this.imageData2.length>0){var e=this.imageData2.pop();this.imageData1.push(e)}return this.imageData1.length>0?this.imageData1[this.imageData1.length-1]:null},e.prototype.getImageDatalist=function(e){switch(e){case"back":return this.imageData1;case"forward":return this.imageData2;default:return}},e}(),pe="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAAXNSR0IArs4c6QAAAylJREFUOE+tlG9IU1EYxncYWGk60D7IcEaaH5YYCqvEscb6MNlorGYy3R9CHY6xdIkazcYVNmIkXJgGDldaN7dybRoyilDGaIiOQA2HE4NrJsy0YsZGqKN54gqTaZqinm/n8Dw/3vc57zmAdAwLQnjSYDA4BwYGronF4lfgGJgkq9X6QKVSGSKRCGCxWD+PDJ2cnLxUU1PjmZiYSCEKbGxsdB8JCiFMViqVHywWC4MAslisX93d3SVHgloslkcajebe6uoqKSMjY6Onp+eOUCg0Hxo6NTV1taKi4n0gEDgFACDpdDqXXq+/CQCIHQoaCoUo9fX1o1ar9QLRdmlp6bLZbL6Sk5PzldgfCtre3t7Z3NysikajJCqV+sdms8k5HE5ffJI2oXNzc+Wtra2Ps7KyvBKJxFRQUDC616iNjY3xZDLZGxzHT5DJZJLBYHip1WplAAC4DRoMBmn9/f16l8vFX15epjQ1NVnkcvldAMBGIjwcDp+prq7+6HQ6zxHnIpFoHsOwy6mpqT8SddvaJ0xms9lsMplEGIbd5nK51rgYQgja2tqwlpYWeSwWI+Xm5q7bbDZRcXHxu51d/ZMphDCTzWbPcrncFzqdri5uwHGcUVVV5fF6vaeTkpJIKIp21tXVqXeLaRt0cXHxrNvtRhEEudHR0aESCARPCBMx5LOzs6JQKPQbQZAuKpX6HcOwEgBAeE+o3++/6HA47g8PD1+PRqPkhoaGZ1KptD6e6cjIiEipVNoVCsXzysrKpziOrzOZzE97XSYYHx+XqtXqruTk5DWhUIjx+fyevLy86USDVqvtMxqNYjqdvj40NKSg0WhbWe9aKY/HC6anp39DUbQ8MzPzy04RhJBSVlb2eWlpKcloNCrZbPbr/X42kJ+fv67RaB7W1tbq9xJ7vV5ZWlradGFh4eR+wM0XJRAIggwGYxFBEBYAYC3RBCFMWVhY4GVnZw/snNn/wcHg4KAKQRBTUVFRgMPhOGg02jyEkIzj+HmPx3NrZWUlx263cygUiu8gVW69fZ/Px+/t7W2amZkpCIfDaZAIkkKJ0Ol0v0QiQZlM5tuDAgndX8fXUMRoxbJOAAAAAElFTkSuQmCC",ue="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAAXNSR0IArs4c6QAAAwBJREFUOE+N1MtPGlEUB2CvfVBJWRAfIEGMXWFMSJNujKKuu2gTakhKpEgpIdFVRUgaGJgyU4aZgUKozlhTLZpArenKIpq0C8PCtW79C3SFUTBWVE4zJBhQXrOcnPPlPs7vopYmPwC4t7CwEIrH42an0/lRp9NFa7WiZkwAuM/zfMTj8UxnMpnW3t7efCgUcun1+s/V+huiAjg/Pz/n9Xptx8fHrSVEpVLlGYbxGgwG5jZcFwWAB9FolMNx3HpycnKnVqlUXrIs6zMYDBRCCEp4TVQAw+HwV5/P9/b09LRmnUKhuGQYxm80GokSXLUYAB6GQqFvBEG8yWazDY9ILpdfMQwTMJlMuADfaQAAUTAYXCIIYiKXyzUES1uWyWRXgUAgaLFYXBVNAPCIYZgYSZKvz87OmhmMiprh4eH81taW9gYFgDaKolYjkYje4XAk0+n0s+3tbUWzslQqLbjd7jmHw/G+iAqXQlHUz3A4/Mput/9yuVym/f19tcfjSW1ubjaE29vbCyRJclNTUzMIoesiynHcEoZh7+x2+zqGYWaE0D/h/97e3lMMw1KpVKom3NHRce33+7/YbDanAAp9CABkQ0NDByKRqGVnZ+cJQihTvuV6cGdn5zVFUWGr1foBIVS4mVMAkA8ODh4cHh627e7uTvf09CzdPsdqcFdXl3DbIYvF4i4HSytFa2tr62azWa9Wq3M8z09otdrf1WCv15tKJpMKYS5pmqYnJye95UmqSBQASDAMWw8Gg88HBgZy0WjUODo6ulEOAwBaXl7maJq24jhekaCa2QeAxziO/2BZ9kV/f38FLICxWMzPcdzM7Ozsp9tZr/ugAICYIIg4TdM64SiEFY+MjKQ4jnPxPI+RJEmOj4+TjWa3Wkzb/H7/KkVR+u7u7guNRpNJp9MyjUaTrTYdTb+nQlxpmv5OEITh/Py82CcWi1tYlt3o6+v7WygUKhYjkUjyY2NjCYRQMdv1nj7R4uIinUgkTEdHR1KEUM1apVJ5sbKy8lKlUv0R0P+CY3UsaiOKzgAAAABJRU5ErkJggg==",he="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAvdJREFUOE9jZCAT/P//n7exsXHRpk2b3FVVVa80NDTEaGpq3mIkxbz///9zMzAwML57946pr69vRVdXl+fv37/BRhQWFj6uqKgwJdrAS5cuaXR3d6/99esXq5yc3N0JEyZ4wAwDGcjGxsawa9euOKINLC4uPtfb22sI0szBwcHw48cPFM85ODh8njVrljnRBq5YsWJzdHS0z9+/fzFCydzc/NOkSZPCzM3NdxJl4P379827urp2c3Nz806ZMgXFdaampp8nT54cbGFhsRtkE0ED79+/b9HW1rZbTU2Np7CwkGHNmjUMCQkJcEPj4uJ+NjY2aigqKj4gaOCdO3es2tvbd2pra/Pk5eUxMDMzg70LMjQ0NBTM1tbW/rV582YXJSWlw3gNvHPnjnVzc/NOY2Nj7uzsbAYmJiawAT9//mQoKytjeP/+/btHjx79jY6Obk1LS5sIC1isXr53755tXV3dDktLS66MjAy4YaCYLS0tZWBnZ79SWFjoKS0t/YORkfENcixhGHj79m37+vr6bfb29lwpKSkohhUVFTHw8vJeKi4udhMXF3+JLVOgGHjjxg3Hurq6rW5ubpxJSUkMjIwQ6e/fvzMUFBQwiIiIXMjNzXWTlJR8jSuHwQ28ceOGU01NzRZvb2/O+Ph4FMNycnIYpKWlz2ZmZnpISUmheBHdYLCB169fd6ipqdnu7+/PERMTAzfs27dvDFlZWQwKCgpnioqK3Pn5+d8RyvuMoAyfm5v7yMrKSigiIgLFsPT0dAZ1dfVTubm5HgICAu8JGQZONh8+fEjz9/efsWvXLkZQBgeBr1+/MqSmpjLo6OicqKqq8mBkZPxIjGFgA1NTU7+DvOrt7Q03LDk5mcHQ0PBYeXm5JyMj4ydiDQMb6OXl9WfFihXMrKysDH19fQyHDx9mcHFxOVRcXOzDyMj4mRTDwAYuWbJk56xZs1yFhIQYVVRUbkRHR3caGBgsZWRkhJScJAJQpLBcvHgx8v///xxQg76RaAaKcgCcBCFKW9n56gAAAABJRU5ErkJggg==",de="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAAAAXNSR0IArs4c6QAAAzBJREFUOE+V1G9IGmEcB/Dn0TUyoxe9Cd2LEHL1Jh0zGpTzWPXmiv0jKVqkQ8WBHF1CvhiR9uZezTwriFoxFjXpMlkSg/YiemGwjBJntD+wNxGtiVHpcMSQnnHiHVaW7d7ccb/jw+/5fZ/nIMhc6+vr2MrKygudTkdKJJIY9569I4QEEMLT7Hf5niH3wfz8PGkymVydnZ0bvb29j2Uy2S+2trm5ed/tdo+VlpYmCIIwyeXy7XwoW+dhhJBwdHTU7XA4LO3t7Wn86Ojodnd390I8HhfF43FBXV3dz76+vubq6uqv+XAeziyZxwmCiGxsbJTv7u7eHBkZ0e/v78tsNhtVW1u7R1FUc2Vl5ber8DMwh09NTU3PzMx0yGSy066uLqNGo3nL1hiG6b0ufgEOhUKanp6ehaqqKvHOzs6NioqKMzPPxu12e7NCocjZ+RmYRUmSXEgkEuzyn29tbWHczO12+6OysrLo+c4vw3n4HKrXaDQ+LtCBgQGL2Wx+T1GUlptrvrGk4VwoByCEYCAQeCkUCj/X19d/yA6Mw2tqavZIksQwDNvl6hAhhDscjnfb29slFotlWiAQfMy3lbLrh4eHXZOTk7jRaJzVarXPeHhubu6Py+USiUQiEAwG/8cEJSUloKGhAayurqK1tbU3UqnUxMPBYDDc2NiobGlpAT6fD6RSqWvhLIrjOFheXkZjY2NLra2tTyCEf3n45OSkwul0ztI0rWpqaroWno06nU6/Xq/viEQid8Lh8CudTvcAQphKhxeLxaTj4+OLNE3fzYfnQgEAKYIglj0ej9rj8RhwHJ/it1symZTQNM3il3aeC4UQngQCgadardYbjUaFbW1tPxiGuXPmgFyFX4ay29FsNn+amJi4x65eLBYDr9drvHCkc+FFRUV8UNxM2U4z/5ZbKpXqeygUEnPBWa3W+QswW2TxoaGhxcHBQRWGYaCgoCCd/nk0A5crlcovkUikiINtNhuTE84EKvH7/Uv9/f0KgUCAKIpKp891mnUyhcPDw68ZhtEeHx+L1Gp10mAwPLwUznQjPzg4cBQWFv4uLi62nkezNzxCSAIAEAEAohDC5D/ICOFJB8oKQgAAAABJRU5ErkJggg==",fe=f.TextArea,ve=1,ge=0,be=0,xe=function(r){var n=r.id,o=r.toolType,l=r.lineWidthType,p=r.mainColor,u=r.subColor;r.setColor;var h=r.CanvasSize,d=r.fillColor,f=r.shapeType,v=r.shapeOutlineType,g=r.fontStyle,b=r.imgSrc,x=r.background,y=r.strawType,m=r.lineSize,k=void 0===m?1:m,C=a(),E=C[0],_=C[1],A=i(null),L=i(null),T=i(null),R=i(null),D=s(se),M=a(new le)[0],P=a(""),B=P[0],F=P[1];c((function(){switch(N(),o){case S.PEN:_(new Y);break;case S.ERASER:_(new V(k));break;case S.COLOR_FILL:_(new q);break;case S.TEXT:_(new J(g));break;case S.SHAPE:_(new Q(f,v===O.DOTTED))}}),[o,f,g,k]),c((function(){E instanceof Q&&(E.isDashed=v===O.DOTTED)}),[v]),c((function(){switch(l){case j.THIN:z.lineWidthFactor=1;break;case j.MIDDLE:z.lineWidthFactor=2;break;case j.BOLD:z.lineWidthFactor=3;break;case j.MAXBOLD:z.lineWidthFactor=4;break;case j.LINESIZE:z.lineWidthFactor=k}}),[l,k]),c((function(){z.mainColor=p}),[p]),c((function(){z.fillColor=d}),[d]),c((function(){z.subColor=u}),[u]),c((function(){var e=A.current;if(e){N(),z.ctx=e.getContext("2d");var t=D.dispatcher,r=function(){var t=e.getContext("2d");if(t)if(b){var r=new Image;r.crossOrigin="anonymous",r.src=b,r.onload=function(){var e=r.width,n=r.height;t.drawImage(r,0,0);var o=t.getImageData(0,0,e,n);t.putImageData(o,0,n),M.add(o)}}else t.fillStyle="#2d2d2d",t.fillRect(0,0,e.width,e.height)};t.on("clear",r);t.on("redo",(function(){var t=e.getContext("2d");if(t){var r=M.forward();r&&(t.clearRect(0,0,e.width,e.height),t.putImageData(r,0,0))}}));return t.on("undo",(function(){var t=e.getContext("2d");if(t){var r=M.back();r&&(t.clearRect(0,0,e.width,e.height),t.putImageData(r,0,0))}})),function(){t.off("clear",r)}}}),[A]),c((function(){N()}),[y]);var N=function(){var e,t=A.current,r=R.current,n=null===(e=null==r?void 0:r.resizableTextArea)||void 0===e?void 0:e.textArea;if(B&&F(""),t){if(y)return t.style.cursor="url(".concat(he,") 12 16,auto");t.style.cursor=0===o?"url(".concat(pe,") 12 16,auto"):4===o?"url(".concat(ue,") 12 16,auto"):1===o?"url(".concat(de,") 12 16,auto"):"auto",2!==o&&r&&n&&n.setAttribute("style","z-index:-1;display:none")}};c((function(){var e=L.current,t=A.current;if(h&&e&&t){z.ctx&&z.ctx.clearRect(0,0,t.width,null==t?void 0:t.height),function(){var e=A.current,t=L.current,r=T.current;if(e&&t&&r){var n=e.getContext("2d");if(b){var o=new Image;o.crossOrigin="anonymous",o.src=b,o.onload=function(){e.height=o.height,e.width=o.width,r.setAttribute("style","width:".concat(e.width,";height:").concat(e.height)),n.drawImage(o,0,0,e.width,e.height),M.add(n.getImageData(0,0,e.width,e.height))}}else h&&(e.height=h.height,e.width=h.width,n.fillStyle=x||"#2d2d2d",n.fillRect(0,0,e.width,e.height),M.add(n.getImageData(0,0,e.width,e.height)))}}();var r=e.clientHeight,n=e.clientWidth,o=Math.min(n,r)/Math.max(h.height,h.width)||1;ve=o,z.currentScale=ve,ge=(n-h.width*ve)/2/ve,be=(r-h.height*ve)/2,z.translate={translatex:ge,translatey:be},t.style.transform="scale(".concat(ve,") translate(").concat(ge,"px,").concat(be,"px)")}}),[h]);var I=function(e){E&&E.onMouseDown(e)},H=function(e){B&&F(""),E&&(E.onMouseUp(e),M.add(z.ctx.getImageData(0,0,z.ctx.canvas.width,z.ctx.canvas.height)))},U=function(e){E&&E.onTouchStart(e)},W=function(e){E&&E.onTouchMove(e)},G=function(e){E&&E.onTouchEnd(e),M.add(z.ctx.getImageData(0,0,z.ctx.canvas.width,z.ctx.canvas.height))},X=function(e,t,r,n,o,a){var i="width"===r?ge:be,s=n[r]*t-n[r]*a;return(e-i-o["width"===r?"x":"y"])/(n[r]*a)*s},Z=function(e){if(e.preventDefault(),o!==S.TEXT){var t=A.current,r=L.current,n=e.clientX,a=e.clientY;e.deltaX;var i,s=e.deltaY,c=e.ctrlKey,l=r.getBoundingClientRect(),p=l.width,u=l.height,d=l.x,f=l.y,v=r.getBoundingClientRect();if(v.width,v.height,c){s<0?(i=ve+.1,i=Math.min(i,6)):(i=ve-.1,i=Math.max(i,.1));var g=X(n,i,"width",h,{width:p,height:u,x:d,y:f},ve),b=X(a,i,"height",h,{width:p,height:u,x:d,y:f},ve);ge-=g,be-=b,ve=i,z.currentScale=i,z.translate={translatex:ge,translatey:be},t.style.transform="translate3d(".concat(ge,"px, ").concat(be,"px, 0px) scale(").concat(ve,")")}}},K=function(e){e.clientX,e.clientY;var t=e.deltaX,r=e.deltaY,n=e.ctrlKey;if(e.preventDefault(),o!==S.TEXT){var a=A.current;n||(t&&!r?ge=Number((ge-t).toFixed(3)):r&&!t&&(be=Number((be-r).toFixed(3))),z.translate={translatex:ge,translatey:be},a.style.transform="translate(".concat(ge,"px, ").concat(be,"px) scale(").concat(ve,")"))}},$=function(e){E&&E.onKeyDown(e)},ee=function(e){E&&E.onMouseMove(e)};c((function(){var e=A.current,t=L.current;if(e&&t)return e.addEventListener("mousedown",I),e.addEventListener("mousemove",ee),e.addEventListener("mouseup",H),e.addEventListener("wheel",Z,{passive:!1}),e.addEventListener("touchstart",U),e.addEventListener("touchmove",W),e.addEventListener("touchend",G),window.addEventListener("keydown",$),t.addEventListener("wheel",K,{passive:!1}),function(){e.removeEventListener("mousedown",I),e.removeEventListener("mousemove",ee),e.removeEventListener("mouseup",H),e.removeEventListener("wheel",Z),e.removeEventListener("touchstart",U),e.removeEventListener("touchmove",W),e.removeEventListener("touchend",G),t.removeEventListener("wheel",K)}}),[A,I,ee,H]);var te={margin:"auto"};if(L&&h){var re=L.current;re&&(te.margin=re.offsetWidth<((null==h?void 0:h.width)||0)?"unset":"auto")}return e("div",w({className:"all-canvas",ref:L,id:"all-canvas"},{children:[t("canvas",{id:"ccc-paint-canvas ".concat(n),className:"ccc-paint-canvas",ref:A,style:w({background:x},te)}),t("div",w({className:"canvas-text",id:"text-container",ref:T},{children:t(fe,{id:"textBox",ref:R,autoSize:!0,size:"small",name:"story",value:B,onChange:function(e){return F(e.target.value)},className:"text-box"})}))]}))};E('@import "~antd/dist/antd.css";@import "@/src/font.css";.ccc{height:100%;overflow:auto}.ccc,.ccc .ccc-content{position:relative;width:100%}.ccc .ccc-content{display:flex;flex-direction:row;height:calc(100% - 90px);overflow:hidden}.ccc .ccc-content .ToolPanel{height:100%;width:80px}.ccc .ccc-content .show-loading{align-items:center;background-color:#2d2d2d;display:flex;height:100%;justify-content:center;width:calc(100% - 380px)}.ccc .ccc-content .show-loading .loading-size{color:#fff;font-size:100px}.ccc .ccc-content .show-Canvas{background-color:#2d2d2d;width:calc(100% - 380px)}.ccc .ccc-content .show-type{height:100%;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;width:300px}.ccc-edit{align-items:center;display:flex;height:80px;justify-content:center;margin-left:80px;width:calc(100% - 380px)}');E('.toolpanel{display:flex;flex-direction:column;height:100%;margin-top:40px;position:relative;text-align:center}.toolpanel .tool-Icon{align-items:center;display:flex;justify-content:center;margin-top:40px}.toolpanel .color-tool{position:relative}.toolpanel .color-tool .bgColorIcon{background-color:#a6aeb7;content:"";display:block;height:18px;left:0;position:absolute;top:0;width:18px}.toolpanel .tool-item{border:1px solid transparent;cursor:pointer}.toolpanel .tool-item svg{fill:#a6aeb7}.toolpanel .selected-tool svg{fill:#4338ca}.toolpanel .title{bottom:0;position:absolute;text-align:center;width:100%}');var ye=e("svg",w({width:"20px",height:"20px",viewBox:"0 0 22 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t("path",{d:"M4.95781579,20 C4.16485055,20 3.30580487,19.8795011 2.57892006,19.6385034 C0.926909136,19.0962586 0.0678634548,18.0117689 0.00178301784,16.6260321 C-0.0642974191,14.5173022 1.71987438,13.794309 3.10756356,13.2520642 C4.4291723,12.7098193 5.1560571,12.4085722 5.1560571,11.5048308 C5.1560571,10.4203411 3.10756356,9.51659972 2.24851788,9.39610087 C1.91811569,9.27560201 1.71987438,8.97435488 1.71987438,8.67310775 C1.78595482,8.37186061 2.116357,8.1308629 2.44675919,8.19111233 C3.63620705,8.37186061 6.47766584,9.51659972 6.47766584,11.5048308 C6.47766584,13.2520642 4.89173535,13.8545585 3.63620705,14.3365539 C2.18243744,14.9390481 1.25731132,15.3607941 1.32339176,16.6260321 C1.32339176,17.5297735 1.91811569,18.1925172 2.97540268,18.5540138 C4.69349404,19.156508 7.27063109,18.734762 7.93143546,18.0117689 C8.1957572,17.7707712 8.59223983,17.7105218 8.85656157,17.9515195 C9.12088332,18.1925172 9.18696376,18.5540138 8.92264201,18.7950115 C8.26183764,19.5180046 6.60982672,20 4.95781579,20 L4.95781579,20 Z",id:"路径"}),t("path",{d:"M9.12776048,15.5639441 C9.01198473,15.6865914 9.18564836,15.9932097 9.41719986,16.1771807 C9.64875137,16.3611516 9.93819075,16.4224753 10.0539665,16.299828 L12.4852573,14.337471 L10.1697423,12.5590849 L9.12776048,15.5639441 L9.12776048,15.5639441 Z M20.3001207,0.294353553 C19.663354,-0.196235702 18.737148,-0.0735883881 18.274045,0.662295493 L10.8065089,11.5779064 L13.122024,13.3562924 L20.6474479,2.44068154 C21.1105509,1.76612132 20.9368873,0.784942807 20.3001207,0.294353553 L20.3001207,0.294353553 Z",id:"形状"})]})),me=t("svg",w({width:"20px",height:"20px",viewBox:"0 0 21 21",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:t("path",{d:"M16.4634349,6.10061799 L16.4634349,1.26061236 C16.4634349,0.765611782 16.0623369,0.36585522 15.5700193,0.36585522 L1.26061236,0.36585522 C0.765611782,0.36585522 0.36585522,0.765611782 0.36585522,1.26061236 L0.36585522,15.5700193 C0.36585522,16.0636784 0.765611782,16.4634349 1.26061236,16.4634349 L6.53122825,16.4634349 C7.84988832,18.4796568 10.12233,19.8170974 12.7059915,19.8170974 C16.7746548,19.8170974 20.0840489,16.5063618 20.0840489,12.43904 C20.0840489,9.74403686 18.6272179,7.38842437 16.4634349,6.10061799 Z M1.7073202,15.12197 L1.7073202,1.7073202 L15.12197,1.7073202 L15.12197,5.47549531 C14.3627008,5.21122671 13.5524559,5.06098263 12.7059915,5.06098263 C8.63866972,5.06098263 5.32927563,8.37171819 5.32927563,12.43904 C5.32927563,13.3861143 5.51573926,14.2889202 5.84171525,15.12197 L1.7073202,15.12197 Z M12.7059915,18.4756324 C9.37915839,18.4756324 6.6707406,15.7672146 6.6707406,12.43904 C6.6707406,9.1108654 9.37915839,6.40244761 12.7059915,6.40244761 C16.0328247,6.40244761 18.7425839,9.1108654 18.7425839,12.43904 C18.7425839,15.7672146 16.0341661,18.4756324 12.7059915,18.4756324 Z",id:"形状"})})),we=e("svg",w({width:"20px",height:"20px",viewBox:"0 0 20 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t("path",{d:"M12.4731023,3.7037037 L1.63802451,14.5211604 L1.63802446,14.5211605 C1.21914814,14.9420148 0.969322042,15.502839 0.936195999,16.0966731 L0.555906221,16.478225 L0.555906155,16.4782251 C-0.228107741,17.3285925 -0.176597257,18.6556303 0.67095625,19.4422587 C1.47201012,20.1857163 2.7082492,20.1859399 3.50956596,19.4427724 L3.89199387,19.0612205 L3.891994,19.0612205 C4.48441964,19.0302933 5.04417741,18.7792862 5.46229512,18.3570628 L16.2962963,7.54068626 L12.4730938,3.7037037 L12.4731023,3.7037037 Z",id:"路径",fill:"#FFFFFF"}),t("path",{d:"M16.6261041,0 C17.0588588,0 17.4737556,0.170288673 17.7794143,0.473485804 L18.7804195,1.46199206 C19.4179971,2.09226894 19.4190458,3.11400146 18.7825202,3.74531505 L16.4580443,6.04109819 L16.8382787,6.41697866 L16.9265101,6.51458327 L16.9265102,6.51458332 C17.2510682,6.9280438 17.2132351,7.51574442 16.8382788,7.88520012 L16.1019677,8.61204317 L16.1019677,8.61204318 C15.6924968,9.01727801 15.0284203,9.01820766 14.6177898,8.61411985 L14.5936313,8.5902379 L5.42596243,17.6113885 C5.06043243,17.9748088 4.58566439,18.2073999 4.07413163,18.2759308 L3.88191327,18.2935826 L3.5058787,18.663233 L3.50587879,18.6632329 C3.12224461,19.0460152 2.59934074,19.2607119 2.05426332,19.2592519 L2.05426325,19.2592519 C0.91899815,19.2585248 -0.000727831767,18.3481639 4.32195822e-07,17.2258983 C0.000310748089,16.7481123 0.170918146,16.2857117 0.481854001,15.9199235 L0.601596589,15.7911685 L0.975528764,15.4225548 C1.00388885,14.9106494 1.201359,14.4247034 1.53432833,14.0363628 L1.66562495,13.8951477 L10.8353863,4.87192851 L10.7313993,4.77017067 L10.5496848,4.59053689 L10.4614534,4.49189409 L10.4614534,4.49189409 C10.1370948,4.07854313 10.1744552,3.49120755 10.5486343,3.12127729 L11.2838966,2.39443424 L11.2838966,2.3944343 C11.6940666,1.98908266 12.3589531,1.98908266 12.7691256,2.39443417 L13.1483113,2.77031464 L15.4717385,0.473492338 L15.4717386,0.473492292 C15.7775474,0.17023359 16.192939,0 16.6260999,0 L16.6261041,0 Z M11.5769501,5.60706873 L2.40824728,14.6282193 C2.21182734,14.8234283 2.08263065,15.0736698 2.03851496,15.3426022 L2.02380974,15.4786255 L2.00175189,15.8752745 L1.34526758,16.5242416 L1.34526756,16.5242416 C0.958189307,16.9176466 0.967012445,17.5467602 1.3649744,17.9294061 C1.71827904,18.2691156 2.26862721,18.305491 2.66453845,18.0153055 L2.76432385,17.9280844 L3.42500802,17.2760023 L3.82730028,17.2552353 C4.10354771,17.2406985 4.36614192,17.1410173 4.58146933,16.9665759 L4.68545631,16.8741632 L13.849974,7.85508122 L11.5769648,5.6049845 L11.5769501,5.60706873 Z",id:"形状",fill:"#6D7278"})]})),ke=t("svg",w({width:"20px",height:"20px",viewBox:"0 0 20 21",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:t("path",{d:"M18.8999542,7.98728442 C19.1545607,7.7369778 19.1545607,7.33047984 18.8999542,7.08017321 L11.8891079,0.187729969 C11.6345014,-0.0625766564 11.2210203,-0.0625766564 10.9664138,0.187729969 L0.76381968,10.2180171 C-0.25460656,11.2192436 -0.25460656,12.8412305 0.76381968,13.842457 L6.30405843,19.2550875 C6.79290302,19.7316713 7.45284323,20 8.14129937,20 L16.5188736,20 C16.8793965,20 17.1706664,19.7136492 17.1706664,19.359215 C17.1706664,19.1829992 17.0973397,19.0228029 16.9792023,18.9066607 C16.8610648,18.7905184 16.6981166,18.7184301 16.5188736,18.7184301 L11.1313988,18.7184301 C9.97039289,18.7184301 9.38785308,17.33874 10.2087046,16.5297489 L18.8999542,7.98728442 L18.8999542,7.98728442 Z M8.30003162,16.8901562 C7.7900513,17.400251 6.96388319,17.400251 6.45390288,16.8901562 L2.20066705,12.6380061 C1.69068674,12.1279114 1.69068674,11.3015578 2.20066705,10.7914631 L4.80972634,8.18181818 L10.9090909,14.2825517 L8.30003162,16.8901562 Z",id:"形状"})})),Ce=e("svg",w({width:"20px",height:"20px",viewBox:"0 0 20 21",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t("path",{d:"M18.2168767,-3.55271368e-15 L20.0000233,6.38440196 L18.4618184,6.38440196 C18.4618184,6.38440196 18.1475602,3.65248472 15.2861506,3.05707387 L11.6535292,3.05707387 L11.6535292,15.7217175 C11.6535292,15.7217175 12.1711079,18.5445138 15.148377,18.6327951 L15.148377,20.0000233 L9.99010928,20.0000233 L9.92555842,-3.55271368e-15 L18.2168767,-3.55271368e-15 L18.2168767,-3.55271368e-15 Z",id:"路径"}),t("path",{d:"M1.78314661,-3.55271368e-15 L0,6.38440196 L1.53822445,6.38440196 C1.53822445,6.38440196 1.85246309,3.65248472 4.71387267,3.05707387 L8.34649409,3.05707387 L8.34649409,15.7217175 C8.34649409,15.7217175 7.82893489,18.5445138 4.85168533,18.6327951 L4.85168533,20.0000233 L10.009914,20.0000233 L9.97682802,-3.55271368e-15 L1.78314661,-3.55271368e-15 Z",id:"路径"})]})),Ee=e("svg",w({width:"22px",height:"22px",viewBox:"0 0 15 15",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t("polygon",{id:"路径",fill:"#B620E0",points:"1 9.91267592 5.1288569 9.91267592 5.1288569 14.0714286 1 14.0714286"}),t("polygon",{id:"路径备份",fill:"#000000",points:"1 5 5.1288569 5 5.1288569 9.15875266 1 9.15875266"}),t("polygon",{id:"路径备份-4",fill:"#2374B1",points:"1 0 5.1288569 0 5.1288569 4.15875266 1 4.15875266"}),t("polygon",{id:"路径",fill:"#F5BB1C",points:"5.76190476 9.96580339 10.047619 9.96580339 10.047619 14.0714286 5.76190476 14.0714286"}),t("polygon",{id:"路径备份-2",fill:"#6236FF",points:"5.76190476 5.05312747 10.047619 5.05312747 10.047619 9.15875266 5.76190476 9.15875266"}),t("polygon",{id:"路径备份-5",fill:"#F3F90D",points:"5.76190476 0.0531274706 10.047619 0.0531274706 10.047619 4.15875266 5.76190476 4.15875266"}),t("polygon",{id:"路径",fill:"#E02020",points:"11.0249931 9.96580339 15.2857143 9.96580339 15.2857143 14.0714286 11.0249931 14.0714286"}),t("polygon",{id:"路径备份-3",fill:"#32C5FF",points:"11.0249931 5.05312747 15.2857143 5.05312747 15.2857143 9.15875266 11.0249931 9.15875266"}),t("polygon",{id:"路径备份-6",fill:"#6DD400",points:"11.0249931 0.0531274706 15.2857143 0.0531274706 15.2857143 4.15875266 11.0249931 4.15875266"})]})),Se=e("svg",w({width:"27px",height:"20px",viewBox:"0 0 27 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t("path",{d:"M18.836393,4.00001629 L18.836393,5.60001815 C22.1563968,5.60001815 24.836393,8.28002127 24.836393,11.6000251 C24.836393,14.920029 22.1563968,17.6000321 18.836393,17.6000321 L18.836393,19.200034 C23.0363978,19.200034 26.4364018,15.80003 26.4364018,11.6000251 C26.4364018,7.40002025 23.0363978,4.00001629 18.836393,4.00001629 L18.836393,4.00001629 Z",id:"路径"}),t("path",{d:"M19.0363932,19.200034 L7.03637923,19.200034 C6.59637872,19.200034 6.2363783,18.8400336 6.2363783,18.400033 C6.2363783,17.9600325 6.59637872,17.6000321 7.03637923,17.6000321 L19.0363932,17.6000321 C19.4763937,17.6000321 19.8363941,17.9600325 19.8363941,18.400033 C19.8363941,18.8400336 19.4763937,19.200034 19.0363932,19.200034 Z M19.0363932,5.60001815 L3.23637481,5.60001815 C2.7963743,5.60001815 2.43637388,5.24001773 2.43637388,4.80001722 C2.43637388,4.36001671 2.7963743,4.00001629 3.23637481,4.00001629 L19.0363932,4.00001629 C19.4763937,4.00001629 19.8363941,4.36001671 19.8363941,4.80001722 C19.8363941,5.24001773 19.4763937,5.60001815 19.0363932,5.60001815 Z",id:"形状"}),t("path",{d:"M0.876372061,5.36001787 C0.556371689,5.0400175 0.556371689,4.54001692 0.876372061,4.22001655 L4.27637602,0.820012591 C4.59637639,0.500012218 5.09637697,0.500012218 5.41637734,0.820012591 C5.73637772,1.14001296 5.73637772,1.64001354 5.41637734,1.96001392 L2.01637339,5.36001787 C1.69637302,5.68001825 1.19637243,5.68001825 0.876372061,5.36001787 L0.876372061,5.36001787 Z",id:"路径"}),t("path",{d:"M0.876372061,4.24001657 C1.19637243,3.9200162 1.69637302,3.9200162 2.01637339,4.24001657 L5.41637734,7.64002053 C5.73637772,7.9600209 5.73637772,8.46002148 5.41637734,8.78002185 C5.09637697,9.10002223 4.59637639,9.10002223 4.27637602,8.78002185 L0.876372061,5.3800179 C0.556371689,5.06001752 0.556371689,4.54001692 0.876372061,4.24001657 L0.876372061,4.24001657 Z",id:"路径"})]})),_e=t("svg",w({width:"16px",height:"20px",viewBox:"0 0 16 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:t("path",{d:"M14.972272,8.59221224 C14.972272,7.78776209 14.3619892,7.14591356 13.5971013,7.14591356 L10.8467601,7.14591356 L10.8467601,1.44629867 C10.8467601,0.641848524 10.2364773,0 9.47158945,0 C8.70670164,0 8.09641881,0.641848524 8.09641881,1.44629867 L8.09641881,7.14591356 L5.50068253,7.14591356 C4.73579472,7.14591356 4.1255119,7.78776209 4.1255119,8.59221224 L4.1255119,10.0385109 L15.0455059,10.0385109 L15.0455059,8.59221224 L14.972272,8.59221224 L14.972272,8.59221224 L14.972272,8.59221224 Z M14.972272,11.4848096 C14.7444331,11.4848096 4.05227796,11.4848096 4.05227796,11.4848096 C4.05227796,11.4848096 3.28739015,20 0,20 L3.89767298,20 C5.42744859,20 6.11096536,15.3444587 6.11096536,15.3444587 C6.11096536,15.3444587 6.79448212,19.5207531 6.18419929,20 L8.32425774,20 C8.2510238,20 8.32425774,20 8.55209666,20 C9.61805732,19.8373984 9.77266231,14.7026102 9.77266231,14.7026102 C9.77266231,14.7026102 10.838623,19.9229782 10.6921551,19.9229782 C10.1551062,19.9229782 9.08914554,19.9229782 8.55209666,19.9229782 L8.55209666,19.9229782 L11.6848818,19.9229782 C11.5302768,19.9229782 11.6848818,19.9229782 11.9127207,19.9229782 C12.9054475,19.6833547 12.9786814,15.9092854 12.9786814,15.9092854 C12.9786814,15.9092854 13.4343593,19.9229782 13.2878914,19.9229782 C12.9054475,19.9229782 12.2951647,19.9229782 11.9127207,19.9229782 L11.8394868,19.9229782 L13.6703353,19.9229782 C16.4206765,20 16.5752815,15.9863072 14.972272,11.4848096 L14.972272,11.4848096 Z",id:"形状"})})),Oe=function(n){var o=n.className,a=n.fillColor,i=n.isPixel;return t("div",w({className:o?"toolpanel ".concat(o):"toolpanel"},{children:t(te.Consumer,{children:function(n){var o=n.type,s=n.setType;return e(r,{children:[t("span",w({title:"Pencil Tool",className:"tool-Icon"},{children:t("span",w({className:o===S.PEN?"tool-item ".concat("selected-tool"):"tool-item",onClick:function(){s(S.PEN)