some movie clip race condition fixes

This commit is contained in:
Emi Matchu 2020-09-22 04:36:32 -07:00
parent d1be0f2d4a
commit 185d6acc88

View file

@ -127,6 +127,7 @@ export function OutfitCanvasImage({ src, zIndex }) {
let image; let image;
let bitmap; let bitmap;
let tween; let tween;
let canceled = false;
function setBitmapSize() { function setBitmapSize() {
bitmap.scaleX = width / image.width; bitmap.scaleX = width / image.width;
@ -135,6 +136,10 @@ export function OutfitCanvasImage({ src, zIndex }) {
async function addBitmap() { async function addBitmap() {
image = await loadImage(src); image = await loadImage(src);
if (canceled) {
return;
}
bitmap = new window.createjs.Bitmap(image); bitmap = new window.createjs.Bitmap(image);
// We're gonna fade in! Wait for the first frame to draw, to make the // We're gonna fade in! Wait for the first frame to draw, to make the
@ -164,6 +169,7 @@ export function OutfitCanvasImage({ src, zIndex }) {
addBitmap(); addBitmap();
return () => { return () => {
canceled = true;
if (bitmap) { if (bitmap) {
// Reverse the fade-in into a fade-out, then remove the bitmap. // Reverse the fade-in into a fade-out, then remove the bitmap.
tween.reversed = true; tween.reversed = true;
@ -200,6 +206,7 @@ export function OutfitCanvasMovie({ librarySrc, zIndex }) {
let library; let library;
let movieClip; let movieClip;
let tween; let tween;
let canceled = false;
function updateSize() { function updateSize() {
movieClip.scaleX = width / library.properties.width; movieClip.scaleX = width / library.properties.width;
@ -211,6 +218,10 @@ export function OutfitCanvasMovie({ librarySrc, zIndex }) {
library = await loadMovieLibrary(librarySrc); library = await loadMovieLibrary(librarySrc);
} catch (e) { } catch (e) {
console.error("Error loading movie library", librarySrc, e); console.error("Error loading movie library", librarySrc, e);
return;
}
if (canceled) {
return;
} }
let constructorName; let constructorName;
@ -280,6 +291,7 @@ export function OutfitCanvasMovie({ librarySrc, zIndex }) {
addMovieClip(); addMovieClip();
return () => { return () => {
canceled = true;
if (movieClip) { if (movieClip) {
// Reverse the fade-in into a fade-out, then remove the bitmap. // Reverse the fade-in into a fade-out, then remove the bitmap.
tween.reversed = true; tween.reversed = true;