mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-08-30 06:45:46 +02:00
1 line
No EOL
26 KiB
JavaScript
1 line
No EOL
26 KiB
JavaScript
function pointIsInPolygon(point,polygon){for(var x=point[0],y=point[1],inside=!1,i=0,j=polygon.length-1;i<polygon.length;j=i++){var xi=polygon[i][0],yi=polygon[i][1],xj=polygon[j][0],yj=polygon[j][1],intersect;yi>y!=yj>y&&x<(xj-xi)*(y-yi)/(yj-yi)+xi&&(inside=!inside)}return inside}window.addEventListener("error",(function(e){console.log(e);var errorMessage='<p class="error">An error has occurred:</p>';errorMessage+='<p class="errorBody">'+e.message+"</p>",errorMessage+='<p class="errorBody">on line '+e.lineno+"</p>",errorMessage+='<p class="error">If this keeps happening, feel free to send me a <a href="mailto:roland.rytz@gmail.com">mail</a>.</p>',document.getElementById("loadingContent").innerHTML=errorMessage}));var atlas=[{id:0,name:"r/place still has to be indexed",description:"To make sure this project doesn't get flooded with a million requests or changes, I wait until april 4th so I can submit all the ",website:"https://place-atlas.stefanocoding.me/",subreddit:"r/placeAtlas2",center:[502.5,513.5],path:[[2.5,343.5],[994.5,339.5],[996.5,690.5],[2.5,678.5]]}];atlas.sort((function(a,b){return a.center[1]<b.center[1]?-1:a.center[1]>b.center[1]?1:0}));var linesCanvas=document.getElementById("linesCanvas"),linesContext=linesCanvas.getContext("2d"),hovered=[],previousZoomOrigin=[0,0],previousScaleZoomOrigin=[0,0],backgroundCanvas=document.createElement("canvas");backgroundCanvas.width=1e3,backgroundCanvas.height=1e3;var backgroundContext=backgroundCanvas.getContext("2d");function updateLines(){linesCanvas.width=linesCanvas.clientWidth,linesCanvas.height=linesCanvas.clientHeight,linesContext.lineCap="round",linesContext.lineWidth=Math.max(Math.min(1.5*zoom,24),6),linesContext.strokeStyle="#000000";for(var i=0;i<hovered.length;i++){var element;0!=(element=hovered[i].element).getBoundingClientRect().left&&(linesContext.beginPath(),linesContext.moveTo(element.getBoundingClientRect().left+document.documentElement.scrollLeft+element.clientWidth/2,element.getBoundingClientRect().top+document.documentElement.scrollTop+20),linesContext.lineTo(~~(hovered[i].center[0]*zoom)+innerContainer.offsetLeft,~~(hovered[i].center[1]*zoom)+innerContainer.offsetTop),linesContext.stroke())}linesContext.lineWidth=Math.max(Math.min(zoom,16),4),linesContext.strokeStyle="#FFFFFF";for(var i=0;i<hovered.length;i++){var element;0!=(element=hovered[i].element).getBoundingClientRect().left&&(linesContext.beginPath(),linesContext.moveTo(element.getBoundingClientRect().left+document.documentElement.scrollLeft+element.clientWidth/2,element.getBoundingClientRect().top+document.documentElement.scrollTop+20),linesContext.lineTo(~~(hovered[i].center[0]*zoom)+innerContainer.offsetLeft,~~(hovered[i].center[1]*zoom)+innerContainer.offsetTop),linesContext.stroke())}}function renderBackground(atlas){backgroundContext.clearRect(0,0,canvas.width,canvas.height),backgroundContext.fillStyle="rgba(0, 0, 0, 0.6)",backgroundContext.fillRect(0,0,backgroundCanvas.width,backgroundCanvas.height);for(var i=0;i<atlas.length;i++){var path=atlas[i].path;backgroundContext.beginPath(),path[0]&&backgroundContext.moveTo(path[0][0],path[0][1]);for(var p=1;p<path.length;p++)backgroundContext.lineTo(path[p][0],path[p][1]);backgroundContext.closePath(),backgroundContext.strokeStyle="rgba(255, 255, 255, 0.8)",backgroundContext.stroke()}}function initView(){var wrapper=document.getElementById("wrapper"),objectsContainer=document.getElementById("objectsList"),closeObjectsListButton=document.getElementById("closeObjectsListButton"),filterInput=document.getElementById("searchList"),entriesList=document.getElementById("entriesList"),hideListButton=document.getElementById("hideListButton"),entriesListShown=!0,sortedAtlas,entriesLimit=50,entriesOffset=0,moreEntriesButton=document.createElement("button");moreEntriesButton.innerHTML="Show 50 more",moreEntriesButton.id="moreEntriesButton",moreEntriesButton.onclick=function(){buildObjectsList(null,null)};var defaultSort="shuffle";document.getElementById("sort").value=defaultSort;var lastPos=[0,0],fixed=!1;renderBackground(atlas),render(),buildObjectsList(null,null),document.documentElement.clientWidth>1e3&&(entriesListShown=!0,wrapper.className=wrapper.className.replace(/ listHidden/g,"")),document.documentElement.clientWidth<1e3&&(entriesListShown=!1,wrapper.className+=" listHidden"),applyView(),render(),updateLines();var args=window.location.search;function shuffle(){for(var i=sortedAtlas.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1)),temp=sortedAtlas[i];sortedAtlas[i]=sortedAtlas[j],sortedAtlas[j]=temp}}function createInfoBlock(entry){var element=document.createElement("div");element.className="object";var html='<h2><a href="?id='+entry.id+'">'+entry.name+"</a></h2>";if(entry.description&&(html+="<p>"+entry.description+"</p>"),entry.website&&(html+='<a target="_blank" href='+entry.website+">Website</a>"),entry.subreddit){var subreddits=entry.subreddit.split(",");for(var i in subreddits){var subreddit=subreddits[i].trim();"r/"==subreddit.substring(0,2)?subreddit="/"+subreddit:"/"!=subreddit.substring(0,1)&&(subreddit="/r/"+subreddit),html+='<a target="_blank" href=https://reddit.com'+subreddit+">"+subreddit+"</a>"}}return element.innerHTML+=html,element}function highlightEntryFromUrl(){var objectsContainer=document.getElementById("objectsList"),id=0,args=window.location.search;args&&(id=args.split("id=")[1])&&(id=parseInt(id.split("&")[0]));var entry=atlas.filter((function(e){return e.id===id}));if(1===entry.length){entry=entry[0],document.title=entry.name+" on the /r/place Atlas";var infoElement=createInfoBlock(entry);objectsContainer.innerHTML="",objectsContainer.appendChild(infoElement),zoom=4,renderBackground(atlas),applyView(),zoomOrigin=[innerContainer.clientWidth/2-entry.center[0]*zoom,innerContainer.clientHeight/2-entry.center[1]*zoom],scaleZoomOrigin=[500-entry.center[0],500-entry.center[1]],applyView(),hovered=[entry],render(),hovered[0].element=infoElement,closeObjectsListButton.className="",updateLines(),fixed=!0}}function updateHovering(e,tapped){if(!dragging&&(!fixed||tapped)){var pos=[(e.clientX-(container.clientWidth/2-innerContainer.clientWidth/2+zoomOrigin[0]+container.offsetLeft))/zoom,(e.clientY-(container.clientHeight/2-innerContainer.clientHeight/2+zoomOrigin[1]+container.offsetTop))/zoom];if(pos[0]<=1100&&pos[0]>=-100&&pos[0]<=1100&&pos[0]>=-100){for(var newHovered=[],i=0;i<atlas.length;i++)pointIsInPolygon(pos,atlas[i].path)&&newHovered.push(atlas[i]);var changed=!1;if(hovered.length==newHovered.length){for(var i=0;i<hovered.length;i++)if(hovered[i].id!=newHovered[i].id){changed=!0;break}}else changed=!0;if(changed){for(var i in hovered=newHovered,objectsContainer.innerHTML="",hovered){var element=createInfoBlock(hovered[i]);objectsContainer.appendChild(element),hovered[i].element=element}hovered.length>0?closeObjectsListButton.className="":closeObjectsListButton.className="hidden",render()}}}}function buildObjectsList(filter,sort){var sortFunction;switch(entriesList.contains(moreEntriesButton)&&entriesList.removeChild(moreEntriesButton),sortedAtlas||(sortedAtlas=atlas.concat(),document.getElementById("atlasSize").innerHTML="The Atlas contains "+sortedAtlas.length+" entries."),filter?(sortedAtlas=atlas.filter((function(value){return-1!==value.name.toLowerCase().indexOf(filter)||-1!==value.description.toLowerCase().indexOf(filter)})),document.getElementById("atlasSize").innerHTML="Found "+sortedAtlas.length+" entries."):document.getElementById("atlasSize").innerHTML="The Atlas contains "+sortedAtlas.length+" entries.",null===sort&&(sort=defaultSort),renderBackground(sortedAtlas),render(),document.getElementById("sort").value=sort,sort){case"shuffle":sortFunction=null,0==entriesOffset&&shuffle();break;case"alphaAsc":sortFunction=function(a,b){return a.name.toLowerCase().localeCompare(b.name.toLowerCase())};break;case"alphaDesc":sortFunction=function(a,b){return b.name.toLowerCase().localeCompare(a.name.toLowerCase())};break;case"newest":sortFunction=function(a,b){return a.id>b.id?-1:a.id<b.id?1:0};break;case"oldest":sortFunction=function(a,b){return a.id<b.id?-1:a.id>b.id?1:0};break;case"relevant":sortFunction=function(a,b){return-1!==a.name.toLowerCase().indexOf(filter)&&-1!==b.name.toLowerCase().indexOf(filter)?a.name.toLowerCase().indexOf(filter)<b.name.toLowerCase().indexOf(filter)?-1:a.name.toLowerCase().indexOf(filter)>b.name.toLowerCase().indexOf(filter)?1:a.name.toLowerCase().localeCompare(b.name.toLowerCase()):-1!==a.name.toLowerCase().indexOf(filter)?-1:-1!==b.name.toLowerCase().indexOf(filter)?1:a.description.toLowerCase().indexOf(filter)<b.description.toLowerCase().indexOf(filter)?-1:a.description.toLowerCase().indexOf(filter)>b.description.toLowerCase().indexOf(filter)?1:a.name.toLowerCase().localeCompare(b.name.toLowerCase())}}sortFunction&&sortedAtlas.sort(sortFunction);for(var i=entriesOffset;i<entriesOffset+50&&!(i>=sortedAtlas.length);i++){var element=createInfoBlock(sortedAtlas[i]);element.entry=sortedAtlas[i],element.addEventListener("mouseenter",(function(e){fixed||dragging||(objectsContainer.innerHTML="",previousZoomOrigin=[zoomOrigin[0],zoomOrigin[1]],previousScaleZoomOrigin=[scaleZoomOrigin[0],scaleZoomOrigin[1]],applyView(),zoomOrigin=[innerContainer.clientWidth/2-this.entry.center[0]*zoom,innerContainer.clientHeight/2-this.entry.center[1]*zoom],scaleZoomOrigin=[500-this.entry.center[0],500-this.entry.center[1]],applyView(),hovered=[this.entry],render(),hovered[0].element=this,updateLines())})),element.addEventListener("click",(function(e){toggleFixed(e),fixed&&(previousZoomOrigin=[zoomOrigin[0],zoomOrigin[1]],previousScaleZoomOrigin=[scaleZoomOrigin[0],scaleZoomOrigin[1]],applyView()),document.documentElement.clientWidth<500&&(objectsContainer.innerHTML="",entriesListShown=!1,wrapper.className+=" listHidden",zoom=4,renderBackground(atlas),applyView(),zoomOrigin=[innerContainer.clientWidth/2-this.entry.center[0]*zoom,innerContainer.clientHeight/2-this.entry.center[1]*zoom],scaleZoomOrigin=[500-this.entry.center[0],500-this.entry.center[1]],previousZoomOrigin=[zoomOrigin[0],zoomOrigin[1]],previousScaleZoomOrigin=[scaleZoomOrigin[0],scaleZoomOrigin[1]],fixed=!0,(hovered=[this.entry])[0].element=this,applyView(),render(),updateLines())})),element.addEventListener("mouseleave",(function(e){fixed||dragging||(zoomOrigin=[previousScaleZoomOrigin[0]*zoom,previousScaleZoomOrigin[1]*zoom],scaleZoomOrigin=[previousScaleZoomOrigin[0],previousScaleZoomOrigin[1]],applyView(),hovered=[],updateLines(),render())})),entriesList.appendChild(element)}entriesOffset+=50,sortedAtlas.length>entriesOffset&&(moreEntriesButton.innerHTML="Show "+Math.min(50,sortedAtlas.length-entriesOffset)+" more",entriesList.appendChild(moreEntriesButton))}function render(){context.clearRect(0,0,canvas.width,canvas.height),context.globalCompositeOperation="source-over",context.clearRect(0,0,canvas.width,canvas.height),hovered.length>0?container.style.cursor="pointer":container.style.cursor="default";for(var i=0;i<hovered.length;i++){var path=hovered[i].path;context.beginPath(),path[0]&&context.moveTo(path[0][0],path[0][1]);for(var p=1;p<path.length;p++)context.lineTo(path[p][0],path[p][1]);context.closePath(),context.globalCompositeOperation="source-over",context.fillStyle="rgba(0, 0, 0, 1)",context.fill()}context.globalCompositeOperation="source-out",context.drawImage(backgroundCanvas,0,0);for(var i=0;i<hovered.length;i++){var path=hovered[i].path;context.beginPath(),path[0]&&context.moveTo(path[0][0],path[0][1]);for(var p=1;p<path.length;p++)context.lineTo(path[p][0],path[p][1]);context.closePath(),context.globalCompositeOperation="source-over",context.strokeStyle="rgba(0, 0, 0, 1)",context.stroke()}}function toggleFixed(e,tapped){if(!fixed&&0==hovered.length)return 0;(fixed=!fixed)||(updateHovering(e,tapped),render())}args&&(id=args.split("id=")[1],id&&highlightEntryFromUrl()),container.addEventListener("mousemove",(function(e){e.sourceCapabilities&&e.sourceCapabilities.firesTouchEvents||updateHovering(e)})),filterInput.addEventListener("input",(function(e){entriesOffset=0,entriesList.innerHTML="",entriesList.appendChild(moreEntriesButton),""===this.value?(document.getElementById("relevantOption").disabled=!0,sortedAtlas=atlas.concat(),buildObjectsList(null,null)):(document.getElementById("relevantOption").disabled=!1,buildObjectsList(this.value.toLowerCase(),"relevant"))})),document.getElementById("sort").addEventListener("input",(function(e){entriesOffset=0,entriesList.innerHTML="",entriesList.appendChild(moreEntriesButton),"relevant"!=this.value&&(defaultSort=this.value),buildObjectsList(filterInput.value.toLowerCase(),this.value)})),hideListButton.addEventListener("click",(function(e){return(entriesListShown=!entriesListShown)?wrapper.className=wrapper.className.replace(/ listHidden/g,""):wrapper.className+=" listHidden",applyView(),render(),updateLines(),!1})),closeObjectsListButton.addEventListener("click",(function(e){hovered=[],objectsContainer.innerHTML="",updateLines(),closeObjectsListButton.className="hidden",fixed=!1,render()})),window.addEventListener("resize",updateLines),window.addEventListener("mousemove",updateLines),window.addEventListener("dblClick",updateLines),window.addEventListener("wheel",updateLines),container.addEventListener("mousedown",(function(e){lastPos=[e.clientX,e.clientY]})),container.addEventListener("touchstart",(function(e){1==e.touches.length&&(lastPos=[e.touches[0].clientX,e.touches[0].clientY])})),container.addEventListener("mouseup",(function(e){Math.abs(lastPos[0]-e.clientX)+Math.abs(lastPos[1]-e.clientY)<=4&&toggleFixed(e)})),container.addEventListener("touchend",(function(e){1==e.changedTouches.length&&(e=e.changedTouches[0],Math.abs(lastPos[0]-e.clientX)+Math.abs(lastPos[1]-e.clientY)<=4&&(dragging=!1,fixed=!1,setTimeout((function(){updateHovering(e,!0)}),10)))})),objectsContainer.addEventListener("scroll",(function(e){updateLines()})),window.addEventListener("resize",(function(){var viewportWidth=document.documentElement.clientWidth;document.documentElement.clientWidth>1e3&&viewportWidth<=1e3&&(entriesListShown=!0,wrapper.className=wrapper.className.replace(/ listHidden/g,"")),document.documentElement.clientWidth<1e3&&viewportWidth>=1e3&&(entriesListShown=!1,wrapper.className+=" listHidden"),viewportWidth=document.documentElement.clientWidth,applyView(),render(),updateLines()}))}function initDraw(){var finishButton=document.getElementById("finishButton"),resetButton=document.getElementById("resetButton"),undoButton=document.getElementById("undoButton"),redoButton=document.getElementById("redoButton"),highlightUnchartedLabel=document.getElementById("highlightUnchartedLabel"),objectInfoBox=document.getElementById("objectInfo"),hintText=document.getElementById("hint"),exportButton=document.getElementById("exportButton"),cancelButton=document.getElementById("cancelButton"),exportOverlay=document.getElementById("exportOverlay"),exportCloseButton=document.getElementById("exportCloseButton"),rShiftPressed=!1,lShiftPressed=!1,shiftPressed=!1,backgroundCanvas=document.createElement("canvas");backgroundCanvas.width=1e3,backgroundCanvas.height=1e3;var backgroundContext=backgroundCanvas.getContext("2d"),highlightUncharted=!0;renderBackground(),container.style.cursor="crosshair";var path=[],drawing=!0,undoHistory=[],lastPos=[0,0];function getCanvasCoords(x,y){x-=container.offsetLeft,y-=container.offsetTop;var pos=[.5+~~((x-(container.clientWidth/2-innerContainer.clientWidth/2+zoomOrigin[0]))/zoom),.5+~~((y-(container.clientHeight/2-innerContainer.clientHeight/2+zoomOrigin[1]))/zoom)];if(shiftPressed&&path.length>0){var previous=path[path.length-1];Math.abs(pos[1]-previous[1])>Math.abs(pos[0]-previous[0])?pos[0]=previous[0]:pos[1]=previous[1]}return pos}function exportJson(){var exportObject={id:0,name:document.getElementById("nameField").value,description:document.getElementById("descriptionField").value,website:document.getElementById("websiteField").value,subreddit:document.getElementById("subredditField").value,center:calculateCenter(path),path:path},jsonString=JSON.stringify(exportObject,null,"\t"),textarea=document.getElementById("exportString");jsonString=" "+(jsonString=(jsonString=jsonString.split("\n")).join("\n ")),textarea.value=jsonString,exportOverlay.style.display="flex",textarea.focus(),textarea.select()}function calculateCenter(path){var area=0,i,j,point1,point2;for(i=0,j=path.length-1;i<path.length;j=i,i++)point1=path[i],point2=path[j],area+=point1[0]*point2[1],area-=point1[1]*point2[0];area*=3;var x=0,y=0,f;for(i=0,j=path.length-1;i<path.length;j=i,i++)point1=path[i],point2=path[j],f=point1[0]*point2[1]-point2[0]*point1[1],x+=(point1[0]+point2[0])*f,y+=(point1[1]+point2[1])*f;return[.5+~~(x/area),.5+~~(y/area)]}function undo(){path.length>0&&drawing&&(undoHistory.push(path.pop()),redoButton.disabled=!1,0==path.length&&(undoButton.disabled=!0),render(path))}function redo(){undoHistory.length>0&&drawing&&(path.push(undoHistory.pop()),undoButton.disabled=!1,0==undoHistory.length&&(redoButton.disabled=!0),render(path))}function finish(){drawing=!1,render(path),objectInfoBox.style.display="block",hintText.style.display="none",finishButton.style.display="none",undoButton.style.display="none",redoButton.style.display="none",resetButton.style.display="none",highlightUnchartedLabel.style.display="none",document.getElementById("nameField").focus()}function reset(){path=[],undoHistory=[],finishButton.disabled=!0,undoButton.disabled=!0,redoButton.disabled=!0,drawing=!0,render(path),objectInfoBox.style.display="none",hintText.style.display="block",finishButton.style.display="block",undoButton.style.display="block",redoButton.style.display="block",resetButton.style.display="block",highlightUnchartedLabel.style.display="block",document.getElementById("nameField").value="",document.getElementById("descriptionField").value="",document.getElementById("websiteField").value="",document.getElementById("subredditField").value=""}function renderBackground(){backgroundContext.clearRect(0,0,canvas.width,canvas.height),backgroundContext.fillStyle="rgba(0, 0, 0, 1)";for(var i=0;i<atlas.length;i++){var path=atlas[i].path;backgroundContext.beginPath(),path[0]&&backgroundContext.moveTo(path[0][0],path[0][1]);for(var p=1;p<path.length;p++)backgroundContext.lineTo(path[p][0],path[p][1]);backgroundContext.closePath(),backgroundContext.fill()}}function render(path){context.globalCompositeOperation="source-over",context.clearRect(0,0,canvas.width,canvas.height),highlightUncharted?(context.drawImage(backgroundCanvas,0,0),context.fillStyle="rgba(0, 0, 0, 0.4)"):context.fillStyle="rgba(0, 0, 0, 0.6)",context.fillRect(0,0,canvas.width,canvas.height),context.beginPath(),path[0]&&context.moveTo(path[0][0],path[0][1]);for(var i=1;i<path.length;i++)context.lineTo(path[i][0],path[i][1]);context.closePath(),context.strokeStyle="rgba(255, 255, 255, 1)",context.stroke(),context.globalCompositeOperation="destination-out",context.fillStyle="rgba(0, 0, 0, 1)",context.fill()}render(path),container.addEventListener("mousedown",(function(e){lastPos=[e.clientX,e.clientY]})),container.addEventListener("mouseup",(function(e){if(Math.abs(lastPos[0]-e.clientX)+Math.abs(lastPos[1]-e.clientY)<=4&&drawing){var coords=getCanvasCoords(e.clientX,e.clientY);path.push(coords),render(path),undoHistory=[],redoButton.disabled=!0,undoButton.disabled=!1,path.length>=3&&(finishButton.disabled=!1)}})),window.addEventListener("mousemove",(function(e){if(!dragging&&drawing&&path.length>0){var coords=getCanvasCoords(e.clientX,e.clientY);render(path.concat([coords]))}})),window.addEventListener("keyup",(function(e){"Enter"==e.key?finish():"z"==e.key&&e.ctrlKey?undo():"y"==e.key&&e.ctrlKey?redo():"Escape"==e.key?exportOverlay.style.display="none":"Shift"===e.key&&("ShiftRight"===e.code?rShiftPressed=!1:"ShiftLeft"===e.code&&(lShiftPressed=!1),shiftPressed=rShiftPressed||lShiftPressed)})),window.addEventListener("keydown",(function(e){"Shift"===e.key&&("ShiftRight"===e.code?rShiftPressed=!0:"ShiftLeft"===e.code&&(lShiftPressed=!0),shiftPressed=rShiftPressed||lShiftPressed)})),finishButton.addEventListener("click",(function(e){finish()})),undoButton.addEventListener("click",(function(e){undo()})),redoButton.addEventListener("click",(function(e){redo()})),resetButton.addEventListener("click",(function(e){reset()})),cancelButton.addEventListener("click",(function(e){reset()})),document.getElementById("nameField").addEventListener("keyup",(function(e){"Enter"==e.key&&exportJson()})),document.getElementById("websiteField").addEventListener("keyup",(function(e){"Enter"==e.key&&exportJson()})),document.getElementById("subredditField").addEventListener("keyup",(function(e){"Enter"==e.key&&exportJson()})),exportButton.addEventListener("click",(function(e){exportJson()})),exportCloseButton.addEventListener("click",(function(e){reset(),exportOverlay.style.display="none"})),document.getElementById("highlightUncharted").addEventListener("click",(function(e){highlightUncharted=this.checked,render(path)}))}var innerContainer=document.getElementById("innerContainer"),container=document.getElementById("container"),canvas=document.getElementById("highlightCanvas"),context=canvas.getContext("2d"),zoom=1;window.devicePixelRatio&&(zoom=1/window.devicePixelRatio);var maxZoom=128,minZoom=.1,zoomOrigin=[0,0],scaleZoomOrigin=[0,0],dragging=!1,lastPosition=[0,0],viewportSize=[0,0];function applyView(){scaleZoomOrigin[0]=Math.max(-500,Math.min(500,scaleZoomOrigin[0])),scaleZoomOrigin[1]=Math.max(-500,Math.min(500,scaleZoomOrigin[1])),zoomOrigin=[scaleZoomOrigin[0]*zoom,scaleZoomOrigin[1]*zoom],innerContainer.style.height=~~(1e3*zoom)+"px",innerContainer.style.width=~~(1e3*zoom)+"px",innerContainer.style.left=~~(container.clientWidth/2-innerContainer.clientWidth/2+zoomOrigin[0]+container.offsetLeft)+"px",innerContainer.style.top=~~(container.clientHeight/2-innerContainer.clientHeight/2+zoomOrigin[1]+container.offsetTop)+"px"}function init(){zoomOrigin=[0,0],applyView();var initialPinchDistance=0,initialPinchZoom=0,initialPinchZoomOrigin=[0,0],desiredZoom,zoomAnimationFrame,mode="view",args=window.location.search;function mousedown(x,y){lastPosition=[x,y],dragging=!0}function touchstart(e){1==e.touches.length?mousedown(e.touches[0].clientX,e.touches[0].clientY):2==e.touches.length&&(initialPinchDistance=Math.sqrt(Math.pow(e.touches[0].clientX-e.touches[1].clientX,2)+Math.pow(e.touches[0].clientY-e.touches[1].clientY,2)),initialPinchZoom=zoom,initialPinchZoomOrigin=[scaleZoomOrigin[0],scaleZoomOrigin[1]],mousedown((e.touches[0].clientX+e.touches[1].clientX)/2,(e.touches[0].clientY+e.touches[1].clientY)/2))}function mousemove(x,y){if(dragging){var deltaX=x-lastPosition[0],deltaY=y-lastPosition[1];lastPosition=[x,y],zoomOrigin[0]+=deltaX,zoomOrigin[1]+=deltaY,scaleZoomOrigin[0]+=deltaX/zoom,scaleZoomOrigin[1]+=deltaY/zoom,previousZoomOrigin=[zoomOrigin[0],zoomOrigin[1]],previousScaleZoomOrigin=[scaleZoomOrigin[0],scaleZoomOrigin[1]],updateLines(),applyView()}}function touchmove(e){if(updateLines(),1==e.touches.length)mousemove(e.touches[0].clientX,e.touches[0].clientY);else if(2==e.touches.length){var newPinchDistance=Math.sqrt(Math.pow(e.touches[0].clientX-e.touches[1].clientX,2)+Math.pow(e.touches[0].clientY-e.touches[1].clientY,2)),x,y;zoom=initialPinchZoom*newPinchDistance/initialPinchDistance,applyZoom((e.touches[0].clientX+e.touches[1].clientX)/2-container.offsetLeft,(e.touches[0].clientY+e.touches[1].clientY)/2-container.offsetTop,zoom)}}function applyZoom(x,y,zoom){var deltaX=x-lastPosition[0],deltaY=y-lastPosition[1],pinchTranslateX=x-container.clientWidth/2-deltaX,pinchTranslateY=y-container.clientHeight/2-deltaY;scaleZoomOrigin[0]=initialPinchZoomOrigin[0]+deltaX/zoom+pinchTranslateX/zoom-pinchTranslateX/initialPinchZoom,scaleZoomOrigin[1]=initialPinchZoomOrigin[1]+deltaY/zoom+pinchTranslateY/zoom-pinchTranslateY/initialPinchZoom,zoomOrigin[0]=scaleZoomOrigin[0]*zoom,zoomOrigin[1]=scaleZoomOrigin[1]*zoom,applyView(),updateLines()}function mouseup(x,y){dragging&&(dragging=!1)}function touchend(e){0==e.touches.length?mouseup():1==e.touches.length&&(initialPinchZoom=zoom,lastPosition=[e.touches[0].clientX,e.touches[0].clientY])}args&&(mode=(mode=args.split("mode=")[1])?mode.split("&")[0]:"view"),"view"==mode?(wrapper.className=wrapper.className.replace(/ drawMode/g,""),initView()):"draw"==mode?(wrapper.className+=" draw",initDraw()):"about"==mode?window.location="./about.html":"overlap"==mode&&(wrapper.className=wrapper.className.replace(/ drawMode/g,""),initOverlap&&initOverlap()),document.getElementById("loading").style.display="none",document.getElementById("zoomInButton").addEventListener("click",(function(e){var x=container.clientWidth/2,y=container.clientHeight/2;initialPinchZoomOrigin=[scaleZoomOrigin[0],scaleZoomOrigin[1]],initialPinchZoom=zoom,lastPosition=[x,y],zoom*=2,applyZoom(x,y,zoom=Math.max(minZoom,Math.min(maxZoom,zoom)))})),document.getElementById("zoomOutButton").addEventListener("click",(function(e){var x=container.clientWidth/2,y=container.clientHeight/2;initialPinchZoomOrigin=[scaleZoomOrigin[0],scaleZoomOrigin[1]],initialPinchZoom=zoom,lastPosition=[x,y],zoom/=2,applyZoom(x,y,zoom=Math.max(minZoom,Math.min(maxZoom,zoom)))})),document.getElementById("zoomResetButton").addEventListener("click",(function(e){zoom=1,zoomOrigin=[0,0],scaleZoomOrigin=[0,0],updateLines(),applyView()})),container.addEventListener("dblclick",(function(e){var x=e.clientX-container.offsetLeft,y=e.clientY-container.offsetTop;initialPinchZoomOrigin=[scaleZoomOrigin[0],scaleZoomOrigin[1]],initialPinchZoom=zoom,lastPosition=[x,y],e.ctrlKey?zoom/=2:zoom*=2,applyZoom(x,y,zoom=Math.max(minZoom,Math.min(maxZoom,zoom))),e.preventDefault()})),container.addEventListener("wheel",(function(e){var x=e.clientX-container.offsetLeft,y=e.clientY-container.offsetTop;initialPinchZoomOrigin=[scaleZoomOrigin[0],scaleZoomOrigin[1]],initialPinchZoom=zoom,lastPosition=[x,y],e.deltaY>0?zoom/=2:e.deltaY<0&&(zoom*=2),applyZoom(x,y,zoom=Math.max(minZoom,Math.min(maxZoom,zoom))),e.preventDefault()})),container.addEventListener("mousedown",(function(e){mousedown(e.clientX,e.clientY),e.preventDefault()})),container.addEventListener("touchstart",(function(e){2==e.touches.length&&e.preventDefault(),touchstart(e)})),window.addEventListener("mousemove",(function(e){updateLines(),mousemove(e.clientX,e.clientY),dragging&&e.preventDefault()})),window.addEventListener("touchmove",(function(e){(2==e.touches.length||e.scale>1)&&e.preventDefault(),touchmove(e)}),{passive:!1}),window.addEventListener("mouseup",(function(e){dragging&&e.preventDefault(),mouseup(e.clientX,e.clientY)})),window.addEventListener("touchend",touchend),window.addEventListener("resize",(function(){applyView()}))}document.getElementById("donateButton").addEventListener("click",(function(e){document.getElementById("bitcoinQR").src="./_img/bitcoinQR.png?from=index",document.getElementById("donateOverlay").style.display="flex"})),document.getElementById("closeBitcoinButton").addEventListener("click",(function(e){document.getElementById("donateOverlay").style.display="none"})),init(); |