Updated to 2k*2k, fixed selection on hover on info

This commit is contained in:
Stefano Haagman 2022-04-04 22:39:49 +02:00
parent 2a48ea88f6
commit a0422f2e59
9 changed files with 24 additions and 1874 deletions

View file

@ -125,7 +125,7 @@ header {
background-color: #555;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
z-index: 1000;
z-index: 2000;
display: inline-block;
}
@ -310,10 +310,10 @@ .listHidden #container {
}
#innerContainer {
height: 1000px;
width: 1000px;
height: 2000px;
width: 2000px;
position: absolute;
z-index: -1000;
z-index: -2000;
}
#image {
@ -869,7 +869,7 @@ .listHidden #hideListButton {
border-top: 1px #333 solid;
width: 130px;
height: 35px;
z-index: 1000;
z-index: 2000;
}
#hideListButton:focus {
@ -947,7 +947,7 @@ #aboutContainer {
bottom: 0;
background-color: #333;
display: block;
z-index: 1000;
z-index: 2000;
overflow-y: auto;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

View file

@ -48,7 +48,7 @@ function initDraw(){
var backgroundCanvas = document.createElement("canvas");
backgroundCanvas.width = 2000;
backgroundCanvas.height = 1000;
backgroundCanvas.height = 2000;
var backgroundContext = backgroundCanvas.getContext("2d");
var highlightUncharted = true;

View file

@ -61,11 +61,11 @@ function applyView(){
//console.log(scaleZoomOrigin[0]);
scaleZoomOrigin[0] = Math.max(-1000, Math.min(1000, scaleZoomOrigin[0]));
scaleZoomOrigin[1] = Math.max(-500, Math.min(500, scaleZoomOrigin[1]));
scaleZoomOrigin[1] = Math.max(-1000, Math.min(1000, scaleZoomOrigin[1]));
zoomOrigin = [scaleZoomOrigin[0]*zoom, scaleZoomOrigin[1]*zoom];
innerContainer.style.height = (~~(zoom*1000))+"px";
innerContainer.style.height = (~~(zoom*2000))+"px";
innerContainer.style.width = (~~(zoom*2000))+"px";
innerContainer.style.left = ~~(container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft)+"px";

File diff suppressed because it is too large Load diff

View file

@ -34,7 +34,7 @@ function initOverlap(){
var backgroundCanvas = document.createElement("canvas");
backgroundCanvas.width = 2000;
backgroundCanvas.height = 1000;
backgroundCanvas.height = 2000;
var backgroundContext = backgroundCanvas.getContext("2d");
var filterInput = document.getElementById("searchList");
@ -72,12 +72,12 @@ function initOverlap(){
highlightEntryFromUrl();
}*/
if(document.documentElement.clientWidth > 1000){
if(document.documentElement.clientWidth > 2000){
entriesListShown = true;
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
}
if(document.documentElement.clientWidth < 1000){
if(document.documentElement.clientWidth < 2000){
entriesListShown = false;
wrapper.className += " listHidden";
}
@ -546,12 +546,12 @@ function initOverlap(){
window.addEventListener("resize", function(){
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
if(document.documentElement.clientWidth > 1000 && viewportWidth <= 1000){
if(document.documentElement.clientWidth > 2000 && viewportWidth <= 2000){
entriesListShown = true;
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
}
if(document.documentElement.clientWidth < 1000 && viewportWidth >= 1000){
if(document.documentElement.clientWidth < 2000 && viewportWidth >= 2000){
entriesListShown = false;
wrapper.className += " listHidden";
}

View file

@ -31,7 +31,7 @@ var previousScaleZoomOrigin = [0, 0];
var backgroundCanvas = document.createElement("canvas");
backgroundCanvas.width = 2000;
backgroundCanvas.height = 1000;
backgroundCanvas.height = 2000;
var backgroundContext = backgroundCanvas.getContext("2d");
function updateLines(){
@ -162,12 +162,12 @@ function initView(){
highlightEntryFromUrl();
}*/
if(document.documentElement.clientWidth > 1000){
if(document.documentElement.clientWidth > 2000){
entriesListShown = true;
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
}
if(document.documentElement.clientWidth < 1000){
if(document.documentElement.clientWidth < 2000){
entriesListShown = false;
wrapper.className += " listHidden";
}
@ -330,7 +330,7 @@ function initView(){
];
scaleZoomOrigin = [
1000/2 - entry.center[0]// + container.offsetLeft
2000/2 - entry.center[0]// + container.offsetLeft
,2000/2 - entry.center[1]// + container.offsetTop
];
@ -539,7 +539,7 @@ function initView(){
]
scaleZoomOrigin = [
1000/2 - this.entry.center[0]
2000/2 - this.entry.center[0]
,2000/2 - this.entry.center[1]
]
@ -579,7 +579,7 @@ function initView(){
]
scaleZoomOrigin = [
1000/2 - this.entry.center[0]
2000/2 - this.entry.center[0]
,2000/2 - this.entry.center[1]
]
@ -761,12 +761,12 @@ function initView(){
var viewportWidth = document.documentElement.clientWidth;
if(document.documentElement.clientWidth > 1000 && viewportWidth <= 1000){
if(document.documentElement.clientWidth > 2000 && viewportWidth <= 2000){
entriesListShown = true;
wrapper.className = wrapper.className.replace(/ listHidden/g, "");
}
if(document.documentElement.clientWidth < 1000 && viewportWidth >= 1000){
if(document.documentElement.clientWidth < 2000 && viewportWidth >= 2000){
entriesListShown = false;
wrapper.className += " listHidden";
}

View file

@ -98,8 +98,8 @@ <h1 id="title">The /r/place Atlas</h1>
</div>
<canvas id="linesCanvas"></canvas>
<div id="innerContainer">
<canvas id="highlightCanvas" width="2000" height="1000"></canvas>
<img id="image" src="./_img/place-indexed.png" width="2000" height="1000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
<canvas id="highlightCanvas" width="2000" height="2000"></canvas>
<img id="image" src="./_img/place-indexed.png" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
</div>
</div>