@makefully/platypus 4.1.10 → 4.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@makefully/platypus",
-    "version": "4.1.10",
+    "version": "4.1.13",
     "description": "2D tile-based HTML5 game engine with a component-based entity model",
     "license": "MIT",
     "contributors": [
@@ -73,7 +73,7 @@
         "webpack-dev-server": "^5.2.2"
     },
     "peerDependencies": {
-        "@esotericsoftware/spine-pixi-v8": "^4.3.7",
+        "@esotericsoftware/spine-pixi-v8": "^4.3.13",
         "@pixi/sound": "github:Makefully-Studios/sound#feature/media-file",
         "@tweenjs/tween.js": "^23.1.1",
         "pako": "^2.1.0",

package/src/AssetManager.js

@@ -7,6 +7,7 @@
 /* global platypus, setTimeout */
 import Data from './Data.js';
 import DataMap from './DataMap.js';
+import PIXIAnimation from './PIXIAnimation.js';
 import {Assets} from 'pixi.js';
 import {arrayCache} from './utils/array.js';
 
@@ -58,6 +59,7 @@ export default class AssetManager {
                     asset.src = '';
                 }
                 assets.delete(alias);
+                PIXIAnimation.invalidateTextureSources(alias);
             }
 
             return !counts[alias];

package/src/Messenger.js

@@ -1,9 +1,8 @@
-/* global platypus, window */
+/* global performance, platypus */
 import EventHandlerList from './EventHandlerList.js';
 import {arrayCache, greenSlice} from './utils/array.js';
 
 const
