/* keep working... Notes: id in element list = type-id ex. Line-line1, Segment-sg1, Point-pt1 and show as "id (type)" */ window.onload = () => { setups(); mapSize = 10; // default mapCenter = [0,0]; // default setCoordinate(mapSize, mapCenter); setupTouchEvents(); elements = []; var xAxis = new Line("X-Axis", [0,0], [1,0], "#000" ,true, true), yAxis = new Line("Y-Axis", [0,0], [0,1], "#000" ,true, true); var l = new Line("line", [-3,-3], [3,3], "magenta", true), p1 = new Point("test", [-3,-3], "yellow"), p2 = new Point("test2", [3,3], "blue"), sg = new Line("segment", [-3,3], [3,-3], "sienna"), p3 = new Point("test3", [-3,3], "lime"), p4 = new Point("test4", [3,-3], "red"); setInterval(() =>{ xAxis.reconstruct(); yAxis.reconstruct(); for(var p=0;p {if(!stopMoving){ switch(e.touches.length){ case 3: setCoordinate(mapRange, mapCenter); break; case 4: setCoordinate(mapSize, mapCenter); break; } firstPoint = e.touches[0]; secondPoint = e.touches[1]; if(secondPoint){ touchPointDist = Math.sqrt ((firstPoint.clientX - secondPoint.clientX)**2 +(firstPoint.clientY - secondPoint.clientY)**2); } fillInputs();} }); Data.addEL("bg", "touchmove", (e)=> {if(!stopMoving){ xModify += (e.touches[0].clientX - firstPoint.clientX)/gridlen/5; yModify -= (e.touches[0].clientY - firstPoint.clientY)/gridlen/5; if(touchPointDist){ mapRange /= Math.sqrt ((e.touches[0].clientX - e.touches[1].clientX)**2 +(e.touches[0].clientY - e.touches[1].clientY)**2)/touchPointDist; setCoordinate(mapRange, [xModify-mapRange/2, yModify-mapRange/2]); touchPointDist = Math.sqrt ((firstPoint.clientX - secondPoint.clientX)**2 +(firstPoint.clientY - secondPoint.clientY)**2); } firstPoint = e.touches[0]; secondPoint = e.touches[1]; fillInputs();} }); Data.addEL("bg", "touchend", (e)=>{ firstPoint = e.touches[0]; secondPoint = e.touches[1]; if(secondPoint) touchPointDist = Math.sqrt ((firstPoint.clientX - secondPoint.clientX)**2 +(firstPoint.clientY - secondPoint.clientY)**2); else touchPointDist = undefined; }); Data.addEL("menu", "click", ()=>{ if(Data.getVal("menu_list", "display")=="none") Data.getSt("menu_list"). display = "block"; else{ Data.getSt("menu_list"). display = "none"; Data.getSt("setting_list"). display = "none"; Data.getSt("element_list"). display = "none"; Data.getSt("range_box"). display = "none"; Data.getSt("center_box"). display = "none"; Data.getSt("add_types"). display = "none"; Data.getSt("add_box").display = "none"; } }); Data.addEL("mapset", "click", ()=>{ Data.getSt("element_list").display = "none"; Data.getSt("add_types"). display = "none"; Data.getSt("add_box"). display = "none"; if(Data.getVal("setting_list", "display")=="none") Data.getSt("setting_list"). display = "block"; else{ Data.getSt("setting_list"). display = "none"; Data.getSt("range_box").display = "none"; Data.getSt("center_box"). display = "none"; } }); Data.addEL("elements", "click", ()=>{ Data.getSt("setting_list").display = "none"; Data.getSt("range_box").display = "none"; Data.getSt("center_box").display = "none"; Data.getSt("add_types"). display = "none"; Data.getSt("add_box"). display = "none"; if(Data.getVal("element_list", "display")=="none"){ Data.getSt("element_list"). height = (elements.length<5?5.5*elements. length:27.5) + "%"; listElmts(); Data.getSt("element_list"). display = "block"; }else{ Data.getSt("element_list"). display = "none"; var eldivlist = Data.getEl ("element_list").children; for(p=eldivlist.length-1; p>-1; p--) Data.getEl ("element_list").removeChild(eldivlist[p]); } }); Data.addEL("element_list", "touchstart", ()=>stopMoving=true); Data.addEL("element_list", "touchend", ()=>stopMoving=false); Data.addEL("add_element", "click", ()=>{ Data.getSt("setting_list").display = "none"; Data.getSt("element_list").display = "none"; Data.getSt("range_box"). display = "none"; Data.getSt("center_box"). display = "none"; if(Data.getVal("add_types", "display")=="none"){ Data.getSt("add_types"). display = "block"; }else{ Data.getSt("add_types"). display = "none"; Data.getSt("add_box").display = "none"; } }); Data.addEL("default_size", "click", ()=>{ Data.getSt("center_box"). display = "none"; if(setRange==null || setRange=="temp"){ setRange = "default"; Data.getSt("range_box"). display = "block"; Data.getSt("range_box").top = "0%"; Data.getEl("XD").value = -mapCenter[0] - mapSize/2; Data.getEl("XU").value = -mapCenter[0] + mapSize/2; Data.getEl("YD").value = -mapCenter[1] - mapSize/2; Data.getEl("YU").value = -mapCenter[1] + mapSize/2; }else{ setRange = null; Data.getSt("range_box"). display = "none"; } }); Data.addEL("temp_size", "click", ()=>{ Data.getSt("center_box"). display = "none"; if(setRange==null || setRange=="default"){ setRange = "temp"; Data.getSt("range_box"). display = "block"; Data.getSt("range_box").top = "5.5%"; Data.getEl("XD").value = - xModify; Data.getEl("XU").value = - xModify + mapRange; Data.getEl("YD").value = - yModify; Data.getEl("YU").value = - yModify + mapRange; }else{ setRange = null; Data.getSt("range_box"). display = "none"; } }); Data.addEL("default_center", "click", ()=>{ Data.getSt("range_box").display = "none"; if(setCenter==null || setCenter=="temp"){ setCenter = "default"; Data.getSt("center_box"). display = "block"; Data.getSt("center_box").top = "11%"; Data.getEl("centerX").value = -mapCenter[0]; Data.getEl("centerY").value = -mapCenter[1]; }else{ setCenter = null; Data.getSt("center_box"). display = "none"; } }); Data.addEL("temp_center", "click", ()=>{ Data.getSt("range_box").display = "none"; if(setCenter==null || setCenter=="default"){ setCenter = "temp"; Data.getSt("center_box"). display = "block"; Data.getSt("center_box").top = "16.5%"; Data.getEl("centerX").value = - xModify + mapRange/2; Data.getEl("centerY").value = - yModify + mapRange/2; }else{ setCenter = null; Data.getSt("center_box"). display = "none"; } }); Data.addEL("XD", "keyup", (e)=>{ if(e.keyCode===13){ if(isNaN(parseFloat(Data. getEl("XD").value))) Data.getEl("XD").value = setRange== "default"? -mapCenter[0] - mapSize/2: -xModify; Data.getEl("XU").focus(); } }); Data.addEL("XU", "keyup", (e)=>{ if(e.keyCode===13){ if(isNaN(parseFloat(Data. getEl("XU").value))) Data.getEl("XU").value = setRange== "default"? -mapCenter[0] + mapSize/2: -xModify +mapRange; if(parseFloat(Data. getEl("XU").value){ if(e.keyCode===13){ if(isNaN(parseFloat(Data. getEl("YD").value))) Data.getEl("YD").value = setRange== "default"? -mapCenter[1] - mapSize/2: -yModify; Data.getEl("YU").focus(); } }); Data.addEL("YU", "keyup", (e)=>{ if(e.keyCode===13){ if(isNaN(parseFloat(Data. getEl("YU").value))) Data.getEl("YU").value = setRange== "default"? -mapCenter[1] + mapSize/2: -yModify +mapRange; if(parseFloat(Data. getEl("YU").value){ if(e.keyCode===13){ if(isNaN(parseFloat(Data. getEl("centerX").value))) Data.getEl("centerX").value = setCenter== "default"? -mapCenter[0]: -xModify + mapRange/2; Data.getEl("centerY").focus(); } }); Data.addEL("centerY", "keyup", (e)=>{ if(e.keyCode===13){ if(isNaN(parseFloat(Data. getEl("centerY").value))) Data.getEl("centerY").value = setCenter== "default"? -mapCenter[1]: -yModify + mapRange/2; if(setCenter=="default"){ mapCenter[0] = -parseFloat (Data.getEl("centerX").value); mapCenter[1] = -parseFloat (Data.getEl("centerY").value); }else{ xModify = mapRange/2 - parseFloat(Data.getEl("centerX").value); yModify = mapRange/2 - parseFloat(Data.getEl("centerY").value); } document.activeElement.blur(); } }); Data.addEL("add_point","click",()=>{ if(adding!="Point"){ adding = "Point"; Data.getSt("add_box"). display = "block"; Data.getSt("add_box").top = "11%"; Data.getSt("pt2_box").display = "none"; }else{ Data.getSt("add_box"). display = "none"; adding = null; } }); Data.addEL("add_segment","click",()=>{ if(adding!="Segment"){ adding = "Segment"; Data.getSt("add_box"). display = "block"; Data.getSt("add_box").top = "16.5%"; Data.getSt("pt2_box").display = "block"; }else{ Data.getSt("add_box"). display = "none"; adding = null; } }); Data.addEL("add_line","click",()=>{ if(adding!="Line"){ adding = "Line"; Data.getSt("add_box"). display = "block"; Data.getSt("add_box").top = "22%"; Data.getSt("pt2_box").display = "block"; }else{ Data.getSt("add_box"). display = "none"; adding = null; } }); Data.addEL("elmt_id", "keyup", (e)=>{ if(e.keyCode===13){ Data.getEl("pt1X").focus(); } }); Data.addEL("pt1X", "keyup", (e)=>{ if(e.keyCode===13){ Data.getEl("pt1Y").focus(); } }); Data.addEL("pt1Y", "keyup", (e)=>{ if(e.keyCode===13){ Data.getEl(adding=="Point"? "color":"pt2X").focus(); } }); Data.addEL("pt2X", "keyup", (e)=>{ if(e.keyCode===13){ Data.getEl("pt2Y").focus(); } }); Data.addEL("pt2Y", "keyup", (e)=>{ if(e.keyCode===13){ Data.getEl("color").focus(); } }); Data.addEL("color", "keyup", (e)=>{ if(e.keyCode===13){ checkAdding(); } }); } function fillInputs(){ Data.getEl("XD").value = setRange== "default"? -mapCenter[0] - mapSize/2: -xModify; Data.getEl("XU").value = setRange== "default"? -mapCenter[0] + mapSize/2: -xModify +mapRange; Data.getEl("YD").value = setRange== "default"? -mapCenter[1] - mapSize/2: -yModify; Data.getEl("YU").value = setRange== "default"? -mapCenter[1] + mapSize/2: -yModify +mapRange; Data.getEl("centerX").value = setCenter== "default"? -mapCenter[0]: -xModify + mapRange/2; Data.getEl("centerY").value = setCenter== "default"? -mapCenter[1]: -yModify + mapRange/2; } function clearAdding(){ Data.getEl("elmt_id").value = ""; Data.getEl("pt1X").value = ""; Data.getEl("pt1Y").value = ""; Data.getEl("pt2X").value = ""; Data.getEl("pt2Y").value = ""; Data.getEl("color").value = "#000"; } function listElmts(){ // list out elements var prnt = "element_list"; for(var p=0; p{ var pad = -(Data.getEl ("element_list").scrollTop)*Data.getValPx ("element_list","height")/100 + (elements. indexOf(eldiv.src)+1)*5.5*unitlen; Data.getSt("change_box").top = pad + "px"; }); } // need modifying function closeChildren(node){ for(var p=0; pinnerHeight?"vh":"vw"; unitlen = innerWidth>innerHeight? innerHeight/100: innerWidth/100; } function setupTextFields(){ //alert(document.constructor.name) document.styleSheets[0].addRule(".txt", "font-size: " + 4 + unit + ";"); document.styleSheets[0].addRule(".txt", "width: " + 100 + unit + ";"); Data.getSt("text_field1").top=0+unit; Data.getSt("text_field2").top=5+unit; } function setupBG(pad=[0,0]){ Data.getSt("bg").width = 100 + unit; Data.getSt("bg").height = 100 + unit; Data.getSt("bg").position = "absolute"; Data.getSt("bg").left = pad[0] + unit; Data.getSt("bg").top = pad[1] + unit; } function setupMenu(){ document.styleSheets[0].addRule (".menu", "height: " + 5 + unit + ";"); document.styleSheets[0].addRule (".menu", "font-size: " + 4 + unit + ";"); document.styleSheets[0].addRule (".menu", "border: " + .25 + unit + " solid black;"); } function setupPrint(){ // ----- print field ----- var pfs = Data.getSt("print_field"); pfs.fontSize = 5 + unit; if(unit=="vw"){ if(innerHeight < 110 * unitlen) pfs.bottom = (innerHeight - 110 * unitlen) + "px"; else pfs.bottom = 0; pfs.left = 0; pfs.width = "100%"; if(printMinimum) pfs.height = "5vw"; else if(printFullScreen){ pfs.height = "100vh"; }else if(innerHeight<105*unitlen) pfs.height = "5vw"; else pfs.height = (innerHeight - 105 * unitlen) + "px"; pfs.top = "auto"; pfs.right = "auto"; }else{ pfs.top = 0; printMinimum = true; printFullScreen = false; if(innerWidth < 140 * unitlen) pfs.right = (innerWidth - 140 * unitlen) + "px"; else pfs.right = 0; pfs.height = "100%"; if(innerWidth < 140 * unitlen) pfs.width = "40vh"; else pfs.width = (innerWidth - 130 * unitlen) + "px"; pfs.left = "auto"; pfs.bottom = "auto"; } // ----- print title ----- var pts = Data.getSt("print_title"); pts.height = 5 + unit; pts.fontSize = 4 + unit; // ----- print minimum ----- var pns = Data.getSt("print_minimum"); pns.height = 5 + unit; pns.width = 5 + unit; pns.right = 7 + unit pns.fontSize = 5 + unit; pns.display=unit=="vw"?"block":"none"; Data.addEL("print_minimum","click",()=>{ printMinimum=!printMinimum; }); // ----- print magnify ----- var pms = Data.getSt("print_magnify"); Data.getEl("print_magnify").innerText = printFullScreen?"▫":"□"; pms.height = 5 + unit; pms.width = 5 + unit; pms.fontSize = 5 + unit; pms.display=unit=="vw"?"block":"none"; Data.addEL("print_magnify","click",()=>{ printMinimum = false; printFullScreen=!printFullScreen; }); // ----- print content ----- var pcs = Data.getSt("print_content"); pcs.height = (Data.getValPx ("print_field", "height")-5*unitlen)+"px"; pcs.fontSize = 4 + unit; pcs.top = 5 + unit; } function print(str="", ...strs){ var pct = Data.getEl("print_content") pct.innerText += str + "\n"; for(var x=0; xpt1[1]?0:180)) + "deg)"; } // rectangles function rect(id, pt1, pt2, width=null, border=0, bdcolor="black"){ var s = Data.getEl(id); var h = width; if(width==null){ h = Data.getValPx(id,"height")/unitlen; s.style.height = h + "%"; }else{ s.style.height = h + "%"; } var w = Math.sqrt((pt1[0] - pt2[0])**2 +(pt1[1]-pt2[1])**2); s.style.width = w + "%"; s.style.left = (pt1[0]-border)+"%"; s.style.top = (pt1[1]-width/2-border) + "%"; s.style.border = border+"%" +" solid " + bdcolor; s.style.borderRadius = 0; s.style.transformOrigin = (border)+"%" + " " + (width/2+border)+"%"; if(pt2[0]!=pt1[0]) s.style.transform = "rotate(" + (Math.atan((pt2[1]-pt1[1])/(pt2[0]-pt1[0])) *180/Math.PI + (pt2[0]pt1[1]?0:180)) + "deg)"; } // ----- create div shape until here ----- // random parameters function randomColor(){ var color = "#"; var hex = "0123456789abcdef"; for(var p=0; p<6; p++) color += hex[Math.floor(Math. random()*16)]; return color; } function randint(...nums){ if(nums.length==0) return Math.floor(Math.random()*10); else if(nums.length==1) return Math.floor(Math.random() * nums[0]); else if(nums.length==2) return Math.floor(Math.random() * (nums[1]-nums[0])) + Math.ceil(nums[0]); else if(nums.length==3) return Math.floor(Math.floor (Math.random() * (nums[1]-nums[0])/nums[2])*nums[2]) + Math.ceil(nums[0]); } // ----- random parameters until here ----- // delete later class Data{ constructor(){ // nothing } get hello(){ return "Hello!"; } static allMethods(){ return "isType, getEl, crtEl, addEL, getSt, getVal, getValPx, getBG"; } static isType(vari, type){ return vari.constructor.name == type; } static getEl(id){ return document.getElementById(id); } static crtEl(type, id, prnt=""){ var el = document.createElement(type); el.id = id; if(prnt=="") document.body.appendChild(el); else Data.getEl(prnt).appendChild(el); return el; } static addEL(id, act, func){ Data.getEl(id). addEventListener(act, func); } static getSt(id){ return Data.getEl(id).style; } static getVal(id, dt){ return eval("window.getComputedStyle(Data.getEl(id))."+dt); } static getValPx(id, dt){ return Number(Data.getVal(id, dt).slice(0,-2)); } static getBG(id, color=""){ var bg = Data.getVal(id, "backgroundColor"); bg = bg.match(/\d+/g); if(color==""){ for(var x = 0; x

2D Coordinate