const module=document.querySelector("div#SKF-Planning-Module"),canvas=document.querySelector("#SKF-Planning-canvas"),ctx=canvas.getContext("2d"),angleInputSlider=document.querySelector("#SKF-Planning-angleInputSlider"),angleInputManual=document.querySelector("#SKF-Planning-angleInputManual"),lengthInputSlider=document.querySelector("#SKF-Planning-lengthInputSlider"),lengthInputManual=document.querySelector("#SKF-Planning-lengthInputManual"),thicknessInput=document.querySelector("#SKF-Planning-thicknessInput"),addButton=document.querySelector("#SKF-Planning-addLineButton"),scaleUpButton=document.querySelector("#SKF-Planning-scaleup"),scaleDownButton=document.querySelector("#SKF-Planning-scaledown"),pathInput=document.querySelector("#SKF-Planning-pathInput"),materialInput=document.querySelector("#SKF-Planning-materialInput"),lineSeparator=document.querySelector("#SKF-Planning-Options #lineSep"),deleteHeader=document.querySelector("#SKF-Planning-Delete-Head");let angleInput=0,lengthInput=0,scale=1,path=[{length:100,angle:0},{length:100,angle:180}],lastPoint={x:0,y:0},angle=180,isDragging=!1,lastX=0,lastY=0,thickness=thicknessInput.value,material=materialInput.value;function isModuleInView(){let e=canvas.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function updateTempLine(){ctx.save(),angleInput=parseFloat(angleInputSlider.value),lengthInput=parseInt(lengthInputSlider.value);let e=(angleInput+angle)*Math.PI/180,t=lengthInput,n=lastPoint.x+t*Math.cos(e),a=lastPoint.y+t*Math.sin(e);clearCanvas(),drawPath(path),ctx.beginPath(),ctx.strokeStyle="red",ctx.lineWidth=thickness,ctx.moveTo(lastPoint.x,lastPoint.y),ctx.lineTo(n,a),ctx.stroke(),ctx.restore()}function addPoint(){angle+=angleInput;let e=lengthInput,t=lastPoint.x+e*Math.cos(angle*Math.PI/180),n=lastPoint.y+e*Math.sin(angle*Math.PI/180);lastPoint={x:t,y:n};let a={length:e,angle:angleInput};path.push(a),drawPath(path),angleInputManual.value=0,angleInputSlider.value=0,updateTempLine(),populatePathTable()}function drawPath(e){clearCanvas(),ctx.save(),ctx.beginPath(),ctx.lineCap="round",ctx.strokeStyle=material,ctx.lineWidth=thickness;let t={x:0,y:0},n=0,a=0;for(let l=0;l<e.length;l++){n+=e[l].angle,a=e[l].angle;let i=t.x+e[l].length*Math.cos(n*Math.PI/180),u=t.y+e[l].length*Math.sin(n*Math.PI/180);ctx.lineTo(i,u),t={x:i,y:u},lastPoint={x:i,y:u}}ctx.stroke(),ctx.restore()}function populatePathTable(){pathInput.innerHTML="";for(let e=2;e<path.length;e++){deleteHeader.style.display="initial";let t=document.createElement("tr"),n=document.createElement("td");n.textContent=e-1;let a=document.createElement("td"),l=document.createElement("input");l.type="number",l.value=path[e].length,l.onchange=function(){path[e].length=parseFloat(this.value),drawPath(path),updateTempLine()},a.appendChild(l);let i=document.createElement("td"),u=document.createElement("input");u.type="number",u.value=path[e].angle,u.onchange=function(){path[e].angle=parseFloat(this.value),recalculateAngels(),drawPath(path),updateTempLine()},i.appendChild(u);let p=document.createElement("td");p.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16"><path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/></svg>',p.onclick=removeLine.bind(this,e),p.className="SKF-Planning-DeleteRow",t.appendChild(n),t.appendChild(a),t.appendChild(i),t.appendChild(p),pathInput.appendChild(t)}}function removeLine(e){deleteHeader.style.display="none",path.splice(e,1),recalculateAngels(),drawPath(path),updateTempLine(),populatePathTable()}function recalculateAngels(){angle=0;for(let e=0;e<path.length;e++)angle+=path[e].angle}function updateCanvasSize(){canvas.width=Math.min(.85*canvas.parentElement.clientWidth-10,40*parseFloat(getComputedStyle(document.documentElement).fontSize)),canvas.height=Math.min(13*canvas.width/22,20*parseFloat(getComputedStyle(document.documentElement).fontSize)),positionCanvas(),setupLineSep()}function scaleUp(){scale*=1.1,ctx.scale(1.1,1.1),drawPath(path),updateTempLine()}function scaleDown(){scale*=.9,ctx.scale(.9,.9),drawPath(path),updateTempLine()}function positionCanvas(){ctx.setTransform(1,0,0,1,0,0),ctx.clearRect(0,0,canvas.width,canvas.height),ctx.translate(ctx.canvas.width/2,ctx.canvas.height-65),ctx.save(),drawPath(path),updateTempLine()}function clearCanvas(){ctx.save(),ctx.setTransform(1,0,0,1,0,0),ctx.clearRect(0,0,canvas.width,canvas.height),ctx.restore()}function setupLineSep(){width=1,height=.8,verticalWidth=.95;let e=lineSeparator.parentElement.querySelector(".SKF-Planning-Options-Line").getBoundingClientRect();window.innerWidth>=850?(lineSeparator.style.width=width+"px",lineSeparator.style.height=100*height+"%",lineSeparator.style.left=lineSeparator.parentElement.clientWidth/2-width/2+"px",lineSeparator.style.top=(lineSeparator.parentElement.clientHeight-lineSeparator.parentElement.clientHeight*height)/2+"px"):(lineSeparator.style.height=width+"px",lineSeparator.style.width=100*verticalWidth+"%",lineSeparator.style.left=(lineSeparator.parentElement.clientWidth-lineSeparator.parentElement.clientWidth*verticalWidth)/2+"px",lineSeparator.style.top=e.height+1*parseFloat(getComputedStyle(document.documentElement).fontSize)+width/2+"px")}scaleUpButton.addEventListener("click",scaleUp),scaleDownButton.addEventListener("click",scaleDown),window.addEventListener("resize",updateCanvasSize),angleInputSlider.addEventListener("input",function(){angleInputManual.value=angleInputSlider.value}),angleInputManual.addEventListener("input",function(){angleInputSlider.value=angleInputManual.value}),lengthInputSlider.addEventListener("input",function(){lengthInputManual.value=lengthInputSlider.value}),lengthInputManual.addEventListener("input",function(){lengthInputSlider.value=lengthInputManual.value}),thicknessInput.addEventListener("input",function(){thickness=thicknessInput.value,drawPath(path),updateTempLine()}),materialInput.addEventListener("input",function(){material=materialInput.value,drawPath(path),updateTempLine()}),angleInputSlider.addEventListener("input",updateTempLine),angleInputManual.addEventListener("input",updateTempLine),lengthInputSlider.addEventListener("input",updateTempLine),lengthInputManual.addEventListener("input",updateTempLine),addButton.addEventListener("click",addPoint),canvas.addEventListener("mousedown",e=>{canvas.style.cursor="grabbing",document.body.style.cursor="grabbing",isDragging=!0,lastX=e.clientX,lastY=e.clientY}),window.addEventListener("mousemove",e=>{if(isDragging){e.preventDefault();let t=e.clientX-lastX,n=e.clientY-lastY;ctx.translate(t,n),drawPath(path),updateTempLine(),lastX=e.clientX,lastY=e.clientY}}),window.addEventListener("mouseup",e=>{canvas.style.cursor="grab",document.body.style.cursor="initial",isDragging=!1}),canvas.addEventListener("touchstart",e=>{isDragging=!0,lastX=e.touches[0].clientX,lastY=e.touches[0].clientY}),window.addEventListener("touchmove",e=>{if(isDragging){e.preventDefault();let t=e.touches[0].clientX-lastX,n=e.touches[0].clientY-lastY;ctx.translate(t,n),clearCanvas(),drawPath(path),updateTempLine(),lastX=e.touches[0].clientX,lastY=e.touches[0].clientY}},{passive:!1}),window.addEventListener("touchend",e=>{isDragging=!1}),window.addEventListener("keypress",function(e){isModuleInView()&&13==e.keyCode&&(e.preventDefault(),addPoint())}),window.addEventListener("keydown",function(e){if(isModuleInView())switch(e.keyCode){case 37:e.preventDefault(),angleInputSlider.value=parseInt(angleInputSlider.value)-1,angleInputManual.value=angleInputSlider.value,updateTempLine();break;case 38:e.preventDefault(),lengthInputSlider.value=parseInt(lengthInputSlider.value)+1,lengthInputManual.value=lengthInputSlider.value,updateTempLine();break;case 39:e.preventDefault(),angleInputSlider.value=parseInt(angleInputSlider.value)+1,angleInputManual.value=angleInputSlider.value,updateTempLine();break;case 40:e.preventDefault(),lengthInputSlider.value=parseInt(lengthInputSlider.value)-1,lengthInputManual.value=lengthInputSlider.value,updateTempLine();break;case 107:e.preventDefault(),scaleUp();break;case 109:e.preventDefault(),scaleDown()}}),updateTempLine(),updateCanvasSize(),positionCanvas(),populatePathTable(),setupLineSep();