X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..6746dc89c47ed01b165cc1152533605f97eb8e8d:/src/util/TextMetrics.js?ds=inline diff --git a/src/util/TextMetrics.js b/src/util/TextMetrics.js index 95cb83b3..43edc82b 100644 --- a/src/util/TextMetrics.js +++ b/src/util/TextMetrics.js @@ -1,19 +1,32 @@ -/*! - * Ext JS Library 3.1.0 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ +/* + +This file is part of Ext JS 4 + +Copyright (c) 2011 Sencha Inc + +Contact: http://www.sencha.com/contact + +GNU General Public License Usage +This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. + +If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. + +*/ /** - * @class Ext.util.TextMetrics * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and * wide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and * should not contain any HTML, otherwise it may not be measured correctly. - * @singleton + * + * The measurement works by copying the relevant CSS styles that can affect the font related display, + * then checking the size of an element that is auto-sized. Note that if the text is multi-lined, you must + * provide a **fixed width** when doing the measurement. + * + * If multiple measurements are being done on the same element, you create a new instance to initialize + * to avoid the overhead of copying the styles to the element repeatedly. */ -Ext.util.TextMetrics = function(){ - var shared; - return { +Ext.define('Ext.util.TextMetrics', { + statics: { + shared: null, /** * Measures the size of the specified text * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles @@ -21,116 +34,128 @@ Ext.util.TextMetrics = function(){ * @param {String} text The text to measure * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width * in order to accurately measure the text height - * @return {Object} An object containing the text's size {width: (width), height: (height)} + * @return {Object} An object containing the text's size `{width: (width), height: (height)}` */ - measure : function(el, text, fixedWidth){ + measure: function(el, text, fixedWidth){ + var me = this, + shared = me.shared; + if(!shared){ - shared = Ext.util.TextMetrics.Instance(el, fixedWidth); + shared = me.shared = new me(el, fixedWidth); } shared.bind(el); shared.setFixedWidth(fixedWidth || 'auto'); return shared.getSize(text); }, - + /** - * Return a unique TextMetrics instance that can be bound directly to an element and reused. This reduces - * the overhead of multiple calls to initialize the style properties on each measurement. - * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to - * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width - * in order to accurately measure the text height - * @return {Ext.util.TextMetrics.Instance} instance The new instance - */ - createInstance : function(el, fixedWidth){ - return Ext.util.TextMetrics.Instance(el, fixedWidth); - } - }; -}(); - -Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){ - var ml = new Ext.Element(document.createElement('div')); - document.body.appendChild(ml.dom); - ml.position('absolute'); - ml.setLeftTop(-1000, -1000); - ml.hide(); - - if(fixedWidth){ - ml.setWidth(fixedWidth); - } - - var instance = { - /** - *

Only available on the instance returned from {@link #createInstance}, not on the singleton.

- * Returns the size of the specified text based on the internal element's style and width properties - * @param {String} text The text to measure - * @return {Object} An object containing the text's size {width: (width), height: (height)} - */ - getSize : function(text){ - ml.update(text); - var s = ml.getSize(); - ml.update(''); - return s; - }, - - /** - *

Only available on the instance returned from {@link #createInstance}, not on the singleton.

- * Binds this TextMetrics instance to an element from which to copy existing CSS styles - * that can affect the size of the rendered text - * @param {String/HTMLElement} el The element, dom node or id - */ - bind : function(el){ - ml.setStyle( - Ext.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing') - ); - }, - - /** - *

Only available on the instance returned from {@link #createInstance}, not on the singleton.

- * Sets a fixed width on the internal measurement element. If the text will be multiline, you have - * to set a fixed width in order to accurately measure the text height. - * @param {Number} width The width to set on the element - */ - setFixedWidth : function(width){ - ml.setWidth(width); - }, - - /** - *

Only available on the instance returned from {@link #createInstance}, not on the singleton.

- * Returns the measured width of the specified text - * @param {String} text The text to measure - * @return {Number} width The width in pixels - */ - getWidth : function(text){ - ml.dom.style.width = 'auto'; - return this.getSize(text).width; - }, + * Destroy the TextMetrics instance created by {@link #measure}. + */ + destroy: function(){ + var me = this; + Ext.destroy(me.shared); + me.shared = null; + } + }, + + /** + * Creates new TextMetrics. + * @param {Mixed} bindTo The element to bind to. + * @param {Number} fixedWidth (optional) A fixed width to apply to the measuring element. + */ + constructor: function(bindTo, fixedWidth){ + var measure = this.measure = Ext.getBody().createChild({ + cls: 'x-textmetrics' + }); + this.el = Ext.get(bindTo); + + measure.position('absolute'); + measure.setLeftTop(-1000, -1000); + measure.hide(); - /** - *

Only available on the instance returned from {@link #createInstance}, not on the singleton.

- * Returns the measured height of the specified text. For multiline text, be sure to call - * {@link #setFixedWidth} if necessary. - * @param {String} text The text to measure - * @return {Number} height The height in pixels - */ - getHeight : function(text){ - return this.getSize(text).height; + if (fixedWidth) { + measure.setWidth(fixedWidth); } - }; - - instance.bind(bindTo); - - return instance; -}; - -Ext.Element.addMethods({ + }, + + /** + * Returns the size of the specified text based on the internal element's style and width properties + * @param {String} text The text to measure + * @return {Object} An object containing the text's size `{width: (width), height: (height)}` + */ + getSize: function(text){ + var measure = this.measure, + size; + + measure.update(text); + size = measure.getSize(); + measure.update(''); + return size; + }, + /** - * Returns the width in pixels of the passed text, or the width of the text in this Element. - * @param {String} text The text to measure. Defaults to the innerHTML of the element. - * @param {Number} min (Optional) The minumum value to return. - * @param {Number} max (Optional) The maximum value to return. - * @return {Number} The text width in pixels. - * @member Ext.Element getTextWidth + * Binds this TextMetrics instance to a new element + * @param {Mixed} el The element */ - getTextWidth : function(text, min, max){ - return (Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width).constrain(min || 0, max || 1000000); - } + bind: function(el){ + var me = this; + + me.el = Ext.get(el); + me.measure.setStyle( + me.el.getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing') + ); + }, + + /** + * Sets a fixed width on the internal measurement element. If the text will be multiline, you have + * to set a fixed width in order to accurately measure the text height. + * @param {Number} width The width to set on the element + */ + setFixedWidth : function(width){ + this.measure.setWidth(width); + }, + + /** + * Returns the measured width of the specified text + * @param {String} text The text to measure + * @return {Number} width The width in pixels + */ + getWidth : function(text){ + this.measure.dom.style.width = 'auto'; + return this.getSize(text).width; + }, + + /** + * Returns the measured height of the specified text + * @param {String} text The text to measure + * @return {Number} height The height in pixels + */ + getHeight : function(text){ + return this.getSize(text).height; + }, + + /** + * Destroy this instance + */ + destroy: function(){ + var me = this; + me.measure.remove(); + delete me.el; + delete me.measure; + } +}, function(){ + Ext.core.Element.addMethods({ + /** + * Returns the width in pixels of the passed text, or the width of the text in this Element. + * @param {String} text The text to measure. Defaults to the innerHTML of the element. + * @param {Number} min (optional) The minumum value to return. + * @param {Number} max (optional) The maximum value to return. + * @return {Number} The text width in pixels. + * @member Ext.core.Element + */ + getTextWidth : function(text, min, max){ + return Ext.Number.constrain(Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width, min || 0, max || 1000000); + } + }); }); +