-    getPerfTools = () => typeof performance !== 'undefined' && performance.mark && performance.measure ? performance : null,
     runBoth = function (f1, f2) {
         return function () {
             f1.apply(this, arguments);
@@ -57,8 +56,6 @@ class Messenger {
                 
                 // Debug logging.
                 if (debugLogging || this.debug) {
-                    const perfTools = getPerfTools();
-
                     for (let i = 0; i < this.loopCheck.length; i++) {
                         if (this.loopCheck[i] === event) {
                             debugCount += 1;
@@ -72,17 +69,13 @@ class Messenger {
     
                     this.loopCheck.push(event);
 
-                    if (perfTools) {
-                        perfTools.mark("a");
-                    }
+                    performance.mark("a");
 
                     const
                         count = triggerEvent.apply(this, arguments);
 
-                    if (perfTools) {
-                        perfTools.mark("b");
-                        perfTools.measure(this.type + ":" + event, 'a', 'b');
-                    }
+                    performance.mark("b");
+                    performance.measure(this.type + ":" + event, 'a', 'b');
                     this.loopCheck.length = this.loopCheck.length - 1;
                     if (debugLogging) {
                         if (count) {
@@ -341,7 +334,14 @@ class Messenger {
                 key = methods[i];
 
             if (key !== 'constructor') {
-                if (toProto[key]) {
+                const
+                    descriptor = Object.getOwnPropertyDescriptor(fromProto, key);
+
+                // Preserve accessors (e.g. `destroyed`); assigning fromProto[key] would
+                // evaluate getters and copy a stale value instead.
+                if (descriptor.get || descriptor.set) {
+                    Object.defineProperty(toProto, key, descriptor);
+                } else if (Object.prototype.hasOwnProperty.call(toProto, key) || toProto[key]) {
                     toProto[key] = runBoth(toProto[key], fromProto[key]);
                 } else {
                     toProto[key] = fromProto[key];

package/src/PIXIAnimation.js

@@ -4,15 +4,74 @@ import {arrayCache, greenSlice} from './utils/array.js';
 import Data from './Data.js';
 
 const
-    MAX_KEY_LENGTH_PER_IMAGE = 128,
     animationCache = {},
     textureSourceCache = {},
     doNothing = function () {},
     emptyFrame = Texture.EMPTY,
-    regex = /[\[\]{},-]/g,
+    imageBasename = /([\w-\.]+)\.(\w+)$/,
+    hashString = function (value) {
+        const
+            str = typeof value === 'string' ? value : JSON.stringify(value);
+        let hash = 5381;
+
+        for (let i = 0; i < str.length; i++) {
+            hash = ((hash << 5) + hash) ^ str.charCodeAt(i);
+        }
+
+        return (hash >>> 0).toString(36);
+    },
+    getTextureCacheKey = function (path) {
+        return platypus.assetCache?.getFileId ? platypus.assetCache.getFileId(path) : path;
+    },
+    resolveTextureAsset = function (path) {
+        const
+            assetCache = platypus.assetCache;
+
+        if (!assetCache) {
+            return null;
+        }
+
+        let asset = assetCache.get(path);
+
+        if (asset) {
+            return asset;
+        }
+
+        const
+            basename = typeof path === 'string' ? path.match(imageBasename) : null;
+
+        if (basename) {
+            asset = assetCache.get(basename[1]);
+
+            if (asset) {
+                return asset;
+            }
+        }
+
+        return null;
+    },
+    getTextureSourceAliases = function (alias) {
+        const
+            aliases = arrayCache.setUp(alias),
+            basename = typeof alias === 'string' ? alias.match(imageBasename) : null;
+
+        if (platypus.assetCache?.getFileId) {
+            const
+                fileId = platypus.assetCache.getFileId(alias);
+
+            if (fileId !== alias) {
+                aliases.push(fileId);
+            }
+        }
+
+        if (basename) {
+            aliases.push(basename[1]);
+        }
+
+        return aliases;
+    },
     getTextureSources = function (images) {
         const
-            assetCache = platypus.assetCache,
             bts = arrayCache.setUp();
         
         for (let i = 0; i < images.length; i++) {
@@ -20,17 +79,21 @@ const
                 path = images[i];
 
             if (typeof path === 'string') {
-                if (!textureSourceCache[path]) {
-                    const
-                        asset = assetCache.get(path);
+                const
+                    cacheKey = getTextureCacheKey(path),
+                    asset = resolveTextureAsset(path);
 
-                    if (!asset) {
-                        platypus.debug.warn(`PIXIAnimation: "${path}" is not a loaded asset.`);
-                        break;
-                    }
-                    textureSourceCache[path] = asset.source;
+                if (!asset) {
+                    delete textureSourceCache[cacheKey];
+                    platypus.debug.warn(`PIXIAnimation: "${path}" is not a loaded asset.`);
+                    break;
+                }
+
+                if (textureSourceCache[cacheKey] !== asset.source) {
+                    textureSourceCache[cacheKey] = asset.source;
                 }
-                bts.push(textureSourceCache[path]);
+
+                bts.push(textureSourceCache[cacheKey]);
             } else {
                 bts.push(new TextureSource(path));
             }
@@ -49,9 +112,7 @@ const
             }
         }
         
-        spriteSheet.id = JSON.stringify(spriteSheet).replace(regex, '');
-
-        return spriteSheet.id;
+        return `ss-${hashString(spriteSheet)}`;
     },
     getDefaultAnimation = function (length, textures) {
         const
@@ -397,6 +458,29 @@ const
             };
         }
         
+        /**
+         * Removes cached texture sources for an unloaded asset alias.
+         *
+         * @method platypus.PIXIAnimation.invalidateTextureSources
+         * @param {*} alias Asset alias or path used when the texture was cached.
+         */
+        static invalidateTextureSources (alias) {
+            const
+                aliases = getTextureSourceAliases(alias),
+                cacheKey = getTextureCacheKey(alias);
+            let i = aliases.length;
+
+            if (aliases.indexOf(cacheKey) === -1) {
+                aliases.push(cacheKey);
+            }
+
+            while (i--) {
+                delete textureSourceCache[aliases[i]];
+            }
+
+            arrayCache.recycle(aliases);
+        }
+
         /**
          * This method formats a provided value into a valid PIXIAnimation Sprite Sheet. This includes accepting the EaselJS spec, strings mapping to Platypus sprite sheets, or arrays of either.
          *
@@ -406,7 +490,6 @@ const
          */
         static formatSpriteSheet (spriteSheet) {
             const
-                imageParts = /([\w-\.]+)\.(\w+)$/,
                 addAnimations = function (source = {}, destination, speedRatio, firstFrameIndex, id) {
                     const
                         keys = Object.keys(source),
@@ -458,7 +541,6 @@ const
                         ));
                     }
                 },
-                createId = (images) => images.map((image) => (image.src ?? image).substring(0, MAX_KEY_LENGTH_PER_IMAGE)).join(','),
                 format = function (source, destination) {
                     const
                         {
@@ -479,11 +561,8 @@ const
                         firstImageIndex = dImages.length,
                         firstFrameIndex = dFrames.length;
                     
-                    // Set up id
-                    if (dID) {
-                        destination.id = `${dID};${sID ?? createId(sImages)}`;
-                    } else {
-                        destination.id = sID ?? createId(sImages);
+                    if (sID) {
+                        destination.id = dID ? `${dID};${sID}` : sID;
                     }
                     
                     // Set up images array
@@ -546,7 +625,7 @@ const
                 formatImages = function (name) {
                     if (typeof name === 'string') {
                         const
-                            match = name.match(imageParts);
+                            match = name.match(imageBasename);
 
                         if (match) {
                             return match[1];

package/src/components/EntityContainer.js

@@ -139,6 +139,10 @@ const
             },
             
             addNewPrivateEvent (event) {
+                if (this.destroyed || !this.entities || !this._childEvents) {
+                    return false;
+                }
+
                 if (this._childEvents[event]) {
                     return false;
                 }
@@ -148,7 +152,17 @@ const
                 // Listen for message on children
                 for (let x = 0; x < this.entities.length; x++) {
                     const
-                        listenerList = this.entities[x]._listeners[event];
+                        entity = this.entities[x],
+                        listeners = entity && entity._listeners;
+
+                    // Child may already be destroyed while still listed (e.g. re-entrant
+                    // input during container teardown).
+                    if (!listeners) {
+                        continue;
+                    }
+
+                    const
+                        listenerList = listeners[event];
 
                     if (listenerList) {
                         const
@@ -156,7 +170,7 @@ const
 
                         for (let y = 0; y < handlers.length; y++) {
                             this.addChildEventListener(
-                                this.entities[x],
+                                entity,
                                 event,
                                 handlers[y]
                             );
@@ -174,7 +188,13 @@ const
             
             addChildEventListeners (entity) {
                 const
-                    {_listeners} = entity,
+                    {_listeners} = entity;
+
+                if (!_listeners) {
+                    return;
+                }
+
+                const
                     keys = Object.keys(_listeners),
                     {length} = keys;
 
@@ -268,10 +288,14 @@ const
             },
 
             destroy: function () {
+                // Mark destroyed first so re-entrant input (e.g. Enter:down) cannot
+                // walk children mid-teardown after their `_listeners` are nulled.
+                this._destroyed = true;
+
                 const
-                    entities = greenSlice(this.entities); // Make a copy to handle entities being destroyed while processing list.
+                    entities = this.entities ? greenSlice(this.entities) : arrayCache.setUp(); // Make a copy to handle entities being destroyed while processing list.
                 let i = entities.length;
-                
+
                 while (i--) {
                     const
                         entity = entities[i];
@@ -279,14 +303,22 @@ const
                     this.removeChildEventListeners(entity);
                     entity.destroy();
                 }
-                
+
                 arrayCache.recycle(entities);
-                arrayCache.recycle(this.entities);
+                if (this.entities) {
+                    arrayCache.recycle(this.entities);
+                    this.entities = null;
+                }
                 this.owner.entities = null;
-                arrayCache.recycle(this.childEvents);
-                this.childEvents = null;
-                arrayCache.recycle(this.newAdds);
-                this.newAdds = null;
+                this._childEvents = null;
+                if (this.childEvents) {
+                    arrayCache.recycle(this.childEvents);
+                    this.childEvents = null;
+                }
+                if (this.newAdds) {
+                    arrayCache.recycle(this.newAdds);
+                    this.newAdds = null;
+                }
             }
         },
         
@@ -485,7 +517,7 @@ const
              * @param {*} debug
              */
             triggerEventOnChildren: function (event, message, debug) {
-                if (this.destroyed) {
+                if (this.destroyed || !this.entities || !this._childEvents) {
                     return 0;
                 }
                 
@@ -504,7 +536,7 @@ const
              * @param {*} debug
              */
             triggerOnChildren: function (event) {
-                if (this.destroyed) {
+                if (this.destroyed || !this.entities || !this._childEvents) {
                     return 0;
                 }