-var shape,fill,points=[],x=y=0,c=document.getElementById("myCanvas"),ctx=c.getContext("2d"),color="#000000",border=1;function getMousePos(e,t){var n=e.getBoundingClientRect();x=t.clientX-n.left,y=t.clientY-n.top}function _wb_event(e,t){}function F_Points(){void 0!=shape&&(points[points.length]=[shape,color,border,[[x,y]]])}var tmp=0;function T_Points(){"Pencil"==shape||"bezier"==shape?(tmp=points[points.length-1][3].length,points[points.length-1][1]=color,points[points.length-1][2]=border,points[points.length-1][3][tmp]=[x,y]):void 0!=shape&&(points[points.length-1][1]=color,points[points.length-1][2]=border,points[points.length-1][3][0][2]=x,points[points.length-1][3][0][3]=y,points[points.length-1][4]=fill)}function Color(e){color=e.value}function bordersize(e){border=e.value}function filled(e){fill=e.checked}function draw(e,t){ctx.beginPath(),ctx.lineWidth=e[2],ctx.fillStyle=e[1],ctx.strokeStyle=e[1],"Line"==e[0]&&(ctx.moveTo(e[3][0][0],e[3][0][1]),ctx.lineTo(e[3][0][2],e[3][0][3])),"Circle"==e[0]&&ctx.arc(e[3][0][0],e[3][0][1],Math.sqrt((e[3][0][2]-e[3][0][0])*(e[3][0][2]-e[3][0][0])+(e[3][0][3]-e[3][0][1])*(e[3][0][3]-e[3][0][1])),0,2*Math.PI),"Rectangle"==e[0]&&(e[4]?ctx.fillRect(e[3][0][0],e[3][0][1],e[3][0][2]-e[3][0][0],e[3][0][3]-e[3][0][1]):ctx.strokeRect(e[3][0][0],e[3][0][1],e[3][0][2]-e[3][0][0],e[3][0][3]-e[3][0][1])),"clearRect"==e[0]&&ctx.clearRect(e[3][0][0],e[3][0][1],e[3][0][2]-e[3][0][0],e[3][0][3]-e[3][0][1]),"ellipse"==e[0]&&ctx.ellipse(e[3][0][0],e[3][0][1],Math.abs(e[3][0][2]-e[3][0][0]),Math.abs(e[3][0][3]-e[3][0][1]),0,0,2*Math.PI,!1),"Pencil"==e[0]&&(ctx.moveTo(e[3][0][0],e[3][0][1]),e[3].forEach(e=>{ctx.lineTo(e[0],e[1])})),"bezier"==e[0]&&(ctx.moveTo(e[3][0][0],e[3][0][1]),e[3].forEach(e=>{ctx.bezierCurveTo(e[0],e[1])})),e[4]&&ctx.fill(),ctx.stroke()}var go=!1;function buttons(e){shape=e.getAttribute("data")}function Clear(){points=[],ctx.clearRect(0,0,c.width,c.height)}function download(){let e=document.getElementById("myCanvas"),t=document.createElement("a"),n=e.toDataURL();t.href=n,t.download="KChat-{{ __("lang.whiteboard") }}.png",t.click()}function download_json(){let e=JSON.stringify(points),t=btoa(e),n=document.createElement("a");n.href="data:text/plain;base64,"+t,n.download="KChat-{{ __("lang.whiteboard") }}.json",n.click()}c.addEventListener("drag",function(e){_wb_event(e,"drag")},!1),c.addEventListener("click",function(e){_wb_event(e,"click")},!1),c.addEventListener("drop",function(e){_wb_event(e,"drop")},!1),c.addEventListener("keydown",function(e){_wb_event(e,"keydown")},!1),c.addEventListener("keypress",function(e){_wb_event(e,"keypress")},!1),c.addEventListener("keyup",function(e){_wb_event(e,"keyup")},!1),c.addEventListener("mousedown",function(e){_wb_event(e,"mousedown"),F_Points(),go=!0},!1),c.addEventListener("mouseenter",function(e){_wb_event(e,"mouseenter")},!1),c.addEventListener("mouseleave",function(e){_wb_event(e,"mouseleave")},!1),c.addEventListener("mousemove",function(e){_wb_event(e,"mousemove"),getMousePos(c,e),go&&(ctx.clearRect(0,0,c.width,c.height),points.forEach(draw),T_Points())},!1),c.addEventListener("mouseover",function(e){_wb_event(e,"mouseover")},!1),c.addEventListener("mouseout",function(e){_wb_event(e,"mouseout")},!1),c.addEventListener("mouseup",function(e){_wb_event(e,"mouseup"),T_Points(),go=!1,points.forEach(draw)},!1),c.addEventListener("mousewheel",function(e){_wb_event(e,"mousewheel")},!1),c.addEventListener("offline",function(e){_wb_event(e,"offline")},!1),c.addEventListener("online",function(e){_wb_event(e,"online")},!1);
0 commit comments