diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index c71693f..fcbafa0 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -653,6 +653,31 @@ return this.resource && this.resource.url; }, }, + /** + * @name PIXI.BaseTexture#source + * @type {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} + * @deprecated since 5.0.0 + * @readonly + * @see PIXI.resources.BaseImageResource#source + */ + source: { + get() + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source`'); + + return this.resource && this.resource.source; + }, + set(source) + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source` ' + + 'if you want to set HTMLCanvasElement. Otherwise, create new BaseTexture.'); + + if (this.resource) + { + this.resource.source = source; + } + }, + }, }); /** diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index c71693f..fcbafa0 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -653,6 +653,31 @@ return this.resource && this.resource.url; }, }, + /** + * @name PIXI.BaseTexture#source + * @type {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} + * @deprecated since 5.0.0 + * @readonly + * @see PIXI.resources.BaseImageResource#source + */ + source: { + get() + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source`'); + + return this.resource && this.resource.source; + }, + set(source) + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source` ' + + 'if you want to set HTMLCanvasElement. Otherwise, create new BaseTexture.'); + + if (this.resource) + { + this.resource.source = source; + } + }, + }, }); /** diff --git a/packages/core/src/textures/BaseTexture.js b/packages/core/src/textures/BaseTexture.js index 67e281b..e986bad 100644 --- a/packages/core/src/textures/BaseTexture.js +++ b/packages/core/src/textures/BaseTexture.js @@ -406,7 +406,7 @@ { this.width = this.width * oldResolution / resolution; this.height = this.height * oldResolution / resolution; - this.emit('update'); + this.emit('update', this); } this._refreshPOT(); diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index c71693f..fcbafa0 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -653,6 +653,31 @@ return this.resource && this.resource.url; }, }, + /** + * @name PIXI.BaseTexture#source + * @type {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} + * @deprecated since 5.0.0 + * @readonly + * @see PIXI.resources.BaseImageResource#source + */ + source: { + get() + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source`'); + + return this.resource && this.resource.source; + }, + set(source) + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source` ' + + 'if you want to set HTMLCanvasElement. Otherwise, create new BaseTexture.'); + + if (this.resource) + { + this.resource.source = source; + } + }, + }, }); /** diff --git a/packages/core/src/textures/BaseTexture.js b/packages/core/src/textures/BaseTexture.js index 67e281b..e986bad 100644 --- a/packages/core/src/textures/BaseTexture.js +++ b/packages/core/src/textures/BaseTexture.js @@ -406,7 +406,7 @@ { this.width = this.width * oldResolution / resolution; this.height = this.height * oldResolution / resolution; - this.emit('update'); + this.emit('update', this); } this._refreshPOT(); diff --git a/packages/core/src/textures/Texture.js b/packages/core/src/textures/Texture.js index 26d86a8..53cabee 100644 --- a/packages/core/src/textures/Texture.js +++ b/packages/core/src/textures/Texture.js @@ -139,23 +139,6 @@ throw new Error('attempt to use diamond-shaped UVs. If you are sure, set rotation manually'); } - if (baseTexture.valid) - { - if (this.noFrame) - { - frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); - - // if there is no frame we should monitor for any base texture changes.. - baseTexture.on('update', this.onBaseTextureUpdated, this); - } - - this.frame = frame; - } - else - { - baseTexture.once('loaded', this.onBaseTextureUpdated, this); - } - /** * Anchor point that is used as default if sprite is created with this texture. * Changing the `defaultAnchor` at a later point of time will not update Sprite's anchor point. @@ -182,15 +165,40 @@ * @member {string[]} */ this.textureCacheIds = []; + + if (this.noFrame) + { + // if there is no frame we should monitor for any base texture changes.. + if (baseTexture.valid) + { + this.onBaseTextureUpdated(baseTexture); + } + baseTexture.on('update', this.onBaseTextureUpdated, this); + } + else if (!baseTexture.valid) + { + baseTexture.once('loaded', this.onBaseTextureUpdated, this); + } + else + { + this.frame = frame; + } } /** * Updates this texture on the gpu. * + * Calls the TextureResource update. + * + * If you adjusted `frame` manually, please call `updateUvs()` instead. + * */ update() { - this.baseTexture.update(); + if (this.baseTexture.resource) + { + this.baseTexture.resource.update(); + } } /** @@ -201,18 +209,23 @@ */ onBaseTextureUpdated(baseTexture) { - this._updateID++; - - // TODO this code looks confusing.. boo to abusing getters and setters! if (this.noFrame) { - this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (!this.baseTexture.valid) + { + return; + } + + this._frame.width = baseTexture.width; + this._frame.height = baseTexture.height; + this.valid = true; + this.updateUvs(); } else { + // TODO this code looks confusing.. boo to abusing getters and setters! + // if user gave us frame that has bigger size than resized texture it can be a problem this.frame = this._frame; - // TODO maybe watch out for the no frame option - // updating the texture will should update the frame if it was set to no frame.. } this.emit('update', this); diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index c71693f..fcbafa0 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -653,6 +653,31 @@ return this.resource && this.resource.url; }, }, + /** + * @name PIXI.BaseTexture#source + * @type {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} + * @deprecated since 5.0.0 + * @readonly + * @see PIXI.resources.BaseImageResource#source + */ + source: { + get() + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source`'); + + return this.resource && this.resource.source; + }, + set(source) + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source` ' + + 'if you want to set HTMLCanvasElement. Otherwise, create new BaseTexture.'); + + if (this.resource) + { + this.resource.source = source; + } + }, + }, }); /** diff --git a/packages/core/src/textures/BaseTexture.js b/packages/core/src/textures/BaseTexture.js index 67e281b..e986bad 100644 --- a/packages/core/src/textures/BaseTexture.js +++ b/packages/core/src/textures/BaseTexture.js @@ -406,7 +406,7 @@ { this.width = this.width * oldResolution / resolution; this.height = this.height * oldResolution / resolution; - this.emit('update'); + this.emit('update', this); } this._refreshPOT(); diff --git a/packages/core/src/textures/Texture.js b/packages/core/src/textures/Texture.js index 26d86a8..53cabee 100644 --- a/packages/core/src/textures/Texture.js +++ b/packages/core/src/textures/Texture.js @@ -139,23 +139,6 @@ throw new Error('attempt to use diamond-shaped UVs. If you are sure, set rotation manually'); } - if (baseTexture.valid) - { - if (this.noFrame) - { - frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); - - // if there is no frame we should monitor for any base texture changes.. - baseTexture.on('update', this.onBaseTextureUpdated, this); - } - - this.frame = frame; - } - else - { - baseTexture.once('loaded', this.onBaseTextureUpdated, this); - } - /** * Anchor point that is used as default if sprite is created with this texture. * Changing the `defaultAnchor` at a later point of time will not update Sprite's anchor point. @@ -182,15 +165,40 @@ * @member {string[]} */ this.textureCacheIds = []; + + if (this.noFrame) + { + // if there is no frame we should monitor for any base texture changes.. + if (baseTexture.valid) + { + this.onBaseTextureUpdated(baseTexture); + } + baseTexture.on('update', this.onBaseTextureUpdated, this); + } + else if (!baseTexture.valid) + { + baseTexture.once('loaded', this.onBaseTextureUpdated, this); + } + else + { + this.frame = frame; + } } /** * Updates this texture on the gpu. * + * Calls the TextureResource update. + * + * If you adjusted `frame` manually, please call `updateUvs()` instead. + * */ update() { - this.baseTexture.update(); + if (this.baseTexture.resource) + { + this.baseTexture.resource.update(); + } } /** @@ -201,18 +209,23 @@ */ onBaseTextureUpdated(baseTexture) { - this._updateID++; - - // TODO this code looks confusing.. boo to abusing getters and setters! if (this.noFrame) { - this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (!this.baseTexture.valid) + { + return; + } + + this._frame.width = baseTexture.width; + this._frame.height = baseTexture.height; + this.valid = true; + this.updateUvs(); } else { + // TODO this code looks confusing.. boo to abusing getters and setters! + // if user gave us frame that has bigger size than resized texture it can be a problem this.frame = this._frame; - // TODO maybe watch out for the no frame option - // updating the texture will should update the frame if it was set to no frame.. } this.emit('update', this); diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6c0b1d4..5944542 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -77,6 +77,22 @@ } /** + * Checks if source width/height was changed, resize can cause extra baseTexture update. + * Triggers one update in any case. + */ + update() + { + if (this.destroyed) + { + return; + } + + this.resize(this.source.width, this.source.height); + + super.update(); + } + + /** * Destroy this BaseImageResource * @override * @param {PIXI.BaseTexture} [fromTexture] Optional base texture diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index c71693f..fcbafa0 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -653,6 +653,31 @@ return this.resource && this.resource.url; }, }, + /** + * @name PIXI.BaseTexture#source + * @type {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} + * @deprecated since 5.0.0 + * @readonly + * @see PIXI.resources.BaseImageResource#source + */ + source: { + get() + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source`'); + + return this.resource && this.resource.source; + }, + set(source) + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source` ' + + 'if you want to set HTMLCanvasElement. Otherwise, create new BaseTexture.'); + + if (this.resource) + { + this.resource.source = source; + } + }, + }, }); /** diff --git a/packages/core/src/textures/BaseTexture.js b/packages/core/src/textures/BaseTexture.js index 67e281b..e986bad 100644 --- a/packages/core/src/textures/BaseTexture.js +++ b/packages/core/src/textures/BaseTexture.js @@ -406,7 +406,7 @@ { this.width = this.width * oldResolution / resolution; this.height = this.height * oldResolution / resolution; - this.emit('update'); + this.emit('update', this); } this._refreshPOT(); diff --git a/packages/core/src/textures/Texture.js b/packages/core/src/textures/Texture.js index 26d86a8..53cabee 100644 --- a/packages/core/src/textures/Texture.js +++ b/packages/core/src/textures/Texture.js @@ -139,23 +139,6 @@ throw new Error('attempt to use diamond-shaped UVs. If you are sure, set rotation manually'); } - if (baseTexture.valid) - { - if (this.noFrame) - { - frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); - - // if there is no frame we should monitor for any base texture changes.. - baseTexture.on('update', this.onBaseTextureUpdated, this); - } - - this.frame = frame; - } - else - { - baseTexture.once('loaded', this.onBaseTextureUpdated, this); - } - /** * Anchor point that is used as default if sprite is created with this texture. * Changing the `defaultAnchor` at a later point of time will not update Sprite's anchor point. @@ -182,15 +165,40 @@ * @member {string[]} */ this.textureCacheIds = []; + + if (this.noFrame) + { + // if there is no frame we should monitor for any base texture changes.. + if (baseTexture.valid) + { + this.onBaseTextureUpdated(baseTexture); + } + baseTexture.on('update', this.onBaseTextureUpdated, this); + } + else if (!baseTexture.valid) + { + baseTexture.once('loaded', this.onBaseTextureUpdated, this); + } + else + { + this.frame = frame; + } } /** * Updates this texture on the gpu. * + * Calls the TextureResource update. + * + * If you adjusted `frame` manually, please call `updateUvs()` instead. + * */ update() { - this.baseTexture.update(); + if (this.baseTexture.resource) + { + this.baseTexture.resource.update(); + } } /** @@ -201,18 +209,23 @@ */ onBaseTextureUpdated(baseTexture) { - this._updateID++; - - // TODO this code looks confusing.. boo to abusing getters and setters! if (this.noFrame) { - this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (!this.baseTexture.valid) + { + return; + } + + this._frame.width = baseTexture.width; + this._frame.height = baseTexture.height; + this.valid = true; + this.updateUvs(); } else { + // TODO this code looks confusing.. boo to abusing getters and setters! + // if user gave us frame that has bigger size than resized texture it can be a problem this.frame = this._frame; - // TODO maybe watch out for the no frame option - // updating the texture will should update the frame if it was set to no frame.. } this.emit('update', this); diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6c0b1d4..5944542 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -77,6 +77,22 @@ } /** + * Checks if source width/height was changed, resize can cause extra baseTexture update. + * Triggers one update in any case. + */ + update() + { + if (this.destroyed) + { + return; + } + + this.resize(this.source.width, this.source.height); + + super.update(); + } + + /** * Destroy this BaseImageResource * @override * @param {PIXI.BaseTexture} [fromTexture] Optional base texture diff --git a/packages/core/test/CanvasResource.js b/packages/core/test/CanvasResource.js index f6a492f..231dec8 100644 --- a/packages/core/test/CanvasResource.js +++ b/packages/core/test/CanvasResource.js @@ -1,4 +1,4 @@ -const { resources } = require('../'); +const { resources, BaseTexture } = require('../'); const { CanvasResource } = resources; describe('PIXI.resources.CanvasResource', function () @@ -63,4 +63,24 @@ resource.unbind(baseTexture); resource.destroy(); }); + + it('should change BaseTexture size on update', function () + { + const canvas = document.createElement('canvas'); + + canvas.width = 50; + canvas.height = 50; + + const resource = new CanvasResource(canvas); + const baseTexture = new BaseTexture(resource); + + expect(baseTexture.width).to.equal(50); + canvas.width = 100; + resource.update(); + expect(baseTexture.width).to.equal(100); + canvas.height = 70; + resource.update(); + expect(baseTexture.height).to.equal(70); + resource.destroy(); + }); }); diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index c71693f..fcbafa0 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -653,6 +653,31 @@ return this.resource && this.resource.url; }, }, + /** + * @name PIXI.BaseTexture#source + * @type {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} + * @deprecated since 5.0.0 + * @readonly + * @see PIXI.resources.BaseImageResource#source + */ + source: { + get() + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source`'); + + return this.resource && this.resource.source; + }, + set(source) + { + deprecation(v5, 'PIXI.BaseTexture.source property has been moved, use `resource.source` ' + + 'if you want to set HTMLCanvasElement. Otherwise, create new BaseTexture.'); + + if (this.resource) + { + this.resource.source = source; + } + }, + }, }); /** diff --git a/packages/core/src/textures/BaseTexture.js b/packages/core/src/textures/BaseTexture.js index 67e281b..e986bad 100644 --- a/packages/core/src/textures/BaseTexture.js +++ b/packages/core/src/textures/BaseTexture.js @@ -406,7 +406,7 @@ { this.width = this.width * oldResolution / resolution; this.height = this.height * oldResolution / resolution; - this.emit('update'); + this.emit('update', this); } this._refreshPOT(); diff --git a/packages/core/src/textures/Texture.js b/packages/core/src/textures/Texture.js index 26d86a8..53cabee 100644 --- a/packages/core/src/textures/Texture.js +++ b/packages/core/src/textures/Texture.js @@ -139,23 +139,6 @@ throw new Error('attempt to use diamond-shaped UVs. If you are sure, set rotation manually'); } - if (baseTexture.valid) - { - if (this.noFrame) - { - frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); - - // if there is no frame we should monitor for any base texture changes.. - baseTexture.on('update', this.onBaseTextureUpdated, this); - } - - this.frame = frame; - } - else - { - baseTexture.once('loaded', this.onBaseTextureUpdated, this); - } - /** * Anchor point that is used as default if sprite is created with this texture. * Changing the `defaultAnchor` at a later point of time will not update Sprite's anchor point. @@ -182,15 +165,40 @@ * @member {string[]} */ this.textureCacheIds = []; + + if (this.noFrame) + { + // if there is no frame we should monitor for any base texture changes.. + if (baseTexture.valid) + { + this.onBaseTextureUpdated(baseTexture); + } + baseTexture.on('update', this.onBaseTextureUpdated, this); + } + else if (!baseTexture.valid) + { + baseTexture.once('loaded', this.onBaseTextureUpdated, this); + } + else + { + this.frame = frame; + } } /** * Updates this texture on the gpu. * + * Calls the TextureResource update. + * + * If you adjusted `frame` manually, please call `updateUvs()` instead. + * */ update() { - this.baseTexture.update(); + if (this.baseTexture.resource) + { + this.baseTexture.resource.update(); + } } /** @@ -201,18 +209,23 @@ */ onBaseTextureUpdated(baseTexture) { - this._updateID++; - - // TODO this code looks confusing.. boo to abusing getters and setters! if (this.noFrame) { - this.frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height); + if (!this.baseTexture.valid) + { + return; + } + + this._frame.width = baseTexture.width; + this._frame.height = baseTexture.height; + this.valid = true; + this.updateUvs(); } else { + // TODO this code looks confusing.. boo to abusing getters and setters! + // if user gave us frame that has bigger size than resized texture it can be a problem this.frame = this._frame; - // TODO maybe watch out for the no frame option - // updating the texture will should update the frame if it was set to no frame.. } this.emit('update', this); diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6c0b1d4..5944542 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -77,6 +77,22 @@ } /** + * Checks if source width/height was changed, resize can cause extra baseTexture update. + * Triggers one update in any case. + */ + update() + { + if (this.destroyed) + { + return; + } + + this.resize(this.source.width, this.source.height); + + super.update(); + } + + /** * Destroy this BaseImageResource * @override * @param {PIXI.BaseTexture} [fromTexture] Optional base texture diff --git a/packages/core/test/CanvasResource.js b/packages/core/test/CanvasResource.js index f6a492f..231dec8 100644 --- a/packages/core/test/CanvasResource.js +++ b/packages/core/test/CanvasResource.js @@ -1,4 +1,4 @@ -const { resources } = require('../'); +const { resources, BaseTexture } = require('../'); const { CanvasResource } = resources; describe('PIXI.resources.CanvasResource', function () @@ -63,4 +63,24 @@ resource.unbind(baseTexture); resource.destroy(); }); + + it('should change BaseTexture size on update', function () + { + const canvas = document.createElement('canvas'); + + canvas.width = 50; + canvas.height = 50; + + const resource = new CanvasResource(canvas); + const baseTexture = new BaseTexture(resource); + + expect(baseTexture.width).to.equal(50); + canvas.width = 100; + resource.update(); + expect(baseTexture.width).to.equal(100); + canvas.height = 70; + resource.update(); + expect(baseTexture.height).to.equal(70); + resource.destroy(); + }); }); diff --git a/packages/core/test/Texture.js b/packages/core/test/Texture.js index 4acbc8b..16f9e2f 100644 --- a/packages/core/test/Texture.js +++ b/packages/core/test/Texture.js @@ -159,4 +159,50 @@ clone.destroy(); texture.destroy(true); }); + + it('should update frame if its backed by canvas that was resized', function () + { + const canvas = document.createElement('canvas'); + + canvas.width = 50; + canvas.height = 50; + + const texture = new Texture.from(canvas); + + expect(texture.width).to.equal(50); + canvas.width = 100; + texture.update(); + expect(texture.width).to.equal(100); + canvas.height = 70; + texture.update(); + expect(texture.height).to.equal(70); + texture.destroy(true); + }); + + it('should update frame on baseTexture update only if user set it in constructor or in setter', function () + { + let baseTexture = new BaseTexture(); + + baseTexture.setSize(50, 50); + + let texture = new Texture(baseTexture); + + expect(texture.width).to.equal(50); + baseTexture.setSize(100, 70); + expect(texture.width).to.equal(100); + expect(texture.height).to.equal(70); + + texture.frame = new Rectangle(1, 1, 10, 20); + baseTexture.setSize(110, 80); + expect(texture.width).to.equal(10); + expect(texture.height).to.equal(20); + texture.destroy(true); + + baseTexture = new BaseTexture(); + texture = new Texture(baseTexture, new Rectangle(1, 1, 10, 20)); + baseTexture.setSize(50, 50); + expect(texture.width).to.equal(10); + expect(texture.height).to.equal(20); + texture.destroy(true); + }); });