diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 369b181..ccce680 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -121,6 +121,8 @@ this.emit('prerender'); + const rootResolution = this.resolution; + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; @@ -207,10 +209,34 @@ displayObject.renderCanvas(this); this.context = tempContext; + this.resolution = rootResolution; + this.emit('postrender'); } /** + * Clear the canvas of renderer. + * + * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent. + */ + clear(clearColor) + { + const context = this.context; + + clearColor = clearColor || this._backgroundColorString; + + if (!this.transparent && clearColor) + { + context.fillStyle = clearColor; + context.fillRect(0, 0, this.width, this.height); + } + else + { + context.clearRect(0, 0, this.width, this.height); + } + } + + /** * Sets the blend mode of the renderer. * * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values. diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 369b181..ccce680 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -121,6 +121,8 @@ this.emit('prerender'); + const rootResolution = this.resolution; + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; @@ -207,10 +209,34 @@ displayObject.renderCanvas(this); this.context = tempContext; + this.resolution = rootResolution; + this.emit('postrender'); } /** + * Clear the canvas of renderer. + * + * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent. + */ + clear(clearColor) + { + const context = this.context; + + clearColor = clearColor || this._backgroundColorString; + + if (!this.transparent && clearColor) + { + context.fillStyle = clearColor; + context.fillRect(0, 0, this.width, this.height); + } + else + { + context.clearRect(0, 0, this.width, this.height); + } + } + + /** * Sets the blend mode of the renderer. * * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values. diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 025fef0..f6b8f31 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -479,7 +479,7 @@ */ get width() { - return Math.abs(this.scale.x) * this.texture.orig.width; + return Math.abs(this.scale.x) * this._texture.orig.width; } /** @@ -491,7 +491,7 @@ { const s = sign(this.scale.x) || 1; - this.scale.x = s * value / this.texture.orig.width; + this.scale.x = s * value / this._texture.orig.width; this._width = value; } @@ -503,7 +503,7 @@ */ get height() { - return Math.abs(this.scale.y) * this.texture.orig.height; + return Math.abs(this.scale.y) * this._texture.orig.height; } /** @@ -515,7 +515,7 @@ { const s = sign(this.scale.y) || 1; - this.scale.y = s * value / this.texture.orig.height; + this.scale.y = s * value / this._texture.orig.height; this._height = value; } diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 369b181..ccce680 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -121,6 +121,8 @@ this.emit('prerender'); + const rootResolution = this.resolution; + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; @@ -207,10 +209,34 @@ displayObject.renderCanvas(this); this.context = tempContext; + this.resolution = rootResolution; + this.emit('postrender'); } /** + * Clear the canvas of renderer. + * + * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent. + */ + clear(clearColor) + { + const context = this.context; + + clearColor = clearColor || this._backgroundColorString; + + if (!this.transparent && clearColor) + { + context.fillStyle = clearColor; + context.fillRect(0, 0, this.width, this.height); + } + else + { + context.clearRect(0, 0, this.width, this.height); + } + } + + /** * Sets the blend mode of the renderer. * * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values. diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 025fef0..f6b8f31 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -479,7 +479,7 @@ */ get width() { - return Math.abs(this.scale.x) * this.texture.orig.width; + return Math.abs(this.scale.x) * this._texture.orig.width; } /** @@ -491,7 +491,7 @@ { const s = sign(this.scale.x) || 1; - this.scale.x = s * value / this.texture.orig.width; + this.scale.x = s * value / this._texture.orig.width; this._width = value; } @@ -503,7 +503,7 @@ */ get height() { - return Math.abs(this.scale.y) * this.texture.orig.height; + return Math.abs(this.scale.y) * this._texture.orig.height; } /** @@ -515,7 +515,7 @@ { const s = sign(this.scale.y) || 1; - this.scale.y = s * value / this.texture.orig.height; + this.scale.y = s * value / this._texture.orig.height; this._height = value; } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index b197e9c..3066a3a 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -517,7 +517,7 @@ */ get width() { - return this.orig ? this.orig.width : 0; + return this.orig.width; } /** @@ -527,7 +527,7 @@ */ get height() { - return this.orig ? this.orig.height : 0; + return this.orig.height; } } diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 369b181..ccce680 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -121,6 +121,8 @@ this.emit('prerender'); + const rootResolution = this.resolution; + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; @@ -207,10 +209,34 @@ displayObject.renderCanvas(this); this.context = tempContext; + this.resolution = rootResolution; + this.emit('postrender'); } /** + * Clear the canvas of renderer. + * + * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent. + */ + clear(clearColor) + { + const context = this.context; + + clearColor = clearColor || this._backgroundColorString; + + if (!this.transparent && clearColor) + { + context.fillStyle = clearColor; + context.fillRect(0, 0, this.width, this.height); + } + else + { + context.clearRect(0, 0, this.width, this.height); + } + } + + /** * Sets the blend mode of the renderer. * * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values. diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 025fef0..f6b8f31 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -479,7 +479,7 @@ */ get width() { - return Math.abs(this.scale.x) * this.texture.orig.width; + return Math.abs(this.scale.x) * this._texture.orig.width; } /** @@ -491,7 +491,7 @@ { const s = sign(this.scale.x) || 1; - this.scale.x = s * value / this.texture.orig.width; + this.scale.x = s * value / this._texture.orig.width; this._width = value; } @@ -503,7 +503,7 @@ */ get height() { - return Math.abs(this.scale.y) * this.texture.orig.height; + return Math.abs(this.scale.y) * this._texture.orig.height; } /** @@ -515,7 +515,7 @@ { const s = sign(this.scale.y) || 1; - this.scale.y = s * value / this.texture.orig.height; + this.scale.y = s * value / this._texture.orig.height; this._height = value; } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index b197e9c..3066a3a 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -517,7 +517,7 @@ */ get width() { - return this.orig ? this.orig.width : 0; + return this.orig.width; } /** @@ -527,7 +527,7 @@ */ get height() { - return this.orig ? this.orig.height : 0; + return this.orig.height; } } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 56b3819..94e18de 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -37,22 +37,20 @@ super(); /** - * The width of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the width of the overall text * * @member {number} - * @readonly + * @private */ - this.textWidth = 0; + this._textWidth = 0; /** - * The height of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the height of the overall text * * @member {number} - * @readonly + * @private */ - this.textHeight = 0; + this._textHeight = 0; /** * Private tracker for the letter sprite pool. @@ -264,16 +262,16 @@ this.removeChild(this._glyphs[i]); } - this.textWidth = maxLineWidth * scale; - this.textHeight = (pos.y + data.lineHeight) * scale; + this._textWidth = maxLineWidth * scale; + this._textHeight = (pos.y + data.lineHeight) * scale; // apply anchor if (this.anchor.x !== 0 || this.anchor.y !== 0) { for (let i = 0; i < lenChars; i++) { - this._glyphs[i].x -= this.textWidth * this.anchor.x; - this._glyphs[i].y -= this.textHeight * this.anchor.y; + this._glyphs[i].x -= this._textWidth * this.anchor.x; + this._glyphs[i].y -= this._textHeight * this.anchor.y; } } this.maxLineHeight = maxLineHeight * scale; @@ -459,6 +457,36 @@ this._text = value; this.dirty = true; } + + /** + * The width of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textWidth() + { + this.validate(); + + return this._textWidth; + } + + /** + * The height of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textHeight() + { + this.validate(); + + return this._textHeight; + } } BitmapText.fonts = {}; diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 369b181..ccce680 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -121,6 +121,8 @@ this.emit('prerender'); + const rootResolution = this.resolution; + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; @@ -207,10 +209,34 @@ displayObject.renderCanvas(this); this.context = tempContext; + this.resolution = rootResolution; + this.emit('postrender'); } /** + * Clear the canvas of renderer. + * + * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent. + */ + clear(clearColor) + { + const context = this.context; + + clearColor = clearColor || this._backgroundColorString; + + if (!this.transparent && clearColor) + { + context.fillStyle = clearColor; + context.fillRect(0, 0, this.width, this.height); + } + else + { + context.clearRect(0, 0, this.width, this.height); + } + } + + /** * Sets the blend mode of the renderer. * * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values. diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 025fef0..f6b8f31 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -479,7 +479,7 @@ */ get width() { - return Math.abs(this.scale.x) * this.texture.orig.width; + return Math.abs(this.scale.x) * this._texture.orig.width; } /** @@ -491,7 +491,7 @@ { const s = sign(this.scale.x) || 1; - this.scale.x = s * value / this.texture.orig.width; + this.scale.x = s * value / this._texture.orig.width; this._width = value; } @@ -503,7 +503,7 @@ */ get height() { - return Math.abs(this.scale.y) * this.texture.orig.height; + return Math.abs(this.scale.y) * this._texture.orig.height; } /** @@ -515,7 +515,7 @@ { const s = sign(this.scale.y) || 1; - this.scale.y = s * value / this.texture.orig.height; + this.scale.y = s * value / this._texture.orig.height; this._height = value; } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index b197e9c..3066a3a 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -517,7 +517,7 @@ */ get width() { - return this.orig ? this.orig.width : 0; + return this.orig.width; } /** @@ -527,7 +527,7 @@ */ get height() { - return this.orig ? this.orig.height : 0; + return this.orig.height; } } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 56b3819..94e18de 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -37,22 +37,20 @@ super(); /** - * The width of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the width of the overall text * * @member {number} - * @readonly + * @private */ - this.textWidth = 0; + this._textWidth = 0; /** - * The height of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the height of the overall text * * @member {number} - * @readonly + * @private */ - this.textHeight = 0; + this._textHeight = 0; /** * Private tracker for the letter sprite pool. @@ -264,16 +262,16 @@ this.removeChild(this._glyphs[i]); } - this.textWidth = maxLineWidth * scale; - this.textHeight = (pos.y + data.lineHeight) * scale; + this._textWidth = maxLineWidth * scale; + this._textHeight = (pos.y + data.lineHeight) * scale; // apply anchor if (this.anchor.x !== 0 || this.anchor.y !== 0) { for (let i = 0; i < lenChars; i++) { - this._glyphs[i].x -= this.textWidth * this.anchor.x; - this._glyphs[i].y -= this.textHeight * this.anchor.y; + this._glyphs[i].x -= this._textWidth * this.anchor.x; + this._glyphs[i].y -= this._textHeight * this.anchor.y; } } this.maxLineHeight = maxLineHeight * scale; @@ -459,6 +457,36 @@ this._text = value; this.dirty = true; } + + /** + * The width of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textWidth() + { + this.validate(); + + return this._textWidth; + } + + /** + * The height of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textHeight() + { + this.validate(); + + return this._textHeight; + } } BitmapText.fonts = {}; diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 4f3db8a..bbc6a8e 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -74,7 +74,7 @@ */ update(forceUpdate) { - const tex = this.texture; + const tex = this._texture; if (!tex || !tex.valid) { @@ -82,14 +82,14 @@ } if (!forceUpdate - && this._lastTextureID === this.texture._updateID) + && this._lastTextureID === tex._updateID) { return; } - this._lastTextureID = this.texture._updateID; + this._lastTextureID = tex._updateID; - const uvs = this.texture._uvs; + const uvs = tex._uvs; this.mapCoord.set(uvs.x1 - uvs.x0, uvs.y1 - uvs.y0, uvs.x3 - uvs.x0, uvs.y3 - uvs.y0, uvs.x0, uvs.y0); diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 369b181..ccce680 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -121,6 +121,8 @@ this.emit('prerender'); + const rootResolution = this.resolution; + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; @@ -207,10 +209,34 @@ displayObject.renderCanvas(this); this.context = tempContext; + this.resolution = rootResolution; + this.emit('postrender'); } /** + * Clear the canvas of renderer. + * + * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent. + */ + clear(clearColor) + { + const context = this.context; + + clearColor = clearColor || this._backgroundColorString; + + if (!this.transparent && clearColor) + { + context.fillStyle = clearColor; + context.fillRect(0, 0, this.width, this.height); + } + else + { + context.clearRect(0, 0, this.width, this.height); + } + } + + /** * Sets the blend mode of the renderer. * * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values. diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 025fef0..f6b8f31 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -479,7 +479,7 @@ */ get width() { - return Math.abs(this.scale.x) * this.texture.orig.width; + return Math.abs(this.scale.x) * this._texture.orig.width; } /** @@ -491,7 +491,7 @@ { const s = sign(this.scale.x) || 1; - this.scale.x = s * value / this.texture.orig.width; + this.scale.x = s * value / this._texture.orig.width; this._width = value; } @@ -503,7 +503,7 @@ */ get height() { - return Math.abs(this.scale.y) * this.texture.orig.height; + return Math.abs(this.scale.y) * this._texture.orig.height; } /** @@ -515,7 +515,7 @@ { const s = sign(this.scale.y) || 1; - this.scale.y = s * value / this.texture.orig.height; + this.scale.y = s * value / this._texture.orig.height; this._height = value; } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index b197e9c..3066a3a 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -517,7 +517,7 @@ */ get width() { - return this.orig ? this.orig.width : 0; + return this.orig.width; } /** @@ -527,7 +527,7 @@ */ get height() { - return this.orig ? this.orig.height : 0; + return this.orig.height; } } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 56b3819..94e18de 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -37,22 +37,20 @@ super(); /** - * The width of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the width of the overall text * * @member {number} - * @readonly + * @private */ - this.textWidth = 0; + this._textWidth = 0; /** - * The height of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the height of the overall text * * @member {number} - * @readonly + * @private */ - this.textHeight = 0; + this._textHeight = 0; /** * Private tracker for the letter sprite pool. @@ -264,16 +262,16 @@ this.removeChild(this._glyphs[i]); } - this.textWidth = maxLineWidth * scale; - this.textHeight = (pos.y + data.lineHeight) * scale; + this._textWidth = maxLineWidth * scale; + this._textHeight = (pos.y + data.lineHeight) * scale; // apply anchor if (this.anchor.x !== 0 || this.anchor.y !== 0) { for (let i = 0; i < lenChars; i++) { - this._glyphs[i].x -= this.textWidth * this.anchor.x; - this._glyphs[i].y -= this.textHeight * this.anchor.y; + this._glyphs[i].x -= this._textWidth * this.anchor.x; + this._glyphs[i].y -= this._textHeight * this.anchor.y; } } this.maxLineHeight = maxLineHeight * scale; @@ -459,6 +457,36 @@ this._text = value; this.dirty = true; } + + /** + * The width of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textWidth() + { + this.validate(); + + return this._textWidth; + } + + /** + * The height of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textHeight() + { + this.validate(); + + return this._textHeight; + } } BitmapText.fonts = {}; diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 4f3db8a..bbc6a8e 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -74,7 +74,7 @@ */ update(forceUpdate) { - const tex = this.texture; + const tex = this._texture; if (!tex || !tex.valid) { @@ -82,14 +82,14 @@ } if (!forceUpdate - && this._lastTextureID === this.texture._updateID) + && this._lastTextureID === tex._updateID) { return; } - this._lastTextureID = this.texture._updateID; + this._lastTextureID = tex._updateID; - const uvs = this.texture._uvs; + const uvs = tex._uvs; this.mapCoord.set(uvs.x1 - uvs.x0, uvs.y1 - uvs.y0, uvs.x3 - uvs.x0, uvs.y3 - uvs.y0, uvs.x0, uvs.y0); diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 05f6628..b18cd35 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,6 +15,7 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. + * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -53,7 +54,7 @@ this.autoPreventDefault = options.autoPreventDefault !== undefined ? options.autoPreventDefault : true; /** - * As this frequency increases the interaction events will be checked more often. + * Frequency in milliseconds that the mousemove, moveover & mouseout interaction events will be checked. * * @member {number} * @default 10 @@ -105,7 +106,7 @@ this.interactionDOMElement = null; /** - * This property determines if mousemove and touchmove events are fired only when the cursror + * This property determines if mousemove and touchmove events are fired only when the cursor * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 369b181..ccce680 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -121,6 +121,8 @@ this.emit('prerender'); + const rootResolution = this.resolution; + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; @@ -207,10 +209,34 @@ displayObject.renderCanvas(this); this.context = tempContext; + this.resolution = rootResolution; + this.emit('postrender'); } /** + * Clear the canvas of renderer. + * + * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent. + */ + clear(clearColor) + { + const context = this.context; + + clearColor = clearColor || this._backgroundColorString; + + if (!this.transparent && clearColor) + { + context.fillStyle = clearColor; + context.fillRect(0, 0, this.width, this.height); + } + else + { + context.clearRect(0, 0, this.width, this.height); + } + } + + /** * Sets the blend mode of the renderer. * * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values. diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 025fef0..f6b8f31 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -479,7 +479,7 @@ */ get width() { - return Math.abs(this.scale.x) * this.texture.orig.width; + return Math.abs(this.scale.x) * this._texture.orig.width; } /** @@ -491,7 +491,7 @@ { const s = sign(this.scale.x) || 1; - this.scale.x = s * value / this.texture.orig.width; + this.scale.x = s * value / this._texture.orig.width; this._width = value; } @@ -503,7 +503,7 @@ */ get height() { - return Math.abs(this.scale.y) * this.texture.orig.height; + return Math.abs(this.scale.y) * this._texture.orig.height; } /** @@ -515,7 +515,7 @@ { const s = sign(this.scale.y) || 1; - this.scale.y = s * value / this.texture.orig.height; + this.scale.y = s * value / this._texture.orig.height; this._height = value; } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index b197e9c..3066a3a 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -517,7 +517,7 @@ */ get width() { - return this.orig ? this.orig.width : 0; + return this.orig.width; } /** @@ -527,7 +527,7 @@ */ get height() { - return this.orig ? this.orig.height : 0; + return this.orig.height; } } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 56b3819..94e18de 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -37,22 +37,20 @@ super(); /** - * The width of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the width of the overall text * * @member {number} - * @readonly + * @private */ - this.textWidth = 0; + this._textWidth = 0; /** - * The height of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the height of the overall text * * @member {number} - * @readonly + * @private */ - this.textHeight = 0; + this._textHeight = 0; /** * Private tracker for the letter sprite pool. @@ -264,16 +262,16 @@ this.removeChild(this._glyphs[i]); } - this.textWidth = maxLineWidth * scale; - this.textHeight = (pos.y + data.lineHeight) * scale; + this._textWidth = maxLineWidth * scale; + this._textHeight = (pos.y + data.lineHeight) * scale; // apply anchor if (this.anchor.x !== 0 || this.anchor.y !== 0) { for (let i = 0; i < lenChars; i++) { - this._glyphs[i].x -= this.textWidth * this.anchor.x; - this._glyphs[i].y -= this.textHeight * this.anchor.y; + this._glyphs[i].x -= this._textWidth * this.anchor.x; + this._glyphs[i].y -= this._textHeight * this.anchor.y; } } this.maxLineHeight = maxLineHeight * scale; @@ -459,6 +457,36 @@ this._text = value; this.dirty = true; } + + /** + * The width of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textWidth() + { + this.validate(); + + return this._textWidth; + } + + /** + * The height of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textHeight() + { + this.validate(); + + return this._textHeight; + } } BitmapText.fonts = {}; diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 4f3db8a..bbc6a8e 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -74,7 +74,7 @@ */ update(forceUpdate) { - const tex = this.texture; + const tex = this._texture; if (!tex || !tex.valid) { @@ -82,14 +82,14 @@ } if (!forceUpdate - && this._lastTextureID === this.texture._updateID) + && this._lastTextureID === tex._updateID) { return; } - this._lastTextureID = this.texture._updateID; + this._lastTextureID = tex._updateID; - const uvs = this.texture._uvs; + const uvs = tex._uvs; this.mapCoord.set(uvs.x1 - uvs.x0, uvs.y1 - uvs.y0, uvs.x3 - uvs.x0, uvs.y3 - uvs.y0, uvs.x0, uvs.y0); diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 05f6628..b18cd35 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,6 +15,7 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. + * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -53,7 +54,7 @@ this.autoPreventDefault = options.autoPreventDefault !== undefined ? options.autoPreventDefault : true; /** - * As this frequency increases the interaction events will be checked more often. + * Frequency in milliseconds that the mousemove, moveover & mouseout interaction events will be checked. * * @member {number} * @default 10 @@ -105,7 +106,7 @@ this.interactionDOMElement = null; /** - * This property determines if mousemove and touchmove events are fired only when the cursror + * This property determines if mousemove and touchmove events are fired only when the cursor * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index e6a0ed5..42048a8 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -237,7 +237,7 @@ continue; } - const frame = child.texture.frame; + const frame = child._texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -305,10 +305,10 @@ finalHeight = frame.height; } - const resolution = child.texture.baseTexture.resolution; + const resolution = child._texture.baseTexture.resolution; context.drawImage( - child.texture.baseTexture.source, + child._texture.baseTexture.source, frame.x * resolution, frame.y * resolution, frame.width * resolution, diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 369b181..ccce680 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -121,6 +121,8 @@ this.emit('prerender'); + const rootResolution = this.resolution; + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; @@ -207,10 +209,34 @@ displayObject.renderCanvas(this); this.context = tempContext; + this.resolution = rootResolution; + this.emit('postrender'); } /** + * Clear the canvas of renderer. + * + * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent. + */ + clear(clearColor) + { + const context = this.context; + + clearColor = clearColor || this._backgroundColorString; + + if (!this.transparent && clearColor) + { + context.fillStyle = clearColor; + context.fillRect(0, 0, this.width, this.height); + } + else + { + context.clearRect(0, 0, this.width, this.height); + } + } + + /** * Sets the blend mode of the renderer. * * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values. diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 025fef0..f6b8f31 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -479,7 +479,7 @@ */ get width() { - return Math.abs(this.scale.x) * this.texture.orig.width; + return Math.abs(this.scale.x) * this._texture.orig.width; } /** @@ -491,7 +491,7 @@ { const s = sign(this.scale.x) || 1; - this.scale.x = s * value / this.texture.orig.width; + this.scale.x = s * value / this._texture.orig.width; this._width = value; } @@ -503,7 +503,7 @@ */ get height() { - return Math.abs(this.scale.y) * this.texture.orig.height; + return Math.abs(this.scale.y) * this._texture.orig.height; } /** @@ -515,7 +515,7 @@ { const s = sign(this.scale.y) || 1; - this.scale.y = s * value / this.texture.orig.height; + this.scale.y = s * value / this._texture.orig.height; this._height = value; } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index b197e9c..3066a3a 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -517,7 +517,7 @@ */ get width() { - return this.orig ? this.orig.width : 0; + return this.orig.width; } /** @@ -527,7 +527,7 @@ */ get height() { - return this.orig ? this.orig.height : 0; + return this.orig.height; } } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 56b3819..94e18de 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -37,22 +37,20 @@ super(); /** - * The width of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the width of the overall text * * @member {number} - * @readonly + * @private */ - this.textWidth = 0; + this._textWidth = 0; /** - * The height of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the height of the overall text * * @member {number} - * @readonly + * @private */ - this.textHeight = 0; + this._textHeight = 0; /** * Private tracker for the letter sprite pool. @@ -264,16 +262,16 @@ this.removeChild(this._glyphs[i]); } - this.textWidth = maxLineWidth * scale; - this.textHeight = (pos.y + data.lineHeight) * scale; + this._textWidth = maxLineWidth * scale; + this._textHeight = (pos.y + data.lineHeight) * scale; // apply anchor if (this.anchor.x !== 0 || this.anchor.y !== 0) { for (let i = 0; i < lenChars; i++) { - this._glyphs[i].x -= this.textWidth * this.anchor.x; - this._glyphs[i].y -= this.textHeight * this.anchor.y; + this._glyphs[i].x -= this._textWidth * this.anchor.x; + this._glyphs[i].y -= this._textHeight * this.anchor.y; } } this.maxLineHeight = maxLineHeight * scale; @@ -459,6 +457,36 @@ this._text = value; this.dirty = true; } + + /** + * The width of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textWidth() + { + this.validate(); + + return this._textWidth; + } + + /** + * The height of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textHeight() + { + this.validate(); + + return this._textHeight; + } } BitmapText.fonts = {}; diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 4f3db8a..bbc6a8e 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -74,7 +74,7 @@ */ update(forceUpdate) { - const tex = this.texture; + const tex = this._texture; if (!tex || !tex.valid) { @@ -82,14 +82,14 @@ } if (!forceUpdate - && this._lastTextureID === this.texture._updateID) + && this._lastTextureID === tex._updateID) { return; } - this._lastTextureID = this.texture._updateID; + this._lastTextureID = tex._updateID; - const uvs = this.texture._uvs; + const uvs = tex._uvs; this.mapCoord.set(uvs.x1 - uvs.x0, uvs.y1 - uvs.y0, uvs.x3 - uvs.x0, uvs.y3 - uvs.y0, uvs.x0, uvs.y0); diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 05f6628..b18cd35 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,6 +15,7 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. + * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -53,7 +54,7 @@ this.autoPreventDefault = options.autoPreventDefault !== undefined ? options.autoPreventDefault : true; /** - * As this frequency increases the interaction events will be checked more often. + * Frequency in milliseconds that the mousemove, moveover & mouseout interaction events will be checked. * * @member {number} * @default 10 @@ -105,7 +106,7 @@ this.interactionDOMElement = null; /** - * This property determines if mousemove and touchmove events are fired only when the cursror + * This property determines if mousemove and touchmove events are fired only when the cursor * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index e6a0ed5..42048a8 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -237,7 +237,7 @@ continue; } - const frame = child.texture.frame; + const frame = child._texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -305,10 +305,10 @@ finalHeight = frame.height; } - const resolution = child.texture.baseTexture.resolution; + const resolution = child._texture.baseTexture.resolution; context.drawImage( - child.texture.baseTexture.source, + child._texture.baseTexture.source, frame.x * resolution, frame.y * resolution, frame.width * resolution, diff --git a/test/interaction/InteractionManager.js b/test/interaction/InteractionManager.js index ba3ecef..47d6819 100644 --- a/test/interaction/InteractionManager.js +++ b/test/interaction/InteractionManager.js @@ -1,31 +1,17 @@ 'use strict'; +const MockPointer = require('./MockPointer'); + describe('PIXI.interaction.InteractionManager', function () { describe('onClick', function () { - function click(stage, x, y) - { - const renderer = new PIXI.CanvasRenderer(100, 100); - - renderer.sayHello = () => { /* empty */ }; - renderer.render(stage); - - renderer.plugins.interaction.mapPositionToPoint = (point) => - { - point.x = x; - point.y = y; - }; - - renderer.plugins.interaction.onMouseDown({ clientX: x, clientY: y, preventDefault: sinon.stub() }); - renderer.plugins.interaction.onMouseUp({ clientX: x, clientY: y, preventDefault: sinon.stub() }); - } - it('should call handler when inside', function () { const stage = new PIXI.Container(); const graphics = new PIXI.Graphics(); const clickSpy = sinon.spy(); + const pointer = new MockPointer(stage); stage.addChild(graphics); graphics.beginFill(0xFFFFFF); @@ -33,7 +19,7 @@ graphics.interactive = true; graphics.on('click', clickSpy); - click(stage, 10, 10); + pointer.click(10, 10); expect(clickSpy).to.have.been.calledOnce; }); @@ -43,6 +29,7 @@ const stage = new PIXI.Container(); const graphics = new PIXI.Graphics(); const clickSpy = sinon.spy(); + const pointer = new MockPointer(stage); stage.addChild(graphics); graphics.beginFill(0xFFFFFF); @@ -50,7 +37,46 @@ graphics.interactive = true; graphics.on('click', clickSpy); - click(stage, 60, 60); + pointer.click(60, 60); + + expect(clickSpy).to.not.have.been.called; + }); + }); + + describe('onTap', function () + { + it('should call handler when inside', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const clickSpy = sinon.spy(); + const pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('tap', clickSpy); + + pointer.tap(10, 10); + + expect(clickSpy).to.have.been.calledOnce; + }); + + it('should not call handler when outside', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const clickSpy = sinon.spy(); + const pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('tap', clickSpy); + + pointer.tap(60, 60); expect(clickSpy).to.not.have.been.called; }); diff --git a/scripts/jsdoc-fix.js b/scripts/jsdoc-fix.js index 3f239b3..8f6b766 100644 --- a/scripts/jsdoc-fix.js +++ b/scripts/jsdoc-fix.js @@ -7,6 +7,14 @@ const rgxGross = /(\/\*{2}[\W\w]+?\*\/)\s*export\s+default\s+class\s+([^\s]*)/g; const grossReplace = 'export default $2;\n\n$1\nclass $2'; +// JSDoc has issues with expressing member properties within a class +// this is another terrible hack to address this issue. +// See: https://github.com/jsdoc3/jsdoc/issues/1301 + +const rgxMember = /(\@member \{[^\}]+\})(\n[^\/]+\/[\b\s]+)(this\.([^\s]+))/g; +const rgxClassName = /export (default )?class (.+?)\s/; +const rgxNamespace = /\@memberof ([\.a-zA-Z0-9]+)\s/; + exports.handlers = { /** * Called before parsing a file, giving us a change to replace the source. @@ -17,6 +25,17 @@ */ beforeParse(e) { + const namespace = e.source.match(rgxNamespace); + const className = e.source.match(rgxClassName); + + // Fix members not showing up attached to class + if (namespace && className) + { + // console.log(`${namespace[1]}.${className[2]}`); + // Replaces "@member {Type}"" with "@member {Type} PIXI.ClassName#prop" + e.source = e.source.replace(rgxMember, `$1 ${namespace[1]}.${className[2]}#$4$2$3`); + } + e.source = e.source.replace(rgxGross, grossReplace); }, }; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 369b181..ccce680 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -121,6 +121,8 @@ this.emit('prerender'); + const rootResolution = this.resolution; + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; @@ -207,10 +209,34 @@ displayObject.renderCanvas(this); this.context = tempContext; + this.resolution = rootResolution; + this.emit('postrender'); } /** + * Clear the canvas of renderer. + * + * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent. + */ + clear(clearColor) + { + const context = this.context; + + clearColor = clearColor || this._backgroundColorString; + + if (!this.transparent && clearColor) + { + context.fillStyle = clearColor; + context.fillRect(0, 0, this.width, this.height); + } + else + { + context.clearRect(0, 0, this.width, this.height); + } + } + + /** * Sets the blend mode of the renderer. * * @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values. diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 025fef0..f6b8f31 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -479,7 +479,7 @@ */ get width() { - return Math.abs(this.scale.x) * this.texture.orig.width; + return Math.abs(this.scale.x) * this._texture.orig.width; } /** @@ -491,7 +491,7 @@ { const s = sign(this.scale.x) || 1; - this.scale.x = s * value / this.texture.orig.width; + this.scale.x = s * value / this._texture.orig.width; this._width = value; } @@ -503,7 +503,7 @@ */ get height() { - return Math.abs(this.scale.y) * this.texture.orig.height; + return Math.abs(this.scale.y) * this._texture.orig.height; } /** @@ -515,7 +515,7 @@ { const s = sign(this.scale.y) || 1; - this.scale.y = s * value / this.texture.orig.height; + this.scale.y = s * value / this._texture.orig.height; this._height = value; } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index b197e9c..3066a3a 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -517,7 +517,7 @@ */ get width() { - return this.orig ? this.orig.width : 0; + return this.orig.width; } /** @@ -527,7 +527,7 @@ */ get height() { - return this.orig ? this.orig.height : 0; + return this.orig.height; } } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 56b3819..94e18de 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -37,22 +37,20 @@ super(); /** - * The width of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the width of the overall text * * @member {number} - * @readonly + * @private */ - this.textWidth = 0; + this._textWidth = 0; /** - * The height of the overall text, different from fontSize, - * which is defined in the style object + * Private tracker for the height of the overall text * * @member {number} - * @readonly + * @private */ - this.textHeight = 0; + this._textHeight = 0; /** * Private tracker for the letter sprite pool. @@ -264,16 +262,16 @@ this.removeChild(this._glyphs[i]); } - this.textWidth = maxLineWidth * scale; - this.textHeight = (pos.y + data.lineHeight) * scale; + this._textWidth = maxLineWidth * scale; + this._textHeight = (pos.y + data.lineHeight) * scale; // apply anchor if (this.anchor.x !== 0 || this.anchor.y !== 0) { for (let i = 0; i < lenChars; i++) { - this._glyphs[i].x -= this.textWidth * this.anchor.x; - this._glyphs[i].y -= this.textHeight * this.anchor.y; + this._glyphs[i].x -= this._textWidth * this.anchor.x; + this._glyphs[i].y -= this._textHeight * this.anchor.y; } } this.maxLineHeight = maxLineHeight * scale; @@ -459,6 +457,36 @@ this._text = value; this.dirty = true; } + + /** + * The width of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textWidth() + { + this.validate(); + + return this._textWidth; + } + + /** + * The height of the overall text, different from fontSize, + * which is defined in the style object + * + * @member {number} + * @memberof PIXI.extras.BitmapText# + * @readonly + */ + get textHeight() + { + this.validate(); + + return this._textHeight; + } } BitmapText.fonts = {}; diff --git a/src/extras/TextureTransform.js b/src/extras/TextureTransform.js index 4f3db8a..bbc6a8e 100644 --- a/src/extras/TextureTransform.js +++ b/src/extras/TextureTransform.js @@ -74,7 +74,7 @@ */ update(forceUpdate) { - const tex = this.texture; + const tex = this._texture; if (!tex || !tex.valid) { @@ -82,14 +82,14 @@ } if (!forceUpdate - && this._lastTextureID === this.texture._updateID) + && this._lastTextureID === tex._updateID) { return; } - this._lastTextureID = this.texture._updateID; + this._lastTextureID = tex._updateID; - const uvs = this.texture._uvs; + const uvs = tex._uvs; this.mapCoord.set(uvs.x1 - uvs.x0, uvs.y1 - uvs.y0, uvs.x3 - uvs.x0, uvs.y3 - uvs.y0, uvs.x0, uvs.y0); diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 05f6628..b18cd35 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -15,6 +15,7 @@ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * if its interactive parameter is set to true * This manager also supports multitouch. + * By default, an instance of this class is automatically created, and can be found at renderer.plugins.interaction * * @class * @extends EventEmitter @@ -53,7 +54,7 @@ this.autoPreventDefault = options.autoPreventDefault !== undefined ? options.autoPreventDefault : true; /** - * As this frequency increases the interaction events will be checked more often. + * Frequency in milliseconds that the mousemove, moveover & mouseout interaction events will be checked. * * @member {number} * @default 10 @@ -105,7 +106,7 @@ this.interactionDOMElement = null; /** - * This property determines if mousemove and touchmove events are fired only when the cursror + * This property determines if mousemove and touchmove events are fired only when the cursor * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index e6a0ed5..42048a8 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -237,7 +237,7 @@ continue; } - const frame = child.texture.frame; + const frame = child._texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -305,10 +305,10 @@ finalHeight = frame.height; } - const resolution = child.texture.baseTexture.resolution; + const resolution = child._texture.baseTexture.resolution; context.drawImage( - child.texture.baseTexture.source, + child._texture.baseTexture.source, frame.x * resolution, frame.y * resolution, frame.width * resolution, diff --git a/test/interaction/InteractionManager.js b/test/interaction/InteractionManager.js index ba3ecef..47d6819 100644 --- a/test/interaction/InteractionManager.js +++ b/test/interaction/InteractionManager.js @@ -1,31 +1,17 @@ 'use strict'; +const MockPointer = require('./MockPointer'); + describe('PIXI.interaction.InteractionManager', function () { describe('onClick', function () { - function click(stage, x, y) - { - const renderer = new PIXI.CanvasRenderer(100, 100); - - renderer.sayHello = () => { /* empty */ }; - renderer.render(stage); - - renderer.plugins.interaction.mapPositionToPoint = (point) => - { - point.x = x; - point.y = y; - }; - - renderer.plugins.interaction.onMouseDown({ clientX: x, clientY: y, preventDefault: sinon.stub() }); - renderer.plugins.interaction.onMouseUp({ clientX: x, clientY: y, preventDefault: sinon.stub() }); - } - it('should call handler when inside', function () { const stage = new PIXI.Container(); const graphics = new PIXI.Graphics(); const clickSpy = sinon.spy(); + const pointer = new MockPointer(stage); stage.addChild(graphics); graphics.beginFill(0xFFFFFF); @@ -33,7 +19,7 @@ graphics.interactive = true; graphics.on('click', clickSpy); - click(stage, 10, 10); + pointer.click(10, 10); expect(clickSpy).to.have.been.calledOnce; }); @@ -43,6 +29,7 @@ const stage = new PIXI.Container(); const graphics = new PIXI.Graphics(); const clickSpy = sinon.spy(); + const pointer = new MockPointer(stage); stage.addChild(graphics); graphics.beginFill(0xFFFFFF); @@ -50,7 +37,46 @@ graphics.interactive = true; graphics.on('click', clickSpy); - click(stage, 60, 60); + pointer.click(60, 60); + + expect(clickSpy).to.not.have.been.called; + }); + }); + + describe('onTap', function () + { + it('should call handler when inside', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const clickSpy = sinon.spy(); + const pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('tap', clickSpy); + + pointer.tap(10, 10); + + expect(clickSpy).to.have.been.calledOnce; + }); + + it('should not call handler when outside', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const clickSpy = sinon.spy(); + const pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('tap', clickSpy); + + pointer.tap(60, 60); expect(clickSpy).to.not.have.been.called; }); diff --git a/test/interaction/MockPointer.js b/test/interaction/MockPointer.js new file mode 100644 index 0000000..5bac0d3 --- /dev/null +++ b/test/interaction/MockPointer.js @@ -0,0 +1,115 @@ +'use strict'; + +/** + * Use this to mock mouse/touch/pointer events + * + * @class + */ +class MockPointer { + /** + * @param {PIXI.Container} stage - The root of the scene tree + * @param {number} [width=100] - Width of the renderer + * @param {number} [height=100] - Height of the renderer + */ + constructor(stage, width, height) + { + this.stage = stage; + this.renderer = new PIXI.CanvasRenderer(width || 100, height || 100); + this.renderer.sayHello = () => { /* empty */ }; + this.interaction = this.renderer.plugins.interaction; + } + + /** + * @private + * @param {number} x - pointer x position + * @param {number} y - pointer y position + */ + setPosition(x, y) + { + this.renderer.plugins.interaction.mapPositionToPoint = (point) => + { + point.x = x; + point.y = y; + }; + } + + /** + * @private + */ + render() + { + this.renderer.render(this.stage); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + */ + click(x, y) + { + this.mousedown(x, y); + this.mouseup(x, y); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + */ + mousedown(x, y) + { + this.setPosition(x, y); + this.render(); + this.interaction.onMouseDown({ clientX: 0, clientY: 0, preventDefault: sinon.stub() }); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + */ + mouseup(x, y) + { + this.setPosition(x, y); + this.render(); + this.interaction.onMouseUp({ clientX: 0, clientY: 0, preventDefault: sinon.stub() }); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + */ + tap(x, y) + { + this.touchstart(x, y); + this.touchend(x, y); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + */ + touchstart(x, y) + { + this.setPosition(x, y); + this.render(); + this.interaction.onTouchStart({ + preventDefault: sinon.stub(), + changedTouches: [new Touch({ identifier: 0, target: this.renderer.view })], + }); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + */ + touchend(x, y) + { + this.setPosition(x, y); + this.render(); + this.interaction.onTouchEnd({ + preventDefault: sinon.stub(), + changedTouches: [new Touch({ identifier: 0, target: this.renderer.view })], + }); + } +} + +module.exports = MockPointer;