svgtransformlist.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. /*globals $, svgedit*/
  2. /*jslint vars: true, eqeq: true*/
  3. /**
  4. * SVGTransformList
  5. *
  6. * Licensed under the MIT License
  7. *
  8. * Copyright(c) 2010 Alexis Deveria
  9. * Copyright(c) 2010 Jeff Schiller
  10. */
  11. // Dependencies:
  12. // 1) browser.js
  13. (function() {'use strict';
  14. if (!svgedit.transformlist) {
  15. svgedit.transformlist = {};
  16. }
  17. var svgroot = document.createElementNS(svgedit.NS.SVG, 'svg');
  18. // Helper function.
  19. function transformToString(xform) {
  20. var m = xform.matrix,
  21. text = '';
  22. switch(xform.type) {
  23. case 1: // MATRIX
  24. text = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')';
  25. break;
  26. case 2: // TRANSLATE
  27. text = 'translate(' + m.e + ',' + m.f + ')';
  28. break;
  29. case 3: // SCALE
  30. if (m.a == m.d) {text = 'scale(' + m.a + ')';}
  31. else {text = 'scale(' + m.a + ',' + m.d + ')';}
  32. break;
  33. case 4: // ROTATE
  34. var cx = 0, cy = 0;
  35. // this prevents divide by zero
  36. if (xform.angle != 0) {
  37. var K = 1 - m.a;
  38. cy = ( K * m.f + m.b*m.e ) / ( K*K + m.b*m.b );
  39. cx = ( m.e - m.b * cy ) / K;
  40. }
  41. text = 'rotate(' + xform.angle + ' ' + cx + ',' + cy + ')';
  42. break;
  43. }
  44. return text;
  45. }
  46. /**
  47. * Map of SVGTransformList objects.
  48. */
  49. var listMap_ = {};
  50. // **************************************************************************************
  51. // SVGTransformList implementation for Webkit
  52. // These methods do not currently raise any exceptions.
  53. // These methods also do not check that transforms are being inserted. This is basically
  54. // implementing as much of SVGTransformList that we need to get the job done.
  55. //
  56. // interface SVGEditTransformList {
  57. // attribute unsigned long numberOfItems;
  58. // void clear ( )
  59. // SVGTransform initialize ( in SVGTransform newItem )
  60. // SVGTransform getItem ( in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
  61. // SVGTransform insertItemBefore ( in SVGTransform newItem, in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
  62. // SVGTransform replaceItem ( in SVGTransform newItem, in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
  63. // SVGTransform removeItem ( in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
  64. // SVGTransform appendItem ( in SVGTransform newItem )
  65. // NOT IMPLEMENTED: SVGTransform createSVGTransformFromMatrix ( in SVGMatrix matrix );
  66. // NOT IMPLEMENTED: SVGTransform consolidate ( );
  67. // }
  68. // **************************************************************************************
  69. svgedit.transformlist.SVGTransformList = function(elem) {
  70. this._elem = elem || null;
  71. this._xforms = [];
  72. // TODO: how do we capture the undo-ability in the changed transform list?
  73. this._update = function() {
  74. var tstr = '';
  75. var concatMatrix = svgroot.createSVGMatrix();
  76. var i;
  77. for (i = 0; i < this.numberOfItems; ++i) {
  78. var xform = this._list.getItem(i);
  79. tstr += transformToString(xform) + ' ';
  80. }
  81. this._elem.setAttribute('transform', tstr);
  82. };
  83. this._list = this;
  84. this._init = function() {
  85. // Transform attribute parser
  86. var str = this._elem.getAttribute('transform');
  87. if (!str) {return;}
  88. // TODO: Add skew support in future
  89. var re = /\s*((scale|matrix|rotate|translate)\s*\(.*?\))\s*,?\s*/;
  90. var m = true;
  91. while (m) {
  92. m = str.match(re);
  93. str = str.replace(re, '');
  94. if (m && m[1]) {
  95. var x = m[1];
  96. var bits = x.split(/\s*\(/);
  97. var name = bits[0];
  98. var val_bits = bits[1].match(/\s*(.*?)\s*\)/);
  99. val_bits[1] = val_bits[1].replace(/(\d)-/g, '$1 -');
  100. var val_arr = val_bits[1].split(/[, ]+/);
  101. var letters = 'abcdef'.split('');
  102. var mtx = svgroot.createSVGMatrix();
  103. $.each(val_arr, function(i, item) {
  104. val_arr[i] = parseFloat(item);
  105. if (name == 'matrix') {
  106. mtx[letters[i]] = val_arr[i];
  107. }
  108. });
  109. var xform = svgroot.createSVGTransform();
  110. var fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1);
  111. var values = name == 'matrix' ? [mtx] : val_arr;
  112. if (name == 'scale' && values.length == 1) {
  113. values.push(values[0]);
  114. } else if (name == 'translate' && values.length == 1) {
  115. values.push(0);
  116. } else if (name == 'rotate' && values.length == 1) {
  117. values.push(0, 0);
  118. }
  119. xform[fname].apply(xform, values);
  120. this._list.appendItem(xform);
  121. }
  122. }
  123. };
  124. this._removeFromOtherLists = function(item) {
  125. if (item) {
  126. // Check if this transform is already in a transformlist, and
  127. // remove it if so.
  128. var found = false;
  129. var id;
  130. for (id in listMap_) {
  131. var tl = listMap_[id];
  132. var i, len;
  133. for (i = 0, len = tl._xforms.length; i < len; ++i) {
  134. if (tl._xforms[i] == item) {
  135. found = true;
  136. tl.removeItem(i);
  137. break;
  138. }
  139. }
  140. if (found) {
  141. break;
  142. }
  143. }
  144. }
  145. };
  146. this.numberOfItems = 0;
  147. this.clear = function() {
  148. this.numberOfItems = 0;
  149. this._xforms = [];
  150. };
  151. this.initialize = function(newItem) {
  152. this.numberOfItems = 1;
  153. this._removeFromOtherLists(newItem);
  154. this._xforms = [newItem];
  155. };
  156. this.getItem = function(index) {
  157. if (index < this.numberOfItems && index >= 0) {
  158. return this._xforms[index];
  159. }
  160. throw {code: 1}; // DOMException with code=INDEX_SIZE_ERR
  161. };
  162. this.insertItemBefore = function(newItem, index) {
  163. var retValue = null;
  164. if (index >= 0) {
  165. if (index < this.numberOfItems) {
  166. this._removeFromOtherLists(newItem);
  167. var newxforms = new Array(this.numberOfItems + 1);
  168. // TODO: use array copying and slicing
  169. var i;
  170. for (i = 0; i < index; ++i) {
  171. newxforms[i] = this._xforms[i];
  172. }
  173. newxforms[i] = newItem;
  174. var j;
  175. for (j = i+1; i < this.numberOfItems; ++j, ++i) {
  176. newxforms[j] = this._xforms[i];
  177. }
  178. this.numberOfItems++;
  179. this._xforms = newxforms;
  180. retValue = newItem;
  181. this._list._update();
  182. }
  183. else {
  184. retValue = this._list.appendItem(newItem);
  185. }
  186. }
  187. return retValue;
  188. };
  189. this.replaceItem = function(newItem, index) {
  190. var retValue = null;
  191. if (index < this.numberOfItems && index >= 0) {
  192. this._removeFromOtherLists(newItem);
  193. this._xforms[index] = newItem;
  194. retValue = newItem;
  195. this._list._update();
  196. }
  197. return retValue;
  198. };
  199. this.removeItem = function(index) {
  200. if (index < this.numberOfItems && index >= 0) {
  201. var retValue = this._xforms[index];
  202. var newxforms = new Array(this.numberOfItems - 1);
  203. var i, j;
  204. for (i = 0; i < index; ++i) {
  205. newxforms[i] = this._xforms[i];
  206. }
  207. for (j = i; j < this.numberOfItems-1; ++j, ++i) {
  208. newxforms[j] = this._xforms[i+1];
  209. }
  210. this.numberOfItems--;
  211. this._xforms = newxforms;
  212. this._list._update();
  213. return retValue;
  214. }
  215. throw {code: 1}; // DOMException with code=INDEX_SIZE_ERR
  216. };
  217. this.appendItem = function(newItem) {
  218. this._removeFromOtherLists(newItem);
  219. this._xforms.push(newItem);
  220. this.numberOfItems++;
  221. this._list._update();
  222. return newItem;
  223. };
  224. };
  225. svgedit.transformlist.resetListMap = function() {
  226. listMap_ = {};
  227. };
  228. /**
  229. * Removes transforms of the given element from the map.
  230. * Parameters:
  231. * elem - a DOM Element
  232. */
  233. svgedit.transformlist.removeElementFromListMap = function(elem) {
  234. if (elem.id && listMap_[elem.id]) {
  235. delete listMap_[elem.id];
  236. }
  237. };
  238. // Function: getTransformList
  239. // Returns an object that behaves like a SVGTransformList for the given DOM element
  240. //
  241. // Parameters:
  242. // elem - DOM element to get a transformlist from
  243. svgedit.transformlist.getTransformList = function(elem) {
  244. if (!svgedit.browser.supportsNativeTransformLists()) {
  245. var id = elem.id || 'temp';
  246. var t = listMap_[id];
  247. if (!t || id === 'temp') {
  248. listMap_[id] = new svgedit.transformlist.SVGTransformList(elem);
  249. listMap_[id]._init();
  250. t = listMap_[id];
  251. }
  252. return t;
  253. }
  254. if (elem.transform) {
  255. return elem.transform.baseVal;
  256. }
  257. if (elem.gradientTransform) {
  258. return elem.gradientTransform.baseVal;
  259. }
  260. if (elem.patternTransform) {
  261. return elem.patternTransform.baseVal;
  262. }
  263. return null;
  264. };
  265. }());