diff --git a/src/core/text/Text.js b/src/core/text/Text.js index d1ad32d..c2c4500 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -57,14 +57,13 @@ * @private */ this._style = null; - /** - * Last rendered version number of the style object. + * Private listener to track style changes. * * @member {Function} * @private */ - this._styleVersion = null; + this._styleListener = null; var texture = Texture.fromCanvas(this.canvas); texture.trim = new math.Rectangle(); @@ -93,7 +92,11 @@ width: { get: function () { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } + return this.scale.x * this._texture._frame.width; }, set: function (value) @@ -112,7 +115,11 @@ height: { get: function () { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } + return this.scale.y * this._texture._frame.height; }, set: function (value) @@ -135,6 +142,10 @@ }, set: function (style) { + if (this._style) { + this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); + } + style = style || {}; if (style instanceof TextStyle) { @@ -143,7 +154,8 @@ { this._style = new TextStyle(style); } - this._styleVersion = -1; // Force it to re-render and grab the version number. + this._style.on(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); + this.dirty = true; } }, @@ -170,36 +182,16 @@ 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 (respectDirty) +Text.prototype.updateText = function () { - if (!this.dirty && respectDirty) { // If for - return; - } var style = this._style; this.context.font = style.font; @@ -352,7 +344,6 @@ texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; - this._styleVersion = this._style.version; }; /** @@ -362,7 +353,12 @@ */ Text.prototype.renderWebGL = function (renderer) { - this.updateText(true); + if (this.dirty) + { + //this.resolution = 1//renderer.resolution; + + this.updateText(); + } Sprite.prototype.renderWebGL.call(this, renderer); }; @@ -375,7 +371,10 @@ */ Text.prototype._renderCanvas = function (renderer) { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } Sprite.prototype._renderCanvas.call(this, renderer); }; @@ -538,12 +537,23 @@ */ Text.prototype.getBounds = function (matrix) { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } 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 @@ -553,6 +563,8 @@ // 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 d1ad32d..c2c4500 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -57,14 +57,13 @@ * @private */ this._style = null; - /** - * Last rendered version number of the style object. + * Private listener to track style changes. * * @member {Function} * @private */ - this._styleVersion = null; + this._styleListener = null; var texture = Texture.fromCanvas(this.canvas); texture.trim = new math.Rectangle(); @@ -93,7 +92,11 @@ width: { get: function () { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } + return this.scale.x * this._texture._frame.width; }, set: function (value) @@ -112,7 +115,11 @@ height: { get: function () { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } + return this.scale.y * this._texture._frame.height; }, set: function (value) @@ -135,6 +142,10 @@ }, set: function (style) { + if (this._style) { + this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); + } + style = style || {}; if (style instanceof TextStyle) { @@ -143,7 +154,8 @@ { this._style = new TextStyle(style); } - this._styleVersion = -1; // Force it to re-render and grab the version number. + this._style.on(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); + this.dirty = true; } }, @@ -170,36 +182,16 @@ 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 (respectDirty) +Text.prototype.updateText = function () { - if (!this.dirty && respectDirty) { // If for - return; - } var style = this._style; this.context.font = style.font; @@ -352,7 +344,6 @@ texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; - this._styleVersion = this._style.version; }; /** @@ -362,7 +353,12 @@ */ Text.prototype.renderWebGL = function (renderer) { - this.updateText(true); + if (this.dirty) + { + //this.resolution = 1//renderer.resolution; + + this.updateText(); + } Sprite.prototype.renderWebGL.call(this, renderer); }; @@ -375,7 +371,10 @@ */ Text.prototype._renderCanvas = function (renderer) { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } Sprite.prototype._renderCanvas.call(this, renderer); }; @@ -538,12 +537,23 @@ */ Text.prototype.getBounds = function (matrix) { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } 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 @@ -553,6 +563,8 @@ // 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 146138c..76951ba 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -1,10 +1,13 @@ -var utils = require('../utils'); +var EventEmitter = require('eventemitter3'), + CONST = require('../const'), + 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 @@ -30,10 +33,11 @@ */ 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; @@ -96,7 +100,7 @@ if (this._font !== font) { this._font = font; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -110,7 +114,7 @@ if (this._fill !== outputColor) { this._fill = outputColor; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -123,7 +127,7 @@ if (this._align !== align) { this._align = align; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -137,7 +141,7 @@ if (this._stroke !== outputColor) { this._stroke = outputColor; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -150,7 +154,7 @@ if (this._strokeThickness !== strokeThickness) { this._strokeThickness = strokeThickness; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -163,7 +167,7 @@ if (this._wordWrap !== wordWrap) { this._wordWrap = wordWrap; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -176,7 +180,7 @@ if (this._wordWrapWidth !== wordWrapWidth) { this._wordWrapWidth = wordWrapWidth; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -189,7 +193,7 @@ if (this._dropShadow !== dropShadow) { this._dropShadow = dropShadow; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -203,7 +207,7 @@ if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -216,7 +220,7 @@ if (this._dropShadowAngle !== dropShadowAngle) { this._dropShadowAngle = dropShadowAngle; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -229,7 +233,7 @@ if (this._dropShadowDistance !== dropShadowDistance) { this._dropShadowDistance = dropShadowDistance; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -242,7 +246,7 @@ if (this._dropShadowBlur !== dropShadowBlur) { this._dropShadowBlur = dropShadowBlur; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -255,7 +259,7 @@ if (this._padding !== padding) { this._padding = padding; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -268,7 +272,7 @@ if (this._textBaseline !== textBaseline) { this._textBaseline = textBaseline; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -281,7 +285,7 @@ if (this._lineJoin !== lineJoin) { this._lineJoin = lineJoin; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -294,7 +298,7 @@ if (this._lineHeight !== lineHeight) { this._lineHeight = lineHeight; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }, @@ -307,7 +311,7 @@ if (this._miterLimit !== miterLimit) { this._miterLimit = miterLimit; - this.version += 1; + this.emit(CONST.TEXT_STYLE_CHANGED); } } }