svgtransformlist.js 7.7 KB

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