docs/source/PropertyHandler.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-fx-PropertyHandler'>/**
  19 </span> * @class Ext.fx.PropertyHandler
  20  * @ignore
  21  */
  22 Ext.define('Ext.fx.PropertyHandler', {
  23
  24     /* Begin Definitions */
  25
  26     requires: ['Ext.draw.Draw'],
  27
  28     statics: {
  29         defaultHandler: {
  30             pixelDefaultsRE: /width|height|top$|bottom$|left$|right$/i,
  31             unitRE: /^(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)*$/,
  32             scrollRE: /^scroll/i,
  33
  34             computeDelta: function(from, end, damper, initial, attr) {
  35                 damper = (typeof damper == 'number') ? damper : 1;
  36                 var unitRE = this.unitRE,
  37                     match = unitRE.exec(from),
  38                     start, units;
  39                 if (match) {
  40                     from = match[1];
  41                     units = match[2];
  42                     if (!this.scrollRE.test(attr) &amp;&amp; !units &amp;&amp; this.pixelDefaultsRE.test(attr)) {
  43                         units = 'px';
  44                     }
  45                 }
  46                 from = +from || 0;
  47
  48                 match = unitRE.exec(end);
  49                 if (match) {
  50                     end = match[1];
  51                     units = match[2] || units;
  52                 }
  53                 end = +end || 0;
  54                 start = (initial != null) ? initial : from;
  55                 return {
  56                     from: from,
  57                     delta: (end - start) * damper,
  58                     units: units
  59                 };
  60             },
  61
  62             get: function(from, end, damper, initialFrom, attr) {
  63                 var ln = from.length,
  64                     out = [],
  65                     i, initial, res, j, len;
  66                 for (i = 0; i &lt; ln; i++) {
  67                     if (initialFrom) {
  68                         initial = initialFrom[i][1].from;
  69                     }
  70                     if (Ext.isArray(from[i][1]) &amp;&amp; Ext.isArray(end)) {
  71                         res = [];
  72                         j = 0;
  73                         len = from[i][1].length;
  74                         for (; j &lt; len; j++) {
  75                             res.push(this.computeDelta(from[i][1][j], end[j], damper, initial, attr));
  76                         }
  77                         out.push([from[i][0], res]);
  78                     }
  79                     else {
  80                         out.push([from[i][0], this.computeDelta(from[i][1], end, damper, initial, attr)]);
  81                     }
  82                 }
  83                 return out;
  84             },
  85
  86             set: function(values, easing) {
  87                 var ln = values.length,
  88                     out = [],
  89                     i, val, res, len, j;
  90                 for (i = 0; i &lt; ln; i++) {
  91                     val  = values[i][1];
  92                     if (Ext.isArray(val)) {
  93                         res = [];
  94                         j = 0;
  95                         len = val.length;
  96                         for (; j &lt; len; j++) {
  97                             res.push(val[j].from + (val[j].delta * easing) + (val[j].units || 0));
  98                         }
  99                         out.push([values[i][0], res]);
 100                     } else {
 101                         out.push([values[i][0], val.from + (val.delta * easing) + (val.units || 0)]);
 102                     }
 103                 }
 104                 return out;
 105             }
 106         },
 107         color: {
 108             rgbRE: /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i,
 109             hexRE: /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
 110             hex3RE: /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i,
 111
 112             parseColor : function(color, damper) {
 113                 damper = (typeof damper == 'number') ? damper : 1;
 114                 var base,
 115                     out = false,
 116                     match;
 117
 118                 Ext.each([this.hexRE, this.rgbRE, this.hex3RE], function(re, idx) {
 119                     base = (idx % 2 == 0) ? 16 : 10;
 120                     match = re.exec(color);
 121                     if (match &amp;&amp; match.length == 4) {
 122                         if (idx == 2) {
 123                             match[1] += match[1];
 124                             match[2] += match[2];
 125                             match[3] += match[3];
 126                         }
 127                         out = {
 128                             red: parseInt(match[1], base),
 129                             green: parseInt(match[2], base),
 130                             blue: parseInt(match[3], base)
 131                         };
 132                         return false;
 133                     }
 134                 });
 135                 return out || color;
 136             },
 137
 138             computeDelta: function(from, end, damper, initial) {
 139                 from = this.parseColor(from);
 140                 end = this.parseColor(end, damper);
 141                 var start = initial ? initial : from,
 142                     tfrom = typeof start,
 143                     tend = typeof end;
 144                 //Extra check for when the color string is not recognized.
 145                 if (tfrom == 'string' ||  tfrom == 'undefined'
 146                   || tend == 'string' || tend == 'undefined') {
 147                     return end || start;
 148                 }
 149                 return {
 150                     from:  from,
 151                     delta: {
 152                         red: Math.round((end.red - start.red) * damper),
 153                         green: Math.round((end.green - start.green) * damper),
 154                         blue: Math.round((end.blue - start.blue) * damper)
 155                     }
 156                 };
 157             },
 158
 159             get: function(start, end, damper, initialFrom) {
 160                 var ln = start.length,
 161                     out = [],
 162                     i, initial;
 163                 for (i = 0; i &lt; ln; i++) {
 164                     if (initialFrom) {
 165                         initial = initialFrom[i][1].from;
 166                     }
 167                     out.push([start[i][0], this.computeDelta(start[i][1], end, damper, initial)]);
 168                 }
 169                 return out;
 170             },
 171
 172             set: function(values, easing) {
 173                 var ln = values.length,
 174                     out = [],
 175                     i, val, parsedString, from, delta;
 176                 for (i = 0; i &lt; ln; i++) {
 177                     val = values[i][1];
 178                     if (val) {
 179                         from = val.from;
 180                         delta = val.delta;
 181                         //multiple checks to reformat the color if it can't recognized by computeDelta.
 182                         val = (typeof val == 'object' &amp;&amp; 'red' in val)?
 183                                 'rgb(' + val.red + ', ' + val.green + ', ' + val.blue + ')' : val;
 184                         val = (typeof val == 'object' &amp;&amp; val.length)? val[0] : val;
 185                         if (typeof val == 'undefined') {
 186                             return [];
 187                         }
 188                         parsedString = typeof val == 'string'? val :
 189                             'rgb(' + [
 190                                   (from.red + Math.round(delta.red * easing)) % 256,
 191                                   (from.green + Math.round(delta.green * easing)) % 256,
 192                                   (from.blue + Math.round(delta.blue * easing)) % 256
 193                               ].join(',') + ')';
 194                         out.push([
 195                             values[i][0],
 196                             parsedString
 197                         ]);
 198                     }
 199                 }
 200                 return out;
 201             }
 202         },
 203         object: {
 204             interpolate: function(prop, damper) {
 205                 damper = (typeof damper == 'number') ? damper : 1;
 206                 var out = {},
 207                     p;
 208                 for(p in prop) {
 209                     out[p] = parseInt(prop[p], 10) * damper;
 210                 }
 211                 return out;
 212             },
 213
 214             computeDelta: function(from, end, damper, initial) {
 215                 from = this.interpolate(from);
 216                 end = this.interpolate(end, damper);
 217                 var start = initial ? initial : from,
 218                     delta = {},
 219                     p;
 220
 221                 for(p in end) {
 222                     delta[p] = end[p] - start[p];
 223                 }
 224                 return {
 225                     from:  from,
 226                     delta: delta
 227                 };
 228             },
 229
 230             get: function(start, end, damper, initialFrom) {
 231                 var ln = start.length,
 232                     out = [],
 233                     i, initial;
 234                 for (i = 0; i &lt; ln; i++) {
 235                     if (initialFrom) {
 236                         initial = initialFrom[i][1].from;
 237                     }
 238                     out.push([start[i][0], this.computeDelta(start[i][1], end, damper, initial)]);
 239                 }
 240                 return out;
 241             },
 242
 243             set: function(values, easing) {
 244                 var ln = values.length,
 245                     out = [],
 246                     outObject = {},
 247                     i, from, delta, val, p;
 248                 for (i = 0; i &lt; ln; i++) {
 249                     val  = values[i][1];
 250                     from = val.from;
 251                     delta = val.delta;
 252                     for (p in from) {
 253                         outObject[p] = Math.round(from[p] + delta[p] * easing);
 254                     }
 255                     out.push([
 256                         values[i][0],
 257                         outObject
 258                     ]);
 259                 }
 260                 return out;
 261             }
 262         },
 263
 264         path: {
 265             computeDelta: function(from, end, damper, initial) {
 266                 damper = (typeof damper == 'number') ? damper : 1;
 267                 var start;
 268                 from = +from || 0;
 269                 end = +end || 0;
 270                 start = (initial != null) ? initial : from;
 271                 return {
 272                     from: from,
 273                     delta: (end - start) * damper
 274                 };
 275             },
 276
 277             forcePath: function(path) {
 278                 if (!Ext.isArray(path) &amp;&amp; !Ext.isArray(path[0])) {
 279                     path = Ext.draw.Draw.parsePathString(path);
 280                 }
 281                 return path;
 282             },
 283
 284             get: function(start, end, damper, initialFrom) {
 285                 var endPath = this.forcePath(end),
 286                     out = [],
 287                     startLn = start.length,
 288                     startPathLn, pointsLn, i, deltaPath, initial, j, k, path, startPath;
 289                 for (i = 0; i &lt; startLn; i++) {
 290                     startPath = this.forcePath(start[i][1]);
 291
 292                     deltaPath = Ext.draw.Draw.interpolatePaths(startPath, endPath);
 293                     startPath = deltaPath[0];
 294                     endPath = deltaPath[1];
 295
 296                     startPathLn = startPath.length;
 297                     path = [];
 298                     for (j = 0; j &lt; startPathLn; j++) {
 299                         deltaPath = [startPath[j][0]];
 300                         pointsLn = startPath[j].length;
 301                         for (k = 1; k &lt; pointsLn; k++) {
 302                             initial = initialFrom &amp;&amp; initialFrom[0][1][j][k].from;
 303                             deltaPath.push(this.computeDelta(startPath[j][k], endPath[j][k], damper, initial));
 304                         }
 305                         path.push(deltaPath);
 306                     }
 307                     out.push([start[i][0], path]);
 308                 }
 309                 return out;
 310             },
 311
 312             set: function(values, easing) {
 313                 var ln = values.length,
 314                     out = [],
 315                     i, j, k, newPath, calcPath, deltaPath, deltaPathLn, pointsLn;
 316                 for (i = 0; i &lt; ln; i++) {
 317                     deltaPath = values[i][1];
 318                     newPath = [];
 319                     deltaPathLn = deltaPath.length;
 320                     for (j = 0; j &lt; deltaPathLn; j++) {
 321                         calcPath = [deltaPath[j][0]];
 322                         pointsLn = deltaPath[j].length;
 323                         for (k = 1; k &lt; pointsLn; k++) {
 324                             calcPath.push(deltaPath[j][k].from + deltaPath[j][k].delta * easing);
 325                         }
 326                         newPath.push(calcPath.join(','));
 327                     }
 328                     out.push([values[i][0], newPath.join(',')]);
 329                 }
 330                 return out;
 331             }
 332         }
 333         /* End Definitions */
 334     }
 335 }, function() {
 336     Ext.each([
 337         'outlineColor',
 338         'backgroundColor',
 339         'borderColor',
 340         'borderTopColor',
 341         'borderRightColor',
 342         'borderBottomColor',
 343         'borderLeftColor',
 344         'fill',
 345         'stroke'
 346     ], function(prop) {
 347         this[prop] = this.color;
 348     }, this);
 349 });</pre>
 350 </body>
 351 </html>