cha0s/avocado
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: async imageness

Browse Source
This commit is contained in:
cha0s 2022-03-15 13:30:16 -05:00
parent 9ea752e858
commit 4b06dfbac1
2 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/graphics/src/image.js
View File

@ -26,17 +26,16 @@ export default class Image extends Resource {
}; };
} }
destroy() { // @todo Implement refcount with PIXI cache and we can do this.
if (!this.texture.isFake) { // destroy() {
this.texture.destroy(); // if (!this.texture.isFake) {
} // this.texture.destroy();
} // }
// }
static from(O) { static async from(O) {
// eslint-disable-next-line global-require
const {Texture} = require('@pixi/core');
const image = new Image(); const image = new Image();
image.texture = Texture.from(O); image.texture = await this.pixiTextureFromElement(O);
return image; return image;
} }
@ -55,10 +54,8 @@ export default class Image extends Resource {
}; };
return; return;
} }
// eslint-disable-next-line global-require
const {Texture} = require('@pixi/core');
if (cache.has(uri)) { if (cache.has(uri)) {
this.texture = Texture.from((await cache.get(uri)).cloneNode()); this.texture = await this.constructor.pixiTextureFromElement(await cache.get(uri));
return; return;
} }
const image = window.document.createElement('img'); const image = window.document.createElement('img');
@ -71,7 +68,7 @@ export default class Image extends Resource {
}); });
}); });
cache.set(uri, promise); cache.set(uri, promise);
this.texture = Texture.from((await promise).cloneNode()); this.texture = await this.constructor.pixiTextureFromElement(await promise);
} }
else { else {
this.texture = { this.texture = {
@ -82,6 +79,28 @@ export default class Image extends Resource {
} }
} }
// This is a little wonky, but basically we're reaching into PIXI's guts a bit.
// @todo this will probably break image loading at some point.
static pixiTextureFromElement(element) {
// eslint-disable-next-line global-require
const {Texture} = require('@pixi/core');
const clone = element.cloneNode();
// eslint-disable-next-line no-param-reassign, no-underscore-dangle
clone._pixiId = element._pixiId;
const texture = Texture.from(clone);
// Cache hit.
if (texture.valid) {
return texture;
}
return new Promise((resolve) => {
texture.once('update', () => {
// eslint-disable-next-line no-param-reassign, no-underscore-dangle
element._pixiId = clone._pixiId;
resolve(texture);
});
});
}
get size() { get size() {
return [this.width, this.height]; return [this.width, this.height];
} }

10
packages/topdown/src/renderable/tiles.js
View File

@ -91,8 +91,8 @@ export default class TilesView extends Container {
for (let i = 0; i < chunks.length; ++i) { for (let i = 0; i < chunks.length; ++i) {
const chunk = chunks[i]; const chunk = chunks[i];
const rendered = this.rendered[this.constructor.hashChunk(chunk)]; const rendered = this.rendered[this.constructor.hashChunk(chunk)];
this.wrapper.removeChild(rendered);
if (rendered) { if (rendered) {
this.wrapper.removeChild(rendered);
rendered.destroy(true); rendered.destroy(true);
} }
this.renderChunk(chunk); this.renderChunk(chunk);
@ -103,7 +103,7 @@ export default class TilesView extends Container {
this.invalidateChunks(this.chunksForUnitExtent([x, y, w, h])); this.invalidateChunks(this.chunksForUnitExtent([x, y, w, h]));
} }
renderChunk([cux, cuy]) { async renderChunk([cux, cuy]) {
if (cux < 0 || cuy < 0) { if (cux < 0 || cuy < 0) {
return; return;
} }
@ -120,7 +120,7 @@ export default class TilesView extends Container {
const [tw, th] = this.tiles.tileSize; const [tw, th] = this.tiles.tileSize;
const slice = this.tiles.slice([cx - 1, cy - 1, sw + 2, sh + 2]); const slice = this.tiles.slice([cx - 1, cy - 1, sw + 2, sh + 2]);
const container = new Container(); const container = new Container();
const mask = this.renderMask(slice, [sw + 2, sh + 2]); const mask = await this.renderMask(slice, [sw + 2, sh + 2]);
if (mask) { if (mask) {
container.mask = mask; container.mask = mask;
mask.anchor = [0, 0]; mask.anchor = [0, 0];
@ -175,7 +175,7 @@ export default class TilesView extends Container {
} }
} }
renderMask(slice, size) { async renderMask(slice, size) {
const hulls = this.tiles.constructor.indexHulls( const hulls = this.tiles.constructor.indexHulls(
new Set([342, 456, 103, 104, 407, 408, 423, 424]), new Set([342, 456, 103, 104, 407, 408, 423, 424]),
slice, slice,
@ -232,7 +232,7 @@ export default class TilesView extends Container {
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
} }
return new Sprite(Image.from(canvas)); return new Sprite(await Image.from(canvas));
} }
} }