Merge pull request #10148 from pixijs/fix/texture-from

Fix: allow texture.from to accept resource directly

src/rendering/renderers/shared/texture/Texture.ts

@@ -5,12 +5,12 @@ import { Rectangle } from '../../../../maths/shapes/Rectangle';
 import { uid } from '../../../../utils/data/uid';
 import { deprecation, v8_0_0 } from '../../../../utils/logging/deprecation';
 import { NOOP } from '../../../../utils/misc/NOOP';
-import { BufferImageSource, type BufferSourceOptions } from './sources/BufferSource';
+import { BufferImageSource } from './sources/BufferSource';
 import { resourceToTexture } from './sources/resourceToTexture';
 import { TextureSource } from './sources/TextureSource';
 import { TextureMatrix } from './TextureMatrix';
 
-import type { TextureSourceOptions } from './sources/TextureSource';
+import type { TextureResourceOrOptions } from './sources/resourceToTexture';
 
 /** Stores the width of the non-scalable borders, for example when used with {@link scene.NineSlicePlane} texture. */
 export interface TextureBorders
@@ -62,7 +62,7 @@ export interface BindableTexture
     source: TextureSource;
 }
 
-export type TextureSourceLike = TextureSource | TextureSourceOptions | BufferSourceOptions | string;
+export type TextureSourceLike = TextureSource | TextureResourceOrOptions | string;
 
 /**
  * A texture stores the information that represents an image or part of an image.

src/rendering/renderers/shared/texture/sources/resourceToTexture.ts

@@ -17,34 +17,45 @@ const sources: TextureSourceConstructor[] = [];
 
 extensions.handleByList(ExtensionType.TextureSource, sources);
 
-export function autoDetectSource(options: TextureSourceOptions<ImageResource> | BufferSourceOptions = {}): TextureSource
+export type TextureResourceOrOptions =
+  ImageResource
+  | TextureSourceOptions<ImageResource>
+  | BufferSourceOptions;
+
+export function autoDetectSource(options: TextureResourceOrOptions = {}): TextureSource
 {
+    const hasResource = options && (options as TextureSourceOptions).resource;
+    const res = hasResource ? (options as TextureSourceOptions).resource : options;
+    const opts = hasResource ? options as TextureSourceOptions : { resource: options } as TextureSourceOptions;
+
     for (let i = 0; i < sources.length; i++)
     {
         const Source = sources[i];
 
-        if (Source.test(options.resource))
+        if (Source.test(res))
         {
-            return new Source(options);
+            return new Source(opts);
         }
     }
 
-    throw new Error(`Could not find a source type for resource: ${options.resource}`);
+    throw new Error(`Could not find a source type for resource: ${opts.resource}`);
 }
 
 export function resourceToTexture(
-    options: TextureSourceOptions<ImageResource> | BufferSourceOptions = {},
+    options: TextureResourceOrOptions = {},
     skipCache = false
 ): Texture
 {
-    const { resource } = options;
+    const hasResource = options && (options as TextureSourceOptions).resource;
+    const resource = hasResource ? (options as TextureSourceOptions).resource : options;
+    const opts = hasResource ? options as TextureSourceOptions : { resource: options } as TextureSourceOptions;
 
     if (!skipCache && Cache.has(resource))
     {
         return Cache.get(resource);
     }
 
-    const texture = new Texture({ source: autoDetectSource(options) });
+    const texture = new Texture({ source: autoDetectSource(opts) });
 
     texture.on('destroy', () =>
     {

tests/renderering/textures/Textures.test.ts

@@ -46,7 +46,45 @@ describe('Texture', () =>
             height: 2,
         });
 
-        expect(Texture.from({ resource: buffer })).toBe(texture);
+        expect(Texture.from({ resource: buffer, width: 2, height: 2 })).toBe(texture);
+        expect(Cache.has(buffer)).toBe(true);
+    });
+
+    it('should return the same texture when resource is the same', () =>
+    {
+        const videoElement = document.createElement('video');
+
+        let texture = Texture.from(videoElement);
+
+        expect(Texture.from(videoElement)).toBe(texture);
+        expect(Cache.has(videoElement)).toBe(true);
+
+        const imageElement = document.createElement('img');
+
+        texture = Texture.from(imageElement);
+
+        expect(Texture.from(imageElement)).toBe(texture);
+        expect(Cache.has(imageElement)).toBe(true);
+
+        const canvasElement = document.createElement('canvas');
+
+        texture = Texture.from(canvasElement);
+
+        expect(Texture.from(canvasElement)).toBe(texture);
+        expect(Cache.has(canvasElement)).toBe(true);
+
+        const buffer = new Uint8Array([
+            255, 0, 0, 255, 0, 255, 0, 153,
+            0, 0, 255, 102, 255, 255, 0, 51
+        ]);
+
+        texture = Texture.from({
+            resource: buffer,
+            width: 2,
+            height: 2,
+        });
+
+        expect(Texture.from({ resource: buffer, width: 2, height: 2 })).toBe(texture);
         expect(Cache.has(buffer)).toBe(true);
     });