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

a simple paint tool for ccc

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react"),require("antd"),require("@ant-design/icons"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react","antd","@ant-design/icons","prop-types"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).geneUI={},e.jsxRuntime,e.React,e.antd,e.icons,e.PropTypes)}(this,(function(e,t,n,r,a,o){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(n),l=i(o),c=function(e,t){return c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},c(e,t)};function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}c(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var p=function(){return p=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},p.apply(this,arguments)};function d(e,t,n,r){return new(n||(n=Promise))((function(a,o){function i(e){try{l(r.next(e))}catch(e){o(e)}}function s(e){try{l(r.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,s)}l((r=r.apply(e,t||[])).next())}))}function f(e,t){var n,r,a,o,i={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(o){return function(s){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;i;)try{if(n=1,r&&(a=2&o[0]?r.return:o[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,o[1])).done)return a;switch(r=0,a&&(o=[2&o[0],a.value]),o[0]){case 0:case 1:a=o;break;case 4:return i.label++,{value:o[1],done:!1};case 5:i.label++,r=o[1],o=[0];continue;case 7:o=i.ops.pop(),i.trys.pop();continue;default:if(!(a=i.trys,(a=a.length>0&&a[a.length-1])||6!==o[0]&&2!==o[0])){i=0;continue}if(3===o[0]&&(!a||o[1]>a[0]&&o[1]<a[3])){i.label=o[1];break}if(6===o[0]&&i.label<a[1]){i.label=a[1],a=o;break}if(a&&i.label<a[2]){i.label=a[2],i.ops.push(o);break}a[2]&&i.ops.pop(),i.trys.pop();continue}o=t.call(e,i)}catch(e){o=[6,e],r=0}finally{n=a=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,s])}}}function h(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var v,g,b,x,y;h(".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"}(v||(v={})),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"}(g||(g={})),function(e){e[e.SOLID=0]="SOLID",e[e.DOTTED=1]="DOTTED"}(b||(b={})),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"}(x||(x={})),function(e){e[e.MAIN=0]="MAIN",e[e.SUB=1]="SUB"}(y||(y={}));var m=function(e){if(j.strawFlag&&e){var t=C(j.ctx,e.x,e.y);j.strawColor=t,j.strawFlag=!1}},w=function(e,t,n,r){var a=e.getBoundingClientRect(),o=j.currentScale||1;return r?{x:(r.x-a.left)/o,y:(r.y-a.top)/o}:t?{x:(t.clientX-a.left)/o,y:(t.clientY-a.top)/o}:{x:0,y:0}},k=function(e,t){return{x:t.touches[0].pageX-e.offsetLeft,y:t.touches[0].pageY-e.offsetTop}},C=function(e,t,n){var r,a,o,i,s,l,c=e.getImageData(t,n,1,1).data;return r=c[0],a=c[1],o=c[2],i=c[3],l="#"+(s=function(e){var t=e.toString(16);return 1==t.length?"0"+t:t})(r)+s(a)+s(o),i?l+s(i):l},E=function(e){return!j.showArea||j.showArea.find((function(t){return t[0]===e.x&&t[1]===e.y}))},j=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}(),S=function(e){return"".concat(e>15?"":0).concat(e.toString(16))},_=function(e){var t=e.slice(1),n=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&&(n=parseInt(t.slice(6),16)/255,t=t.slice(0,6));var r=parseInt(t,16);return{r:r>>16&255,g:r>>8&255,b:255&r,a:n}},O=function(e){if(e.startsWith("#"))return _(e);if(e.startsWith("rgb"))return function(e){var t=e.match(/(\d(\.\d+)?)+/g)||[],n=t.map((function(e){return parseInt(e,10)}));return{r:n[0],g:n[1],b:n[2],a:parseFloat(t[3])}}(e);if("transparent"===e)return _("#00000000");throw new Error("color string error: ".concat(e))},A=function(e){return function(e,t){void 0===t&&(t=1e4);var n=e.r,r=e.g,a=e.b,o=e.a,i=void 0===o?1:o;return"rgba(".concat(n,",").concat(r,",").concat(a,",").concat(Math.floor(i*t)/t,")")}(O(e))},L=function(e){return e*e},T=function(e,t){return L(e.x-t.x)+L(e.y-t.y)},R=function(e,t){for(var n=e.canvas.width,r=e.canvas.height,a=t||e.getImageData(0,0,n,r).data,o=[],i=0;i<n;i+=j.OptPixel.size)for(var s=0;s<r;s+=j.OptPixel.size){var l=4*(u=s*n+i),c="rgba(".concat(a[l],",").concat(a[l+1],",").concat(a[l+2],")");o.push(c)}if(j.PixelBoxs.length>0){for(var u=0;u<o.length;u++)j.PixelBoxs[u].setColor(o[u]);M()}},D=function(e,t,n){j.ctx.lineWidth,j.OptPixel.size,j.PixelBoxs.forEach((function(r,a){var o={x:r.x,y:r.y};P(o,e,t,j.ctx.lineWidth)<=j.ctx.lineWidth&&j.PixelBoxs[a].setColor(n)})),M()},M=function(){j.ctx.clearRect(0,0,j.ctx.canvas.width,j.ctx.canvas.height);for(var e=0;e<j.PixelBoxs.length;e++){j.PixelBoxs[e].draw(j.ctx)}},P=function(e,t,n,r){var a=Math.min(t.x,n.x)-r,o=Math.max(t.x,n.x)+r,i=Math.min(t.y,n.y)-r,s=Math.max(t.y,n.y)+r;return(e.x<a||e.x>o)&&(e.y<i||e.y>s)?Number.MAX_VALUE:Math.sqrt(function(e,t,n){var r=T(t,n);if(0==r)return T(e,t);var a=((e.x-t.x)*(n.x-t.x)+(e.y-t.y)*(n.y-t.y))/r;return T(e,a<0?t:a>1?n:{x:t.x+a*(n.x-t.x),y:t.y+a*(n.y-t.y)})}(e,t,n))},z=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.lineWidthBase=1,t.drawColorType=y.MAIN,t.eraser="",t.mouseDown=!1,t.previousPos={x:0,y:0},t.penColor="",t}return u(t,e),t.prototype.operateStart=function(e){if(j.ctx){m(e),this.mouseDown=!0;var t=j.strawColor?j.strawColor:this.drawColorType===y.MAIN?j.mainColor:j.subColor,n=A(t);this.previousPos=e,this.penColor=n,j.ctx.lineWidth=j.isPixel?j.lineWidthFactor*this.lineWidthBase*j.OptPixel.size/2:j.lineWidthFactor*this.lineWidthBase,this.saveImageData=j.ctx.getImageData(0,0,j.ctx.canvas.width,j.ctx.canvas.height),j.ctx.strokeStyle=n,j.ctx.lineJoin="round",j.ctx.lineCap="round",j.ctx.beginPath(),j.isPixel&&D(e,e,this.penColor)}},t.prototype.operateMove=function(e){if(this.mouseDown){if(j.isPixel)return D(this.previousPos,e,this.penColor),void(this.previousPos=e);j.ctx.moveTo(this.previousPos.x,this.previousPos.y);var t=.5*(this.previousPos.x+e.x),n=.5*(this.previousPos.y+e.y);j.ctx.quadraticCurveTo(t,n,e.x,e.y),j.ctx.stroke(),this.previousPos=e}},t.prototype.operateEnd=function(){this.mouseDown&&(j.ctx.closePath(),this.mouseDown=!1)},t.prototype.onMouseDown=function(e){e.preventDefault();var t=w(j.ctx.canvas,e);E(t)&&this.operateStart(t)},t.prototype.onMouseUp=function(e){e.preventDefault(),this.operateEnd()},t.prototype.onMouseMove=function(e){e.preventDefault();var t=w(j.ctx.canvas,e);this.operateMove(t)},t.prototype.onTouchStart=function(e){e.cancelable&&e.preventDefault();var t=k(e.target,e);this.operateStart(t)},t.prototype.onTouchMove=function(e){e.cancelable&&e.preventDefault();var t=k(e.target,e);this.operateMove(t)},t.prototype.onTouchEnd=function(e){e.cancelable&&e.preventDefault(),this.operateEnd()},t}(j),B=function(e){function t(t){var n=e.call(this)||this;return n.lineWidthBase=1,n.mouseDown=!1,n.color="",n.previousPos={x:0,y:0},n.lineWidthBase=t,n.color="",n}return u(t,e),t.prototype.operateStart=function(e){if(j.ctx){this.saveImageData=j.ctx.getImageData(0,0,j.ctx.canvas.width,j.ctx.canvas.height),this.mouseDown=!0,this.previousPos=e,j.ctx.lineWidth=j.isPixel?this.lineWidthBase*j.OptPixel.size/2:this.lineWidthBase;var t={x:e.x-j.ctx.lineWidth,y:e.y-j.ctx.lineWidth};this.color=j.isPixel?function(e){for(var t=0;t<j.PixelBoxs.length;t++){var n=j.PixelBoxs[t];if(n.x-j.OptPixel.size/2<=e.x&&e.x<=n.x+j.OptPixel.size/2&&n.y-j.OptPixel.size/2<=e.y&&e.y<=n.y+j.OptPixel.size/2)return n.getColor()}return""}(t):C(j.ctx,e.x-2,e.y-2),console.log(this.color),j.ctx.strokeStyle=this.color,j.ctx.lineJoin="round",j.ctx.lineCap="round",j.ctx.beginPath(),j.isPixel&&D(e,e,this.color)}},t.prototype.operateMove=function(e){if(this.mouseDown){if(j.isPixel)return D(this.previousPos,e,this.color),void(this.previousPos=e);j.ctx.moveTo(this.previousPos.x,this.previousPos.y);var t=.5*(this.previousPos.x+e.x),n=.5*(this.previousPos.y+e.y);j.ctx.quadraticCurveTo(t,n,e.x,e.y),j.ctx.stroke(),this.previousPos=e}},t.prototype.operateEnd=function(){if(this.mouseDown)if(j.ctx.closePath(),this.mouseDown=!1,j.isPixel)R(j.ctx);else{var e=j.ctx.getImageData(0,0,j.ctx.canvas.width,j.ctx.canvas.height),t=(n=this.color,(r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n))?{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16),a:parseInt(r[4],16)}:null);t&&this.saveImageData&&(e=function(e,t,n){for(var r=0;r<t.height;r++)for(var a=0;a<t.width;a++){var o=r*t.width*4+4*a,i=t.data[o],s=t.data[o+1],l=t.data[o+2],c=t.data[o+3],u=e.data[o],p=e.data[o+1],d=e.data[o+2],f=e.data[o+3],h=i===u&&s===p&&l===d&&c===f,v=i===n[0]&&s===n[1]&&l===n[2]&&c===n[3];h||v||(t.data[o]=n[0],t.data[o+1]=n[1],t.data[o+2]=n[2],t.data[o+3]=n[3])}return t}(this.saveImageData,e,[t.r,t.g,t.b,t.a]),j.ctx.putImageData(e,0,0))}var n,r},t.prototype.onMouseDown=function(e){e.preventDefault();var t=w(j.ctx.canvas,e);E(t)&&this.operateStart(t)},t.prototype.onMouseUp=function(e){e.preventDefault(),this.operateEnd()},t.prototype.onMouseMove=function(e){e.preventDefault();var t=w(j.ctx.canvas,e);this.operateMove(t)},t.prototype.onTouchStart=function(e){e.cancelable&&e.preventDefault();var t=k(e.target,e);this.operateStart(t)},t.prototype.onTouchMove=function(e){e.cancelable&&e.preventDefault();var t=k(e.target,e);this.operateMove(t)},t.prototype.onTouchEnd=function(e){e.cancelable&&e.preventDefault(),this.operateEnd()},t}(j);!function(e){function t(t){var n=e.call(this)||this;return n.setColor=t,n}u(t,e),t.prototype.operateStart=function(e){var t=C(j.ctx,e.x,e.y);this.setColor(t)},t.prototype.onMouseDown=function(e){e.preventDefault();var t=w(j.ctx.canvas,e);this.operateStart(t)},t.prototype.onTouchStart=function(e){e.cancelable&&e.preventDefault();var t=e.target,n=k(t,e);this.operateStart(n)}}(j);var F=function(e,t,n){var r=e.data[t],a=e.data[t+1],o=e.data[t+2];return j.isPixel?Math.abs(r-n[0])<10&&Math.abs(a-n[1])<10&&Math.abs(o-n[2])<10:Math.abs(r-n[0])<30&&Math.abs(a-n[1])<30&&Math.abs(o-n[2])<30},N=function(e,t,n){return e.data[t]=n[0],e.data[t+1]=n[1],e.data[t+2]=n[2],e.data[t+3]=n[3],e},I=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.operateStart=function(e){var t=O(j.strawColor||j.fillColor||"#000000FF");console.time("efficentFloodFill");var n=[t.r,t.g,t.b,255*t.a];Promise.resolve().then((function(){!function(e,t,n,r){t=Math.round(t),n=Math.round(n);var a=[[Math.round(t),Math.round(n)]],o=e.canvas.width,i=e.canvas.height,s=4*(n*o+t),l=e.getImageData(0,0,o,i),c=[l.data[s],l.data[s+1],l.data[s+2],l.data[s+3]],u={};if(c[0]!==r[0]||c[1]!==r[1]||c[2]!==r[2]||c[3]!==r[3]){for(;a.length>0;){for(var p=a.pop(),d=p[0],f=p[1],h=4*(f*o+d);f-- >=0&&F(l,h,c);)h-=4*o;++f;var v=!1,g=!1;if(!u[h+=4*o])for(u[h]=!0;f++<i-1&&F(l,h,c);)N(l,h,r),d>0&&(F(l,h-4,c)?v||(a.push([d-1,f]),v=!0):v&&(v=!1)),d<o-1&&(F(l,h+4,c)?g||(a.push([d+1,f]),g=!0):g&&(g=!1)),h+=4*o}e.putImageData(l,0,0),j.isPixel&&R(j.ctx)}}(j.ctx,e.x,e.y,n)})),console.timeEnd("efficentFloodFill")},t.prototype.onMouseDown=function(e){var t=this;if(e.preventDefault(),!this.mouseDownTimer){var n=w(j.ctx.canvas,e);m(n),j.strawFlag||this.operateStart(n),this.mouseDownTimer=setTimeout((function(){clearTimeout(t.mouseDownTimer),t.mouseDownTimer=void 0}),300)}},t.prototype.onTouchStart=function(e){e.cancelable&&e.preventDefault();var t=k(e.target,e);this.operateStart(t)},t}(j);var H=function(e){function t(t){var n=e.call(this)||this;return n.isMouseDown=!1,n.calcCurrentElement=function(e){if(n.fontStyle){var t=n.fontStyle,r=t.fontSize;t.fontFamily;var a=t.color,o=t.letterSpacing;e.setAttribute("font-size",r),e.setAttribute("font-family",r),e.setAttribute("color",a),e.setAttribute("letterSpacing",o)}},n._x=NaN,n._y=NaN,n.textBox=document.getElementById("textBox"),n.canvasBox=document.getElementById("text-container"),n.allCanvas=document.getElementById("all-canvas"),n.mousePos={x:0,y:0},n.textContent="",n.fontStyle=p({fontSize:72,fontFamily:"System Font"},t),n.width=10,n.testList={},n}return u(t,e),t.prototype.drawingText=function(e,n,r){var a,o=document.createElement("textarea");function i(e){if(t.currentDown){var n=e.clientX-t.currentPos.x,r=e.clientY-t.currentPos.y;o.style.left=t.currentCanvas.x+n+"px",o.style.top=t.currentCanvas.y+r+"px"}}null===(a=this.allCanvas)||void 0===a||a.appendChild(o),o.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(j.currentScale,");\n      transform-origin: left top;")),o.addEventListener("mousedown",(function(e){o.style.transform="scale(".concat(j.currentScale,")"),t.currentDown=!0,t.currentPos={x:e.clientX,y:e.clientY},t.currentCanvas={x:Number(o.style.left.split("px")[0]),y:Number(o.style.top.split("px")[0])},o.addEventListener("mousemove",i)})),o.addEventListener("mouseup",(function(e){t.currentDown=!1,o.removeEventListener("mousemove",i),j.textList={data:o,textArea:o,event:e,pos:[Number(o.style.left.split("px")[0])+80,Number(o.style.top.split("px")[0])+80]}})),this.calcCurrentElement(o)},t.prototype.drawing=function(e,n,r){var a,o=document.createElement("canvas"),i=this.fontStyle,s=i.fontSize,l=i.fontFamily,c=i.color,u=i.lineHeight,p=void 0===u?24:u,d=i.letterSpacing,f=j.strawColor||c,h="".concat((new Date).getTime());function v(e){if(t.currentDown){var n=e.clientX-t.currentPos.x,r=e.clientY-t.currentPos.y;o.style.left=t.currentCanvas.x+n+"px",o.style.top=t.currentCanvas.y+r+"px"}}o.width=Math.ceil(this.textBox.clientWidth),o.height=Math.ceil(this.textBox.clientHeight),null===(a=this.allCanvas)||void 0===a||a.appendChild(o),o.setAttribute("style","position:absolute;left:".concat(this._x,"px;top:").concat(this._y,"px;cursor:pointer;transform:scale(").concat(j.currentScale,");transform-origin: left top;")),o.addEventListener("mousedown",(function(e){o.style.transform="scale(".concat(j.currentScale,")"),o.style.background="#362F395E",t.currentDown=!0,t.currentPos={x:e.clientX,y:e.clientY},t.currentCanvas={x:Number(o.style.left.split("px")[0]),y:Number(o.style.top.split("px")[0])},o.addEventListener("mousemove",v)})),o.addEventListener("mouseup",(function(e){t.currentDown=!1,o.removeEventListener("mousemove",v),o.style.background="transparent",j.textList[h]={data:o.toDataURL(),canvas:o,event:e,pos:[Number(o.style.left.split("px")[0])+80,Number(o.style.top.split("px")[0])+80]}}));var g=o.getContext("2d");if(g){g.fillStyle="#000",g.lineWidth=5,g.font="72px System Font",g&&this.fontStyle&&(g.fillStyle=f||"#000",g.font="".concat(s,"px ").concat(l),g.canvas&&d&&(g.canvas.style.letterSpacing=d));var b=[];r.forEach((function(e){var t=Number(g.measureText(e).width);if(t>o.width){o.width;var n=function(e,t){void 0===t&&(t=1);for(var n=t?Math.ceil(e.length/t):Math.ceil(e.length/1),r=new Array(n),a=0;a<n;a++)r[a]=e.substr(a*t,t);return r}(e,Math.floor((o.width-14)/Math.ceil(t/e.length)));b.push.apply(b,n)}else b.push(e)}));var x=o.height+(b.length-1)*p;g.canvas.style.height=x+"px";var y=Math.floor(o.height/b.length);b.length>0&&(b.forEach((function(e,t){g.fillText(e,7,y/2+s/4+y*t)})),j.textList[h]={data:o.toDataURL(),canvas:o,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(j.textList).forEach((function(e){var t,n=j.textList[e],r=n.data,a=n.pos,o=new Image;o.crossOrigin="anonymous",o.src=r,o.onload=function(){var e=w(j.ctx.canvas,void 0,0,{x:a[0],y:a[1]}),t=e.x,n=e.y;j.ctx.drawImage(o,t,n)},j.textList[e].canvas&&!j.isPixel&&(null===(t=document.getElementById("all-canvas"))||void 0===t||t.removeChild(j.textList[e].canvas))})),j.textList={}},t.prototype.onKeyDown=function(e){8==e.keyCode&&(Object.keys(j.textList).forEach((function(e){var t;j.textList[e].canvas&&!j.isPixel&&(null===(t=document.getElementById("all-canvas"))||void 0===t||t.removeChild(j.textList[e].canvas))})),j.textList={})},t.prototype.onMouseDown=function(e){e.preventDefault();var t=w(j.ctx.canvas,e);if(j.strawFlag)m(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 n="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        "),r=this.fontStyle,a=r.fontSize,o=r.fontFamily,i=r.color;r.lineHeight;var s=r.letterSpacing,l=j.strawColor||i;this.fontStyle&&(n="".concat(n,"; font-size:").concat(a,"px;font-family:").concat(o,";color:").concat(l,";letterSpacing:").concat(s,";"));var c=this.canvasBox.clientWidth-this._x;n="".concat(n," max-width:").concat(c,"px;"),a/2<260&&(n="".concat(n," width:").concat(260,"px;")),this.width=c,this.canvasBox.setAttribute("style","z-index:5;display:block,pointer-events:auto"),this.textBox.setAttribute("style",n)}},t.canvasList={},t}(j),U=function(e){function t(t,n){void 0===n&&(n=!1);var r=e.call(this)||this;return r.isMouseDown=!1,r.mouseDownPos={x:0,y:0},r.lineWidthBase=1,r.isDashed=!1,r.dashLineStyle=[10,10],r.type=t,r.isDashed=n,r}return u(t,e),t.prototype.setType=function(e){this.type=e},t.prototype.operateStart=function(e){m(e);var n=t.shapeWidth||1;this.saveImageData=j.ctx.getImageData(0,0,j.ctx.canvas.width,j.ctx.canvas.height),this.isMouseDown=!0,this.mouseDownPos=e,j.ctx.strokeStyle=j.mainColor,j.ctx.lineWidth=j.isPixel?n*j.OptPixel.size:n,j.ctx.fillStyle=j.subColor,this.isDashed&&j.ctx.setLineDash(this.dashLineStyle)},t.prototype.operateMove=function(e){var t=j.ctx;if(this.isMouseDown&&this.saveImageData){t.clearRect(0,0,j.ctx.canvas.width,j.ctx.canvas.height),t.putImageData(this.saveImageData,0,0);var n=function(e,t,n,r,a){var o=[],i=.5*(t+r),s=.5*(n+a);switch(e){case g.LINE:o.push({x:t,y:n}),o.push({x:r,y:a});break;case g.RECT:o.push({x:t,y:n}),o.push({x:r,y:n}),o.push({x:r,y:a}),o.push({x:t,y:a});break;case g.CIRCLE:o.push({x:.5*(t+r),y:.5*(n+a)});break;case g.RHOMBUS:o.push({x:i,y:n}),o.push({x:r,y:s}),o.push({x:i,y:a}),o.push({x:t,y:s});break;case g.TRIANGLE:o.push({x:i,y:n}),o.push({x:t,y:a}),o.push({x:r,y:a});break;case g.PENTAGON:o.push({x:i,y:n}),o.push({x:r,y:s}),o.push({x:.5*(i+r),y:a}),o.push({x:.5*(i+t),y:a}),o.push({x:t,y:s});break;case g.SEXANGLE:o.push({x:i,y:n}),o.push({x:r,y:.5*(n+s)}),o.push({x:r,y:.5*(a+s)}),o.push({x:i,y:a}),o.push({x:t,y:.5*(a+s)}),o.push({x:t,y:.5*(n+s)});break;case g.ARROW_TOP:o.push({x:i,y:n}),o.push({x:r,y:s}),o.push({x:r-1/3*(r-t),y:s}),o.push({x:r-1/3*(r-t),y:a}),o.push({x:t+1/3*(r-t),y:a}),o.push({x:t+1/3*(r-t),y:s}),o.push({x:t,y:s});break;case g.ARROW_RIGHT:o.push({x:r,y:s}),o.push({x:i,y:a}),o.push({x:i,y:a-1/3*(a-n)}),o.push({x:t,y:a-1/3*(a-n)}),o.push({x:t,y:n+1/3*(a-n)}),o.push({x:i,y:n+1/3*(a-n)}),o.push({x:i,y:n});break;case g.ARROW_DOWN:o.push({x:i,y:a}),o.push({x:t,y:s}),o.push({x:t+1/3*(r-t),y:s}),o.push({x:t+1/3*(r-t),y:n}),o.push({x:r-1/3*(r-t),y:n}),o.push({x:r-1/3*(r-t),y:s}),o.push({x:r,y:s});break;case g.ARROW_LEFT:o.push({x:t,y:s}),o.push({x:i,y:n}),o.push({x:i,y:n+1/3*(a-n)}),o.push({x:r,y:n+1/3*(a-n)}),o.push({x:r,y:a-1/3*(a-n)}),o.push({x:i,y:a-1/3*(a-n)}),o.push({x:i,y:a});break;case g.FOUR_STAR:var l=.125*(r-t),c=.125*(a-n);o.push({x:i,y:n}),o.push({x:i+l,y:s-c}),o.push({x:r,y:s}),o.push({x:i+l,y:s+c}),o.push({x:i,y:a}),o.push({x:i-l,y:s+c}),o.push({x:t,y:s}),o.push({x:i-l,y:s-c})}return o}(this.type,this.mouseDownPos.x,this.mouseDownPos.y,e.x,e.y);if(this.type===g.CIRCLE)t.beginPath(),t.ellipse(n[0].x,n[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(n[0].x,n[0].y);for(var r=1;r<n.length;r++)t.lineTo(n[r].x,n[r].y);t.closePath(),t.stroke()}j.isPixel&&R(j.ctx)}},t.prototype.operateEnd=function(){j.ctx.setLineDash([]),j.isPixel&&R(j.ctx),this.isMouseDown=!1,this.saveImageData=void 0},t.prototype.onMouseDown=function(e){e.preventDefault();var t=w(j.ctx.canvas,e);E(t)&&this.operateStart(t)},t.prototype.onMouseMove=function(e){e.preventDefault();var t=w(j.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,n=k(t,e);this.operateStart(n)},t.prototype.onTouchMove=function(e){e.cancelable&&e.preventDefault();var t=e.target,n=k(t,e);this.operateMove(n)},t.prototype.onTouchEnd=function(e){e.cancelable&&e.preventDefault(),this.operateEnd()},t.shapeWidth=1,t}(j),W=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}(),G=function(){function e(){this.events={}}return e.prototype.dispatch=function(e,t){var n=this.events[e];n&&n.fire(t)},e.prototype.on=function(e,t){var n=this.events[e];n||(n=new W(e),this.events[e]=n),n.registerCallback(t)},e.prototype.off=function(e,t){var n=this.events[e];n&&n.callbacks.indexOf(t)>-1&&(n.unregisterCallback(t),0===n.callbacks.length&&delete this.events[e])},e}(),X=n.createContext({type:v.PEN,setType:function(e){},strawType:!1,setStrawType:function(e){}}),Y=n.createContext({type:g.LINE,setType:function(e){}}),V=n.createContext({type:b.SOLID,setType:function(e){}}),Z=n.createContext({type:x.LINESIZE,setType:function(e){},lineSize:1,setLineSize:function(e){}}),K=n.createContext({mainColor:"black",subColor:"white",activeColor:y.MAIN,setColor:function(e){},setActiveColor:function(e){}}),q=n.createContext({fillColor:"black",setFillColor:function(e){}}),J=n.createContext({dispatcher:new G});n.createContext({size:{},onSize:function(e){}});var Q=n.createContext({fontStyle:{fontSize:72},setFont:function(e){}}),$="clear",ee="redo",te="undo",ne=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}(),re="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",ae="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==",oe="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==",ie="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==",se=r.Input.TextArea,le=1,ce=0,ue=0,pe=function(e){var r=e.id,a=e.toolType,o=e.lineWidthType,i=e.mainColor,s=e.subColor;e.setColor;var l=e.CanvasSize,c=e.fillColor,u=e.shapeType,d=e.shapeOutlineType,f=e.fontStyle,h=e.imgSrc,g=e.background,y=e.strawType,m=e.lineSize,w=void 0===m?1:m,k=n.useState(),C=k[0],E=k[1],S=n.useRef(null),_=n.useRef(null),O=n.useRef(null),A=n.useRef(null),L=n.useContext(J),T=n.useState(new ne)[0],R=n.useState(""),D=R[0],M=R[1];n.useEffect((function(){switch(P(),a){case v.PEN:E(new z);break;case v.ERASER:E(new B(w));break;case v.COLOR_FILL:E(new I);break;case v.TEXT:E(new H(f));break;case v.SHAPE:E(new U(u,d===b.DOTTED))}}),[a,u,f,w]),n.useEffect((function(){C instanceof U&&(C.isDashed=d===b.DOTTED)}),[d]),n.useEffect((function(){switch(o){case x.THIN:j.lineWidthFactor=1;break;case x.MIDDLE:j.lineWidthFactor=2;break;case x.BOLD:j.lineWidthFactor=3;break;case x.MAXBOLD:j.lineWidthFactor=4;break;case x.LINESIZE:j.lineWidthFactor=w}}),[o,w]),n.useEffect((function(){j.mainColor=i}),[i]),n.useEffect((function(){j.fillColor=c}),[c]),n.useEffect((function(){j.subColor=s}),[s]),n.useEffect((function(){var e=S.current;if(e){P(),j.ctx=e.getContext("2d");var t=L.dispatcher,n=function(){var t=e.getContext("2d");if(t)if(h){var n=new Image;n.crossOrigin="anonymous",n.src=h,n.onload=function(){var e=n.width,r=n.height;t.drawImage(n,0,0);var a=t.getImageData(0,0,e,r);t.putImageData(a,0,r),T.add(a)}}else t.fillStyle="#2d2d2d",t.fillRect(0,0,e.width,e.height)};t.on($,n);t.on(ee,(function(){var t=e.getContext("2d");if(t){var n=T.forward();n&&(t.clearRect(0,0,e.width,e.height),t.putImageData(n,0,0))}}));return t.on(te,(function(){var t=e.getContext("2d");if(t){var n=T.back();n&&(t.clearRect(0,0,e.width,e.height),t.putImageData(n,0,0))}})),function(){t.off($,n)}}}),[S]),n.useEffect((function(){P()}),[y]);var P=function(){var e,t=S.current,n=A.current,r=null===(e=null==n?void 0:n.resizableTextArea)||void 0===e?void 0:e.textArea;if(D&&M(""),t){if(y)return t.style.cursor="url(".concat(oe,") 12 16,auto");t.style.cursor=0===a?"url(".concat(re,") 12 16,auto"):4===a?"url(".concat(ae,") 12 16,auto"):1===a?"url(".concat(ie,") 12 16,auto"):"auto",2!==a&&n&&r&&r.setAttribute("style","z-index:-1;display:none")}};n.useEffect((function(){var e=_.current,t=S.current;if(l&&e&&t){j.ctx&&j.ctx.clearRect(0,0,t.width,null==t?void 0:t.height),function(){var e=S.current,t=_.current,n=O.current;if(e&&t&&n){var r=e.getContext("2d");if(h){var a=new Image;a.crossOrigin="anonymous",a.src=h,a.onload=function(){e.height=a.height,e.width=a.width,n.setAttribute("style","width:".concat(e.width,";height:").concat(e.height)),r.drawImage(a,0,0,e.width,e.height),T.add(r.getImageData(0,0,e.width,e.height))}}else l&&(e.height=l.height,e.width=l.width,r.fillStyle=g||"#2d2d2d",r.fillRect(0,0,e.width,e.height),T.add(r.getImageData(0,0,e.width,e.height)))}}();var n=e.clientHeight,r=e.clientWidth,a=Math.min(r,n)/Math.max(l.height,l.width)||1;le=a,j.currentScale=le,ce=(r-l.width*le)/2/le,ue=(n-l.height*le)/2,j.translate={translatex:ce,translatey:ue},t.style.transform="scale(".concat(le,") translate(").concat(ce,"px,").concat(ue,"px)")}}),[l]);var F=function(e){C&&C.onMouseDown(e)},N=function(e){D&&M(""),C&&(C.onMouseUp(e),T.add(j.ctx.getImageData(0,0,j.ctx.canvas.width,j.ctx.canvas.height)))},W=function(e){C&&C.onTouchStart(e)},G=function(e){C&&C.onTouchMove(e)},X=function(e){C&&C.onTouchEnd(e),T.add(j.ctx.getImageData(0,0,j.ctx.canvas.width,j.ctx.canvas.height))},Y=function(e,t,n,r,a,o){var i="width"===n?ce:ue,s=r[n]*t-r[n]*o;return(e-i-a["width"===n?"x":"y"])/(r[n]*o)*s},V=function(e){if(e.preventDefault(),a!==v.TEXT){var t=S.current,n=_.current,r=e.clientX,o=e.clientY;e.deltaX;var i,s=e.deltaY,c=e.ctrlKey,u=n.getBoundingClientRect(),p=u.width,d=u.height,f=u.x,h=u.y,g=n.getBoundingClientRect();if(g.width,g.height,c){s<0?(i=le+.1,i=Math.min(i,6)):(i=le-.1,i=Math.max(i,.1));var b=Y(r,i,"width",l,{width:p,height:d,x:f,y:h},le),x=Y(o,i,"height",l,{width:p,height:d,x:f,y:h},le);ce-=b,ue-=x,le=i,j.currentScale=i,j.translate={translatex:ce,translatey:ue},t.style.transform="translate3d(".concat(ce,"px, ").concat(ue,"px, 0px) scale(").concat(le,")")}}},Z=function(e){e.clientX,e.clientY;var t=e.deltaX,n=e.deltaY,r=e.ctrlKey;if(e.preventDefault(),a!==v.TEXT){var o=S.current;r||(t&&!n?ce=Number((ce-t).toFixed(3)):n&&!t&&(ue=Number((ue-n).toFixed(3))),j.translate={translatex:ce,translatey:ue},o.style.transform="translate(".concat(ce,"px, ").concat(ue,"px) scale(").concat(le,")"))}},K=function(e){C&&C.onKeyDown(e)},q=function(e){C&&C.onMouseMove(e)};n.useEffect((function(){var e=S.current,t=_.current;if(e&&t)return e.addEventListener("mousedown",F),e.addEventListener("mousemove",q),e.addEventListener("mouseup",N),e.addEventListener("wheel",V,{passive:!1}),e.addEventListener("touchstart",W),e.addEventListener("touchmove",G),e.addEventListener("touchend",X),window.addEventListener("keydown",K),t.addEventListener("wheel",Z,{passive:!1}),function(){e.removeEventListener("mousedown",F),e.removeEventListener("mousemove",q),e.removeEventListener("mouseup",N),e.removeEventListener("wheel",V),e.removeEventListener("touchstart",W),e.removeEventListener("touchmove",G),e.removeEventListener("touchend",X),t.removeEventListener("wheel",Z)}}),[S,F,q,N]);var Q={margin:"auto"};if(_&&l){var pe=_.current;pe&&(Q.margin=pe.offsetWidth<((null==l?void 0:l.width)||0)?"unset":"auto")}return t.jsxs("div",p({className:"all-canvas",ref:_,id:"all-canvas"},{children:[t.jsx("canvas",{id:"ccc-paint-canvas ".concat(r),className:"ccc-paint-canvas",ref:S,style:p({background:g},Q)}),t.jsx("div",p({className:"canvas-text",id:"text-container",ref:O},{children:t.jsx(se,{id:"textBox",ref:A,autoSize:!0,size:"small",name:"story",value:D,onChange:function(e){return M(e.target.value)},className:"text-box"})}))]}))};h('@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)}');h('.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 de=t.jsxs("svg",p({width:"20px",height:"20px",viewBox:"0 0 22 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t.jsx("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.jsx("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:"形状"})]})),fe=t.jsx("svg",p({width:"20px",height:"20px",viewBox:"0 0 21 21",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:t.jsx("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:"形状"})})),he=t.jsxs("svg",p({width:"20px",height:"20px",viewBox:"0 0 20 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t.jsx("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.jsx("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"})]})),ve=t.jsx("svg",p({width:"20px",height:"20px",viewBox:"0 0 20 21",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:t.jsx("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:"形状"})})),ge=t.jsxs("svg",p({width:"20px",height:"20px",viewBox:"0 0 20 21",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t.jsx("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.jsx("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:"路径"})]})),be=t.jsxs("svg",p({width:"22px",height:"22px",viewBox:"0 0 15 15",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t.jsx("polygon",{id:"路径",fill:"#B620E0",points:"1 9.91267592 5.1288569 9.91267592 5.1288569 14.0714286 1 14.0714286"}),t.jsx("polygon",{id:"路径备份",fill:"#000000",points:"1 5 5.1288569 5 5.1288569 9.15875266 1 9.15875266"}),t.jsx("polygon",{id:"路径备份-4",fill:"#2374B1",points:"1 0 5.1288569 0 5.1288569 4.15875266 1 4.15875266"}),t.jsx("polygon",{id:"路径",fill:"#F5BB1C",points:"5.76190476 9.96580339 10.047619 9.96580339 10.047619 14.0714286 5.76190476 14.0714286"}),t.jsx("polygon",{id:"路径备份-2",fill:"#6236FF",points:"5.76190476 5.05312747 10.047619 5.05312747 10.047619 9.15875266 5.76190476 9.15875266"}),t.jsx("polygon",{id:"路径备份-5",fill:"#F3F90D",points:"5.76190476 0.0531274706 10.047619 0.0531274706 10.047619 4.15875266 5.76190476 4.15875266"}),t.jsx("polygon",{id:"路径",fill:"#E02020",points:"11.0249931 9.96580339 15.2857143 9.96580339 15.2857143 14.0714286 11.0249931 14.0714286"}),t.jsx("polygon",{id:"路径备份-3",fill:"#32C5FF",points:"11.0249931 5.05312747 15.2857143 5.05312747 15.2857143 9.15875266 11.0249931 9.15875266"}),t.jsx("polygon",{id:"路径备份-6",fill:"#6DD400",points:"11.0249931 0.0531274706 15.2857143 0.0531274706 15.2857143 4.15875266 11.0249931 4.15875266"})]})),xe=t.jsxs("svg",p({width:"27px",height:"20px",viewBox:"0 0 27 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:[t.jsx("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.jsx("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.jsx("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.jsx("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:"路径"})]})),ye=t.jsx("svg",p({width:"16px",height:"20px",viewBox:"0 0 16 20",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{children:t.jsx("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,1