PropertyHandler.html 15 KB

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