JAVASCRIPT 33
Text.js Guest on 22nd April 2021 01:18:00 AM
  1. /**
  2.  * This class encapsulates a drawn text item as rendered by the Ext.draw package within a Component which can be
  3.  * then used anywhere in an ExtJS application just like any other Component.
  4.  *
  5.  * ## Example usage
  6.  *
  7.  *     @example
  8.  *     Ext.create('Ext.panel.Panel', {
  9.  *         title: 'Panel with VerticalTextItem',
  10.  *         width: 300,
  11.  *         height: 200,
  12.  *         lbar: {
  13.  *             layout: {
  14.  *                 align: 'center'
  15.  *             },
  16.  *             items: [{
  17.  *                 xtype: 'text',
  18.  *                 text: 'Sample VerticalTextItem',
  19.  *                 degrees: 90
  20.  *             }]
  21.  *         },
  22.  *         renderTo: Ext.getBody()
  23.  *     });
  24.  *
  25.  * @constructor
  26.  * Creates a new Text Component
  27.  * @param {Object} text A config object containing a `text` property, a `degrees` property,
  28.  * and, optionally, a `styleSelector` property which specifies a selector which provides CSS rules to
  29.  * give font family, size and color to the drawn text.
  30.  */
  31. Ext.define('Ext.draw.Text', {
  32.     extend: 'Ext.draw.Component',
  33.     uses: ['Ext.util.CSS'],
  34.     alias: 'widget.text',
  35.  
  36.     /**
  37.      * @cfg {String} text
  38.      * The text to display (html tags are <b>not</b> accepted)
  39.      */
  40.     text: '',
  41.  
  42.     /**
  43.      * @cfg {String} styleSelector
  44.      * A CSS selector string which matches a style rule in the document stylesheet from which
  45.      * the text's font properties are read.
  46.      *
  47.      * **Drawn** text is not styled by CSS, but by properties set during its construction, so these styles
  48.      * must be programatically read from a stylesheet rule found via a selector at construction time.
  49.      */
  50.  
  51.     /**
  52.      * @cfg {Number} degrees
  53.      * The angle by which to initially rotate the text clockwise. Defaults to zero.
  54.      */
  55.  
  56.     focusable: false,
  57.     viewBox: false,
  58.     autoSize: true,
  59.     baseCls: Ext.baseCSSPrefix + 'surface ' + Ext.baseCSSPrefix + 'draw-text',
  60.  
  61.     initComponent: function() {
  62.         var me = this;
  63.  
  64.         me.textConfig = Ext.apply({
  65.             type: 'text',
  66.             text: me.text,
  67.             rotate: {
  68.                 degrees: me.degrees || 0
  69.             }
  70.         }, me.textStyle);
  71.         Ext.apply(me.textConfig, me.getStyles(me.styleSelectors || me.styleSelector));
  72.  
  73.         // Surface is created from the *initialConfig*, not the current object state,
  74.         // So the generated items must go into the initialConfig
  75.         me.initialConfig.items = [me.textConfig];
  76.         me.callParent(arguments);
  77.     },
  78.  
  79.     /**
  80.      * @private
  81.      * Accumulates a style object based upon the styles specified in document stylesheets
  82.      * by an array of CSS selectors
  83.      */
  84.     getStyles: function(selectors) {
  85.         selectors = Ext.Array.from(selectors);
  86.         var i = 0,
  87.             len = selectors.length,
  88.             rule,
  89.             style,
  90.             prop,
  91.             result = {};
  92.  
  93.         for (; i < len; i++) {
  94.             // Get the style rule which exactly matches the selector.
  95.             rule = Ext.util.CSS.getRule(selectors[i]);
  96.             if (rule) {
  97.                 style = rule.style;
  98.                 if (style) {
  99.                     Ext.apply(result, {
  100.                         'font-family': style.fontFamily,
  101.                         'font-weight': style.fontWeight,
  102.                         'line-height': style.lineHeight,
  103.                         'font-size': style.fontSize,
  104.                         fill: style.color
  105.                     });
  106.                 }
  107.             }
  108.         }
  109.         return result;
  110.     },
  111.  
  112.     /**
  113.      * Sets the clockwise rotation angle relative to the horizontal axis.
  114.      * @param {Number} degrees The clockwise angle (in degrees) from the horizontal axis
  115.      * by which the text should be rotated.
  116.      */
  117.     setAngle: function(degrees) {
  118.         var me = this,
  119.             surface,
  120.             sprite;
  121.            
  122.         if (me.rendered) {
  123.             surface = me.surface;
  124.             sprite = surface.items.items[0];
  125.  
  126.             me.degrees = degrees;
  127.             sprite.setAttributes({
  128.                 rotate: {
  129.                     degrees: degrees
  130.                 }
  131.             }, true);
  132.             if (me.autoSize || me.viewBox) {
  133.                 me.updateLayout();
  134.             }
  135.         } else {
  136.             me.degrees = degrees;
  137.         }
  138.     },
  139.  
  140.     /**
  141.      * Updates this item's text.
  142.      * @param {String} t The text to display (html **not** accepted).
  143.      */
  144.     setText: function(text) {
  145.         var me = this,
  146.             surface,
  147.             sprite;
  148.            
  149.         if (me.rendered) {
  150.             surface = me.surface;
  151.             sprite = surface.items.items[0];
  152.  
  153.             me.text = text || '';
  154.             surface.remove(sprite);
  155.             me.textConfig.type = 'text';
  156.             me.textConfig.text = me.text;
  157.             sprite = surface.add(me.textConfig);
  158.             sprite.setAttributes({
  159.                 rotate: {
  160.                     degrees: me.degrees
  161.                 }
  162.             }, true);
  163.             if (me.autoSize || me.viewBox) {
  164.                 me.updateLayout();
  165.             }
  166.         } else {
  167.             me.on({
  168.                 render: function() {
  169.                     me.setText(text);
  170.                 },
  171.                 single: true
  172.             });
  173.         }
  174.     }
  175. });

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.