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
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import ChunkRGB from './ChunkRGB';
|
||||
|
@ -25,12 +23,12 @@ import {
|
|||
|
||||
class ChunkLoader {
|
||||
store = null;
|
||||
canvasId: number;
|
||||
canvasMaxTiledZoom: number;
|
||||
historicalMaxTiledZooms: Array;
|
||||
canvasId;
|
||||
canvasMaxTiledZoom;
|
||||
historicalMaxTiledZooms;
|
||||
palette;
|
||||
canvasSize: number;
|
||||
chunks: Map<string, ChunkRGB>;
|
||||
canvasSize;
|
||||
chunks;
|
||||
|
||||
constructor(store, canvasId, palette, canvasSize, historicalSizes) {
|
||||
this.store = store;
|
||||
|
@ -56,10 +54,10 @@ class ChunkLoader {
|
|||
}
|
||||
|
||||
getPixelUpdate(
|
||||
cx: number,
|
||||
cy: number,
|
||||
offset: number,
|
||||
color: number,
|
||||
cx,
|
||||
cy,
|
||||
offset,
|
||||
color,
|
||||
) {
|
||||
const chunk = this.chunks.get(`${this.canvasMaxTiledZoom}:${cx}:${cy}`);
|
||||
if (chunk) {
|
||||
|
@ -70,8 +68,8 @@ class ChunkLoader {
|
|||
}
|
||||
|
||||
getColorIndexOfPixel(
|
||||
x: number,
|
||||
y: number,
|
||||
x,
|
||||
y,
|
||||
) {
|
||||
const { canvasSize } = this;
|
||||
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
|
||||
*/
|
||||
getHistoricalIndexOfPixel(
|
||||
x: number,
|
||||
y: number,
|
||||
historicalDate: string,
|
||||
historicalTime: string,
|
||||
historicalCanvasSize: number,
|
||||
x,
|
||||
y,
|
||||
historicalDate,
|
||||
historicalTime,
|
||||
historicalCanvasSize,
|
||||
) {
|
||||
if (!historicalDate) {
|
||||
return null;
|
||||
|
@ -132,9 +130,9 @@ class ChunkLoader {
|
|||
* available lower zoomlevel chunks
|
||||
*/
|
||||
preLoadChunk(
|
||||
zoom: number,
|
||||
cx: number,
|
||||
cy: number,
|
||||
zoom,
|
||||
cx,
|
||||
cy,
|
||||
chunkRGB,
|
||||
) {
|
||||
if (zoom <= 0) return null;
|
||||
|
@ -174,12 +172,12 @@ class ChunkLoader {
|
|||
|
||||
|
||||
getChunk(
|
||||
zoom: number,
|
||||
cx: number,
|
||||
cy: number,
|
||||
fetch: boolean,
|
||||
showLoadingTile: boolean = true,
|
||||
chunkPreLoading: boolean = true,
|
||||
zoom,
|
||||
cx,
|
||||
cy,
|
||||
fetch = true,
|
||||
showLoadingTile = true,
|
||||
chunkPreLoading = true,
|
||||
) {
|
||||
const chunkKey = `${zoom}:${cx}:${cy}`;
|
||||
let chunkRGB = this.chunks.get(chunkKey);
|
||||
|
@ -244,10 +242,10 @@ class ChunkLoader {
|
|||
}
|
||||
|
||||
async fetchHistoricalChunk(
|
||||
cx: number,
|
||||
cy: number,
|
||||
historicalDate: string,
|
||||
historicalTime: string,
|
||||
cx,
|
||||
cy,
|
||||
historicalDate,
|
||||
historicalTime,
|
||||
historicalCanvasMaxTiledZoom,
|
||||
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];
|
||||
this.store.dispatch(requestBigChunk(center));
|
||||
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];
|
||||
this.store.dispatch(requestBigChunk(center));
|
||||
try {
|
||||
|
|
|
@ -341,13 +341,12 @@ class Renderer {
|
|||
context.save();
|
||||
context.fillStyle = '#C4C4C4';
|
||||
context.scale(relScale, relScale);
|
||||
// decide if we will fetch missing chunks
|
||||
// and update the timestamps of accessed chunks
|
||||
// decide if we update the timestamps of accessed chunks
|
||||
const curTime = Date.now();
|
||||
let fetch = false;
|
||||
let touch = false;
|
||||
if (curTime > this.lastFetch + 150) {
|
||||
this.lastFetch = curTime;
|
||||
fetch = true;
|
||||
touch = true;
|
||||
}
|
||||
|
||||
const xOffset = CANVAS_WIDTH / 2 / relScale - TILE_SIZE / 2;
|
||||
|
@ -380,10 +379,10 @@ class Renderer {
|
|||
// if out of bounds
|
||||
context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
|
||||
} else {
|
||||
chunk = this.chunkLoader.getChunk(tiledZoom, cx, cy, fetch);
|
||||
chunk = this.chunkLoader.getChunk(tiledZoom, cx, cy);
|
||||
if (chunk) {
|
||||
context.drawImage(chunk, x, y);
|
||||
if (fetch) {
|
||||
if (touch) {
|
||||
chunk.timestamp = curTime;
|
||||
}
|
||||
} else {
|
||||
|
@ -580,13 +579,12 @@ class Renderer {
|
|||
}
|
||||
// scale
|
||||
context.scale(scale, scale);
|
||||
// decide if we will fetch missing chunks
|
||||
// and update the timestamps of accessed chunks
|
||||
// decide if we update the timestamps of accessed chunks
|
||||
const curTime = Date.now();
|
||||
let fetch = false;
|
||||
let touch = false;
|
||||
if (curTime > this.lastFetch + 150) {
|
||||
this.lastFetch = curTime;
|
||||
fetch = true;
|
||||
touch = true;
|
||||
}
|
||||
|
||||
const xOffset = CANVAS_WIDTH / 2 / scale - TILE_SIZE / 2;
|
||||
|
@ -618,10 +616,10 @@ class Renderer {
|
|||
} else {
|
||||
// full chunks
|
||||
chunk = this.chunkLoader
|
||||
.getHistoricalChunk(cx, cy, fetch, historicalDate);
|
||||
.getHistoricalChunk(cx, cy, true, historicalDate);
|
||||
if (chunk) {
|
||||
context.drawImage(chunk, x, y);
|
||||
if (fetch) {
|
||||
if (touch) {
|
||||
chunk.timestamp = curTime;
|
||||
}
|
||||
} else {
|
||||
|
@ -630,11 +628,11 @@ class Renderer {
|
|||
// incremential chunks
|
||||
if (historicalTime === '0000') continue;
|
||||
chunk = this.chunkLoader
|
||||
.getHistoricalChunk(cx, cy, fetch, historicalDate, historicalTime);
|
||||
.getHistoricalChunk(cx, cy, true, historicalDate, historicalTime);
|
||||
if (chunk) {
|
||||
if (!chunk.isEmpty) {
|
||||
context.drawImage(chunk, x, y);
|
||||
if (fetch) {
|
||||
if (touch) {
|
||||
chunk.timestamp = curTime;
|
||||
}
|
||||
}
|
||||
|
@ -649,7 +647,7 @@ class Renderer {
|
|||
);
|
||||
if (chunk && !chunk.isEmpty) {
|
||||
context.drawImage(chunk, x, y);
|
||||
if (fetch) {
|
||||
if (touch) {
|
||||
chunk.timestamp = curTime;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user