diff --git a/src/core/text/Text.js b/src/core/text/Text.js index c2c4500..d1ad32d 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -57,13 +57,14 @@ * @private */ this._style = null; + /** - * Private listener to track style changes. + * Last rendered version number of the style object. * * @member {Function} * @private */ - this._styleListener = null; + this._styleVersion = null; var texture = Texture.fromCanvas(this.canvas); texture.trim = new math.Rectangle(); @@ -92,11 +93,7 @@ width: { get: function () { - if (this.dirty) - { - this.updateText(); - } - + this.updateText(true); return this.scale.x * this._texture._frame.width; }, set: function (value) @@ -115,11 +112,7 @@ height: { get: function () { - if (this.dirty) - { - this.updateText(); - } - + this.updateText(true); return this.scale.y * this._texture._frame.height; }, set: function (value) @@ -142,10 +135,6 @@ }, set: function (style) { - if (this._style) { - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); - } - style = style || {}; if (style instanceof TextStyle) { @@ -154,8 +143,7 @@ { this._style = new TextStyle(style); } - this._style.on(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); - this.dirty = true; + this._styleVersion = -1; // Force it to re-render and grab the version number. } }, @@ -182,16 +170,36 @@ this._text = text; this.dirty = true; } + }, + + /** + * Indicates whether the text should be re-rendered. Takes into account style changes. + * + * @param dirty {boolean} Whether the text should be rerendered + * @memberof PIXI.Text# + */ + dirty: { + get: function() { + return this._dirty || this._styleVersion !== this.style.version; + }, + set: function (dirty) { + this._dirty = dirty; + } } + }); /** * Renders text and updates it when needed * + * @param [respectDirty=true] {boolean} Whether to ignore the dirty indicator and force a re-render. * @private */ -Text.prototype.updateText = function () +Text.prototype.updateText = function (respectDirty) { + if (!this.dirty && respectDirty) { // If for + return; + } var style = this._style; this.context.font = style.font; @@ -344,6 +352,7 @@ texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; + this._styleVersion = this._style.version; }; /** @@ -353,12 +362,7 @@ */ Text.prototype.renderWebGL = function (renderer) { - if (this.dirty) - { - //this.resolution = 1//renderer.resolution; - - this.updateText(); - } + this.updateText(true); Sprite.prototype.renderWebGL.call(this, renderer); }; @@ -371,10 +375,7 @@ */ Text.prototype._renderCanvas = function (renderer) { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); Sprite.prototype._renderCanvas.call(this, renderer); }; @@ -537,23 +538,12 @@ */ Text.prototype.getBounds = function (matrix) { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); return Sprite.prototype.getBounds.call(this, matrix); }; /** - * Method to be called upon a TextStyle change. - */ -Text.prototype._onStyleChange = function () -{ - this.dirty = true; -}; - -/** * Destroys this text object. * * @param [destroyBaseTexture=true] {boolean} whether to destroy the base texture as well @@ -563,8 +553,6 @@ // make sure to reset the the context and canvas.. dont want this hanging around in memory! this.context = null; this.canvas = null; - - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); this._style = null; this._texture.destroy(destroyBaseTexture === undefined ? true : destroyBaseTexture); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index c2c4500..d1ad32d 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -57,13 +57,14 @@ * @private */ this._style = null; + /** - * Private listener to track style changes. + * Last rendered version number of the style object. * * @member {Function} * @private */ - this._styleListener = null; + this._styleVersion = null; var texture = Texture.fromCanvas(this.canvas); texture.trim = new math.Rectangle(); @@ -92,11 +93,7 @@ width: { get: function () { - if (this.dirty) - { - this.updateText(); - } - + this.updateText(true); return this.scale.x * this._texture._frame.width; }, set: function (value) @@ -115,11 +112,7 @@ height: { get: function () { - if (this.dirty) - { - this.updateText(); - } - + this.updateText(true); return this.scale.y * this._texture._frame.height; }, set: function (value) @@ -142,10 +135,6 @@ }, set: function (style) { - if (this._style) { - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); - } - style = style || {}; if (style instanceof TextStyle) { @@ -154,8 +143,7 @@ { this._style = new TextStyle(style); } - this._style.on(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); - this.dirty = true; + this._styleVersion = -1; // Force it to re-render and grab the version number. } }, @@ -182,16 +170,36 @@ this._text = text; this.dirty = true; } + }, + + /** + * Indicates whether the text should be re-rendered. Takes into account style changes. + * + * @param dirty {boolean} Whether the text should be rerendered + * @memberof PIXI.Text# + */ + dirty: { + get: function() { + return this._dirty || this._styleVersion !== this.style.version; + }, + set: function (dirty) { + this._dirty = dirty; + } } + }); /** * Renders text and updates it when needed * + * @param [respectDirty=true] {boolean} Whether to ignore the dirty indicator and force a re-render. * @private */ -Text.prototype.updateText = function () +Text.prototype.updateText = function (respectDirty) { + if (!this.dirty && respectDirty) { // If for + return; + } var style = this._style; this.context.font = style.font; @@ -344,6 +352,7 @@ texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; + this._styleVersion = this._style.version; }; /** @@ -353,12 +362,7 @@ */ Text.prototype.renderWebGL = function (renderer) { - if (this.dirty) - { - //this.resolution = 1//renderer.resolution; - - this.updateText(); - } + this.updateText(true); Sprite.prototype.renderWebGL.call(this, renderer); }; @@ -371,10 +375,7 @@ */ Text.prototype._renderCanvas = function (renderer) { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); Sprite.prototype._renderCanvas.call(this, renderer); }; @@ -537,23 +538,12 @@ */ Text.prototype.getBounds = function (matrix) { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); return Sprite.prototype.getBounds.call(this, matrix); }; /** - * Method to be called upon a TextStyle change. - */ -Text.prototype._onStyleChange = function () -{ - this.dirty = true; -}; - -/** * Destroys this text object. * * @param [destroyBaseTexture=true] {boolean} whether to destroy the base texture as well @@ -563,8 +553,6 @@ // make sure to reset the the context and canvas.. dont want this hanging around in memory! this.context = null; this.canvas = null; - - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); this._style = null; this._texture.destroy(destroyBaseTexture === undefined ? true : destroyBaseTexture); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 76951ba..146138c 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -1,13 +1,10 @@ -var EventEmitter = require('eventemitter3'), - CONST = require('../const'), - utils = require('../utils'); +var utils = require('../utils'); /** * A TextStyle Object decorates a Text Object. It acts as an event emitter, and can be shared between * multiple Text objects. * * @class - * @extends EventEmitter * @memberof PIXI * @param [style] {object} The style parameters * @param [style.font='bold 20pt Arial'] {string} The style and size of the font @@ -33,11 +30,10 @@ */ function TextStyle(style) { - EventEmitter.call(this); Object.assign(this, this._defaults, style); + this.version = 0; } -TextStyle.prototype = Object.create(EventEmitter.prototype); TextStyle.prototype.constructor = TextStyle; module.exports = TextStyle; @@ -100,7 +96,7 @@ if (this._font !== font) { this._font = font; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -114,7 +110,7 @@ if (this._fill !== outputColor) { this._fill = outputColor; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -127,7 +123,7 @@ if (this._align !== align) { this._align = align; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -141,7 +137,7 @@ if (this._stroke !== outputColor) { this._stroke = outputColor; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -154,7 +150,7 @@ if (this._strokeThickness !== strokeThickness) { this._strokeThickness = strokeThickness; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -167,7 +163,7 @@ if (this._wordWrap !== wordWrap) { this._wordWrap = wordWrap; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -180,7 +176,7 @@ if (this._wordWrapWidth !== wordWrapWidth) { this._wordWrapWidth = wordWrapWidth; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -193,7 +189,7 @@ if (this._dropShadow !== dropShadow) { this._dropShadow = dropShadow; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -207,7 +203,7 @@ if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -220,7 +216,7 @@ if (this._dropShadowAngle !== dropShadowAngle) { this._dropShadowAngle = dropShadowAngle; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -233,7 +229,7 @@ if (this._dropShadowDistance !== dropShadowDistance) { this._dropShadowDistance = dropShadowDistance; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -246,7 +242,7 @@ if (this._dropShadowBlur !== dropShadowBlur) { this._dropShadowBlur = dropShadowBlur; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -259,7 +255,7 @@ if (this._padding !== padding) { this._padding = padding; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -272,7 +268,7 @@ if (this._textBaseline !== textBaseline) { this._textBaseline = textBaseline; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -285,7 +281,7 @@ if (this._lineJoin !== lineJoin) { this._lineJoin = lineJoin; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -298,7 +294,7 @@ if (this._lineHeight !== lineHeight) { this._lineHeight = lineHeight; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }, @@ -311,7 +307,7 @@ if (this._miterLimit !== miterLimit) { this._miterLimit = miterLimit; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.version += 1; } } }