Keep the editor's level browser dialog around, and render previews faster

It's kind of annoying to watch the previews flicker into existence anew
every time you open the dialog, if you're working on several levels at a
time.
This commit is contained in:
Eevee (Evelyn Woods) 2021-01-20 11:59:29 -07:00
parent 1e38ccdc30
commit ff33c42cc2

View File

@ -392,31 +392,45 @@ class EditorLevelBrowserOverlay extends DialogOverlay {
schedule_level_render() { schedule_level_render() {
if (this._handle) if (this._handle)
return; return;
this._handle = setTimeout(() => { this.render_level() }, 100); this._handle = setTimeout(() => { this.render_level() }, 50);
} }
render_level() { render_level() {
this._handle = null; this._handle = null;
if (this.awaiting_renders.length === 0)
return;
let index = this.awaiting_renders.shift(); let t0 = performance.now();
let element = this.list.childNodes[index]; while (true) {
let stored_level = this.conductor.stored_game.load_level(index); if (this.awaiting_renders.length === 0)
this.renderer.set_level(stored_level); return;
this.renderer.set_viewport_size(stored_level.size_x, stored_level.size_y);
this.renderer.draw_static_region(0, 0, stored_level.size_x, stored_level.size_y); let index = this.awaiting_renders.shift();
let canvas = mk('canvas', { let element = this.list.childNodes[index];
width: stored_level.size_x * this.renderer.tileset.size_x / 4, // FIXME levels may have been renumbered since this was queued, whoops
height: stored_level.size_y * this.renderer.tileset.size_y / 4, let stored_level = this.conductor.stored_game.load_level(index);
}); this.renderer.set_level(stored_level);
canvas.getContext('2d').drawImage(this.renderer.canvas, 0, 0, canvas.width, canvas.height); this.renderer.set_viewport_size(stored_level.size_x, stored_level.size_y);
element.querySelector('.-preview').append(canvas); this.renderer.draw_static_region(0, 0, stored_level.size_x, stored_level.size_y);
element.classList.add('--rendered'); let canvas = mk('canvas', {
width: stored_level.size_x * this.renderer.tileset.size_x / 4,
height: stored_level.size_y * this.renderer.tileset.size_y / 4,
});
canvas.getContext('2d').drawImage(this.renderer.canvas, 0, 0, canvas.width, canvas.height);
element.querySelector('.-preview').append(canvas);
element.classList.add('--rendered');
if (performance.now() - t0 > 10)
break;
}
this.schedule_level_render(); this.schedule_level_render();
} }
expire(index) {
let li = this.list.childNodes[index];
li.classList.remove('--rendered');
li.querySelector('.-preview').textContent = '';
}
_after_insert_level(stored_level, index) { _after_insert_level(stored_level, index) {
this.list.insertBefore( this.list.insertBefore(
this._make_list_item(index, this.conductor.stored_game.level_metadata[index]), this._make_list_item(index, this.conductor.stored_game.level_metadata[index]),
@ -3273,11 +3287,16 @@ export class Editor extends PrimaryView {
this._save_level_to_storage(this.stored_level); this._save_level_to_storage(this.stored_level);
save_json_to_storage(pack_key, pack_stash); save_json_to_storage(pack_key, pack_stash);
this._save_pack_to_stash(stored_pack); this._save_pack_to_stash(stored_pack);
if (this._level_browser) {
this._level_browser.expire(this.conductor.level_index);
}
} }
// Level loading // Level loading
load_game(stored_game) { load_game(stored_game) {
this._level_browser = null;
} }
load_level(stored_level) { load_level(stored_level) {
@ -3333,7 +3352,10 @@ export class Editor extends PrimaryView {
} }
open_level_browser() { open_level_browser() {
new EditorLevelBrowserOverlay(this.conductor).open(); if (! this._level_browser) {
this._level_browser = new EditorLevelBrowserOverlay(this.conductor);
}
this._level_browser.open();
} }
select_tool(tool) { select_tool(tool) {