try to fetch unloaded chunk on every renderChunk triggering ui update
closes #9
This commit is contained in:
parent
4293ff2a01
commit
fc0d73ceaf
|
@ -1,7 +1,5 @@
|
||||||
/*
|
/*
|
||||||
* Fetching and storing of 2D chunks
|
* Fetching and storing of 2D chunks
|
||||||
*
|
|
||||||
* @flow
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import ChunkRGB from './ChunkRGB';
|
import ChunkRGB from './ChunkRGB';
|
||||||
|
@ -25,12 +23,12 @@ import {
|
||||||
|
|
||||||
class ChunkLoader {
|
class ChunkLoader {
|
||||||
store = null;
|
store = null;
|
||||||
canvasId: number;
|
canvasId;
|
||||||
canvasMaxTiledZoom: number;
|
canvasMaxTiledZoom;
|
||||||
historicalMaxTiledZooms: Array;
|
historicalMaxTiledZooms;
|
||||||
palette;
|
palette;
|
||||||
canvasSize: number;
|
canvasSize;
|
||||||
chunks: Map<string, ChunkRGB>;
|
chunks;
|
||||||
|
|
||||||
constructor(store, canvasId, palette, canvasSize, historicalSizes) {
|
constructor(store, canvasId, palette, canvasSize, historicalSizes) {
|
||||||
this.store = store;
|
this.store = store;
|
||||||
|
@ -56,10 +54,10 @@ class ChunkLoader {
|
||||||
}
|
}
|
||||||
|
|
||||||
getPixelUpdate(
|
getPixelUpdate(
|
||||||
cx: number,
|
cx,
|
||||||
cy: number,
|
cy,
|
||||||
offset: number,
|
offset,
|
||||||
color: number,
|
color,
|
||||||
) {
|
) {
|
||||||
const chunk = this.chunks.get(`${this.canvasMaxTiledZoom}:${cx}:${cy}`);
|
const chunk = this.chunks.get(`${this.canvasMaxTiledZoom}:${cx}:${cy}`);
|
||||||
if (chunk) {
|
if (chunk) {
|
||||||
|
@ -70,8 +68,8 @@ class ChunkLoader {
|
||||||
}
|
}
|
||||||
|
|
||||||
getColorIndexOfPixel(
|
getColorIndexOfPixel(
|
||||||
x: number,
|
x,
|
||||||
y: number,
|
y,
|
||||||
) {
|
) {
|
||||||
const { canvasSize } = this;
|
const { canvasSize } = this;
|
||||||
const [cx, cy] = getChunkOfPixel(canvasSize, x, y);
|
const [cx, cy] = getChunkOfPixel(canvasSize, x, y);
|
||||||
|
@ -92,11 +90,11 @@ class ChunkLoader {
|
||||||
* @return ColorIndex or null if chunks not loaded or historical view not set
|
* @return ColorIndex or null if chunks not loaded or historical view not set
|
||||||
*/
|
*/
|
||||||
getHistoricalIndexOfPixel(
|
getHistoricalIndexOfPixel(
|
||||||
x: number,
|
x,
|
||||||
y: number,
|
y,
|
||||||
historicalDate: string,
|
historicalDate,
|
||||||
historicalTime: string,
|
historicalTime,
|
||||||
historicalCanvasSize: number,
|
historicalCanvasSize,
|
||||||
) {
|
) {
|
||||||
if (!historicalDate) {
|
if (!historicalDate) {
|
||||||
return null;
|
return null;
|
||||||
|
@ -132,9 +130,9 @@ class ChunkLoader {
|
||||||
* available lower zoomlevel chunks
|
* available lower zoomlevel chunks
|
||||||
*/
|
*/
|
||||||
preLoadChunk(
|
preLoadChunk(
|
||||||
zoom: number,
|
zoom,
|
||||||
cx: number,
|
cx,
|
||||||
cy: number,
|
cy,
|
||||||
chunkRGB,
|
chunkRGB,
|
||||||
) {
|
) {
|
||||||
if (zoom <= 0) return null;
|
if (zoom <= 0) return null;
|
||||||
|
@ -174,12 +172,12 @@ class ChunkLoader {
|
||||||
|
|
||||||
|
|
||||||
getChunk(
|
getChunk(
|
||||||
zoom: number,
|
zoom,
|
||||||
cx: number,
|
cx,
|
||||||
cy: number,
|
cy,
|
||||||
fetch: boolean,
|
fetch = true,
|
||||||
showLoadingTile: boolean = true,
|
showLoadingTile = true,
|
||||||
chunkPreLoading: boolean = true,
|
chunkPreLoading = true,
|
||||||
) {
|
) {
|
||||||
const chunkKey = `${zoom}:${cx}:${cy}`;
|
const chunkKey = `${zoom}:${cx}:${cy}`;
|
||||||
let chunkRGB = this.chunks.get(chunkKey);
|
let chunkRGB = this.chunks.get(chunkKey);
|
||||||
|
@ -244,10 +242,10 @@ class ChunkLoader {
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchHistoricalChunk(
|
async fetchHistoricalChunk(
|
||||||
cx: number,
|
cx,
|
||||||
cy: number,
|
cy,
|
||||||
historicalDate: string,
|
historicalDate,
|
||||||
historicalTime: string,
|
historicalTime,
|
||||||
historicalCanvasMaxTiledZoom,
|
historicalCanvasMaxTiledZoom,
|
||||||
chunkRGB,
|
chunkRGB,
|
||||||
) {
|
) {
|
||||||
|
@ -278,7 +276,7 @@ class ChunkLoader {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchBaseChunk(zoom, cx: number, cy: number, chunkRGB) {
|
async fetchBaseChunk(zoom, cx, cy, chunkRGB) {
|
||||||
const center = [zoom, cx, cy];
|
const center = [zoom, cx, cy];
|
||||||
this.store.dispatch(requestBigChunk(center));
|
this.store.dispatch(requestBigChunk(center));
|
||||||
chunkRGB.isBasechunk = true;
|
chunkRGB.isBasechunk = true;
|
||||||
|
@ -303,7 +301,7 @@ class ChunkLoader {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchTile(zoom, cx: number, cy: number, chunkRGB) {
|
async fetchTile(zoom, cx, cy, chunkRGB) {
|
||||||
const center = [zoom, cx, cy];
|
const center = [zoom, cx, cy];
|
||||||
this.store.dispatch(requestBigChunk(center));
|
this.store.dispatch(requestBigChunk(center));
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -341,13 +341,12 @@ class Renderer {
|
||||||
context.save();
|
context.save();
|
||||||
context.fillStyle = '#C4C4C4';
|
context.fillStyle = '#C4C4C4';
|
||||||
context.scale(relScale, relScale);
|
context.scale(relScale, relScale);
|
||||||
// decide if we will fetch missing chunks
|
// decide if we update the timestamps of accessed chunks
|
||||||
// and update the timestamps of accessed chunks
|
|
||||||
const curTime = Date.now();
|
const curTime = Date.now();
|
||||||
let fetch = false;
|
let touch = false;
|
||||||
if (curTime > this.lastFetch + 150) {
|
if (curTime > this.lastFetch + 150) {
|
||||||
this.lastFetch = curTime;
|
this.lastFetch = curTime;
|
||||||
fetch = true;
|
touch = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const xOffset = CANVAS_WIDTH / 2 / relScale - TILE_SIZE / 2;
|
const xOffset = CANVAS_WIDTH / 2 / relScale - TILE_SIZE / 2;
|
||||||
|
@ -380,10 +379,10 @@ class Renderer {
|
||||||
// if out of bounds
|
// if out of bounds
|
||||||
context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
|
context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
|
||||||
} else {
|
} else {
|
||||||
chunk = this.chunkLoader.getChunk(tiledZoom, cx, cy, fetch);
|
chunk = this.chunkLoader.getChunk(tiledZoom, cx, cy);
|
||||||
if (chunk) {
|
if (chunk) {
|
||||||
context.drawImage(chunk, x, y);
|
context.drawImage(chunk, x, y);
|
||||||
if (fetch) {
|
if (touch) {
|
||||||
chunk.timestamp = curTime;
|
chunk.timestamp = curTime;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -580,13 +579,12 @@ class Renderer {
|
||||||
}
|
}
|
||||||
// scale
|
// scale
|
||||||
context.scale(scale, scale);
|
context.scale(scale, scale);
|
||||||
// decide if we will fetch missing chunks
|
// decide if we update the timestamps of accessed chunks
|
||||||
// and update the timestamps of accessed chunks
|
|
||||||
const curTime = Date.now();
|
const curTime = Date.now();
|
||||||
let fetch = false;
|
let touch = false;
|
||||||
if (curTime > this.lastFetch + 150) {
|
if (curTime > this.lastFetch + 150) {
|
||||||
this.lastFetch = curTime;
|
this.lastFetch = curTime;
|
||||||
fetch = true;
|
touch = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const xOffset = CANVAS_WIDTH / 2 / scale - TILE_SIZE / 2;
|
const xOffset = CANVAS_WIDTH / 2 / scale - TILE_SIZE / 2;
|
||||||
|
@ -618,10 +616,10 @@ class Renderer {
|
||||||
} else {
|
} else {
|
||||||
// full chunks
|
// full chunks
|
||||||
chunk = this.chunkLoader
|
chunk = this.chunkLoader
|
||||||
.getHistoricalChunk(cx, cy, fetch, historicalDate);
|
.getHistoricalChunk(cx, cy, true, historicalDate);
|
||||||
if (chunk) {
|
if (chunk) {
|
||||||
context.drawImage(chunk, x, y);
|
context.drawImage(chunk, x, y);
|
||||||
if (fetch) {
|
if (touch) {
|
||||||
chunk.timestamp = curTime;
|
chunk.timestamp = curTime;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -630,11 +628,11 @@ class Renderer {
|
||||||
// incremential chunks
|
// incremential chunks
|
||||||
if (historicalTime === '0000') continue;
|
if (historicalTime === '0000') continue;
|
||||||
chunk = this.chunkLoader
|
chunk = this.chunkLoader
|
||||||
.getHistoricalChunk(cx, cy, fetch, historicalDate, historicalTime);
|
.getHistoricalChunk(cx, cy, true, historicalDate, historicalTime);
|
||||||
if (chunk) {
|
if (chunk) {
|
||||||
if (!chunk.isEmpty) {
|
if (!chunk.isEmpty) {
|
||||||
context.drawImage(chunk, x, y);
|
context.drawImage(chunk, x, y);
|
||||||
if (fetch) {
|
if (touch) {
|
||||||
chunk.timestamp = curTime;
|
chunk.timestamp = curTime;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -649,7 +647,7 @@ class Renderer {
|
||||||
);
|
);
|
||||||
if (chunk && !chunk.isEmpty) {
|
if (chunk && !chunk.isEmpty) {
|
||||||
context.drawImage(chunk, x, y);
|
context.drawImage(chunk, x, y);
|
||||||
if (fetch) {
|
if (touch) {
|
||||||
chunk.timestamp = curTime;
|
chunk.timestamp = curTime;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user