ext-arrows.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. /*globals svgEditor, svgCanvas, $*/
  2. /*jslint vars: true, eqeq: true*/
  3. /*
  4. * ext-arrows.js
  5. *
  6. * Licensed under the MIT License
  7. *
  8. * Copyright(c) 2010 Alexis Deveria
  9. *
  10. */
  11. svgEditor.addExtension('Arrows', function(S) {
  12. var svgcontent = S.svgcontent,
  13. addElem = S.addSvgElementFromJson,
  14. nonce = S.nonce,
  15. randomize_ids = S.randomize_ids,
  16. selElems, pathdata,
  17. lang_list = {
  18. 'en':[
  19. {'id': 'arrow_none', 'textContent': 'No arrow' }
  20. ],
  21. 'fr':[
  22. {'id': 'arrow_none', 'textContent': 'Sans flèche' }
  23. ]
  24. },
  25. arrowprefix,
  26. prefix = 'se_arrow_';
  27. function setArrowNonce(window, n) {
  28. randomize_ids = true;
  29. arrowprefix = prefix + n + '_';
  30. pathdata.fw.id = arrowprefix + 'fw';
  31. pathdata.bk.id = arrowprefix + 'bk';
  32. }
  33. function unsetArrowNonce(window) {
  34. randomize_ids = false;
  35. arrowprefix = prefix;
  36. pathdata.fw.id = arrowprefix + 'fw';
  37. pathdata.bk.id = arrowprefix + 'bk';
  38. }
  39. svgCanvas.bind('setnonce', setArrowNonce);
  40. svgCanvas.bind('unsetnonce', unsetArrowNonce);
  41. if (randomize_ids) {
  42. arrowprefix = prefix + nonce + '_';
  43. } else {
  44. arrowprefix = prefix;
  45. }
  46. pathdata = {
  47. fw: {d: 'm0,0l10,5l-10,5l5,-5l-5,-5z', refx: 8, id: arrowprefix + 'fw'},
  48. bk: {d: 'm10,0l-10,5l10,5l-5,-5l5,-5z', refx: 2, id: arrowprefix + 'bk'}
  49. };
  50. function getLinked(elem, attr) {
  51. var str = elem.getAttribute(attr);
  52. if(!str) {return null;}
  53. var m = str.match(/\(\#(.*)\)/);
  54. if(!m || m.length !== 2) {
  55. return null;
  56. }
  57. return S.getElem(m[1]);
  58. }
  59. function showPanel(on) {
  60. $('#arrow_panel').toggle(on);
  61. if(on) {
  62. var el = selElems[0];
  63. var end = el.getAttribute('marker-end');
  64. var start = el.getAttribute('marker-start');
  65. var mid = el.getAttribute('marker-mid');
  66. var val;
  67. if (end && start) {
  68. val = 'both';
  69. } else if (end) {
  70. val = 'end';
  71. } else if (start) {
  72. val = 'start';
  73. } else if (mid) {
  74. val = 'mid';
  75. if (mid.indexOf('bk') !== -1) {
  76. val = 'mid_bk';
  77. }
  78. }
  79. if (!start && !mid && !end) {
  80. val = 'none';
  81. }
  82. $('#arrow_list').val(val);
  83. }
  84. }
  85. function resetMarker() {
  86. var el = selElems[0];
  87. el.removeAttribute('marker-start');
  88. el.removeAttribute('marker-mid');
  89. el.removeAttribute('marker-end');
  90. }
  91. function addMarker(dir, type, id) {
  92. // TODO: Make marker (or use?) per arrow type, since refX can be different
  93. id = id || arrowprefix + dir;
  94. var marker = S.getElem(id);
  95. var data = pathdata[dir];
  96. if (type == 'mid') {
  97. data.refx = 5;
  98. }
  99. if (!marker) {
  100. marker = addElem({
  101. 'element': 'marker',
  102. 'attr': {
  103. 'viewBox': '0 0 10 10',
  104. 'id': id,
  105. 'refY': 5,
  106. 'markerUnits': 'strokeWidth',
  107. 'markerWidth': 5,
  108. 'markerHeight': 5,
  109. 'orient': 'auto',
  110. 'style': 'pointer-events:none' // Currently needed for Opera
  111. }
  112. });
  113. var arrow = addElem({
  114. 'element': 'path',
  115. 'attr': {
  116. 'd': data.d,
  117. 'fill': '#000000'
  118. }
  119. });
  120. marker.appendChild(arrow);
  121. S.findDefs().appendChild(marker);
  122. }
  123. marker.setAttribute('refX', data.refx);
  124. return marker;
  125. }
  126. function setArrow() {
  127. var type = this.value;
  128. resetMarker();
  129. if (type == 'none') {
  130. return;
  131. }
  132. // Set marker on element
  133. var dir = 'fw';
  134. if (type == 'mid_bk') {
  135. type = 'mid';
  136. dir = 'bk';
  137. } else if (type == 'both') {
  138. addMarker('bk', type);
  139. svgCanvas.changeSelectedAttribute('marker-start', 'url(#' + pathdata.bk.id + ')');
  140. type = 'end';
  141. dir = 'fw';
  142. } else if (type == 'start') {
  143. dir = 'bk';
  144. }
  145. addMarker(dir, type);
  146. svgCanvas.changeSelectedAttribute('marker-' + type, 'url(#' + pathdata[dir].id + ')');
  147. S.call('changed', selElems);
  148. }
  149. function colorChanged(elem) {
  150. var color = elem.getAttribute('stroke');
  151. var mtypes = ['start', 'mid', 'end'];
  152. var defs = S.findDefs();
  153. $.each(mtypes, function(i, type) {
  154. var marker = getLinked(elem, 'marker-'+type);
  155. if(!marker) {return;}
  156. var cur_color = $(marker).children().attr('fill');
  157. var cur_d = $(marker).children().attr('d');
  158. var new_marker = null;
  159. if(cur_color === color) {return;}
  160. var all_markers = $(defs).find('marker');
  161. // Different color, check if already made
  162. all_markers.each(function() {
  163. var attrs = $(this).children().attr(['fill', 'd']);
  164. if(attrs.fill === color && attrs.d === cur_d) {
  165. // Found another marker with this color and this path
  166. new_marker = this;
  167. }
  168. });
  169. if(!new_marker) {
  170. // Create a new marker with this color
  171. var last_id = marker.id;
  172. var dir = last_id.indexOf('_fw') !== -1?'fw':'bk';
  173. new_marker = addMarker(dir, type, arrowprefix + dir + all_markers.length);
  174. $(new_marker).children().attr('fill', color);
  175. }
  176. $(elem).attr('marker-'+type, 'url(#' + new_marker.id + ')');
  177. // Check if last marker can be removed
  178. var remove = true;
  179. $(S.svgcontent).find('line, polyline, path, polygon').each(function() {
  180. var elem = this;
  181. $.each(mtypes, function(j, mtype) {
  182. if($(elem).attr('marker-' + mtype) === 'url(#' + marker.id + ')') {
  183. remove = false;
  184. return remove;
  185. }
  186. });
  187. if(!remove) {return false;}
  188. });
  189. // Not found, so can safely remove
  190. if(remove) {
  191. $(marker).remove();
  192. }
  193. });
  194. }
  195. return {
  196. name: 'Arrows',
  197. context_tools: [{
  198. type: 'select',
  199. panel: 'arrow_panel',
  200. title: 'Select arrow type',
  201. id: 'arrow_list',
  202. options: {
  203. none: 'No arrow',
  204. end: '---->',
  205. start: '<----',
  206. both: '<--->',
  207. mid: '-->--',
  208. mid_bk: '--<--'
  209. },
  210. defval: 'none',
  211. events: {
  212. change: setArrow
  213. }
  214. }],
  215. callback: function() {
  216. $('#arrow_panel').hide();
  217. // Set ID so it can be translated in locale file
  218. $('#arrow_list option')[0].id = 'connector_no_arrow';
  219. },
  220. addLangData: function(lang) {
  221. return {
  222. data: lang_list[lang]
  223. };
  224. },
  225. selectedChanged: function(opts) {
  226. // Use this to update the current selected elements
  227. selElems = opts.elems;
  228. var i = selElems.length;
  229. var marker_elems = ['line', 'path', 'polyline', 'polygon'];
  230. while(i--) {
  231. var elem = selElems[i];
  232. if(elem && $.inArray(elem.tagName, marker_elems) !== -1) {
  233. if(opts.selectedElement && !opts.multiselected) {
  234. showPanel(true);
  235. } else {
  236. showPanel(false);
  237. }
  238. } else {
  239. showPanel(false);
  240. }
  241. }
  242. },
  243. elementChanged: function(opts) {
  244. var elem = opts.elems[0];
  245. if(elem && (
  246. elem.getAttribute('marker-start') ||
  247. elem.getAttribute('marker-mid') ||
  248. elem.getAttribute('marker-end')
  249. )) {
  250. // var start = elem.getAttribute('marker-start');
  251. // var mid = elem.getAttribute('marker-mid');
  252. // var end = elem.getAttribute('marker-end');
  253. // Has marker, so see if it should match color
  254. colorChanged(elem);
  255. }
  256. }
  257. };
  258. });