ext-star.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. /*globals svgEditor, svgedit, svgCanvas, $*/
  2. /*jslint vars: true, eqeq: true*/
  3. /*
  4. * ext-star.js
  5. *
  6. *
  7. * Copyright(c) 2010 CloudCanvas, Inc.
  8. * All rights reserved
  9. *
  10. */
  11. svgEditor.addExtension('star', function(S){'use strict';
  12. var // NS = svgedit.NS,
  13. // svgcontent = S.svgcontent,
  14. selElems,
  15. // editingitex = false,
  16. // svgdoc = S.svgroot.parentNode.ownerDocument,
  17. started,
  18. newFO,
  19. // edg = 0,
  20. // newFOG, newFOGParent, newDef, newImageName, newMaskID,
  21. // undoCommand = 'Not image',
  22. // modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH,
  23. shape;
  24. function showPanel(on){
  25. var fc_rules = $('#fc_rules');
  26. if (!fc_rules.length) {
  27. fc_rules = $('<style id="fc_rules"></style>').appendTo('head');
  28. }
  29. fc_rules.text(!on ? '' : ' #tool_topath { display: none !important; }');
  30. $('#star_panel').toggle(on);
  31. }
  32. /*
  33. function toggleSourceButtons(on){
  34. $('#star_save, #star_cancel').toggle(on);
  35. }
  36. */
  37. function setAttr(attr, val){
  38. svgCanvas.changeSelectedAttribute(attr, val);
  39. S.call('changed', selElems);
  40. }
  41. /*
  42. function cot(n){
  43. return 1 / Math.tan(n);
  44. }
  45. function sec(n){
  46. return 1 / Math.cos(n);
  47. }
  48. */
  49. return {
  50. name: 'star',
  51. svgicons: svgEditor.curConfig.extPath + 'star-icons.svg',
  52. buttons: [{
  53. id: 'tool_star',
  54. type: 'mode',
  55. title: 'Star Tool',
  56. position: 12,
  57. events: {
  58. click: function(){
  59. showPanel(true);
  60. svgCanvas.setMode('star');
  61. }
  62. }
  63. }],
  64. context_tools: [{
  65. type: 'input',
  66. panel: 'star_panel',
  67. title: 'Number of Sides',
  68. id: 'starNumPoints',
  69. label: 'points',
  70. size: 3,
  71. defval: 5,
  72. events: {
  73. change: function(){
  74. setAttr('point', this.value);
  75. }
  76. }
  77. }, {
  78. type: 'input',
  79. panel: 'star_panel',
  80. title: 'Pointiness',
  81. id: 'starRadiusMulitplier',
  82. label: 'Pointiness',
  83. size: 3,
  84. defval: 2.5
  85. }, {
  86. type: 'input',
  87. panel: 'star_panel',
  88. title: 'Twists the star',
  89. id: 'radialShift',
  90. label: 'Radial Shift',
  91. size: 3,
  92. defval: 0,
  93. events: {
  94. change: function(){
  95. setAttr('radialshift', this.value);
  96. }
  97. }
  98. }],
  99. callback: function(){
  100. $('#star_panel').hide();
  101. // var endChanges = function(){};
  102. },
  103. mouseDown: function(opts){
  104. var rgb = svgCanvas.getColor('fill');
  105. // var ccRgbEl = rgb.substring(1, rgb.length);
  106. var sRgb = svgCanvas.getColor('stroke');
  107. // var ccSRgbEl = sRgb.substring(1, rgb.length);
  108. var sWidth = svgCanvas.getStrokeWidth();
  109. if (svgCanvas.getMode() == 'star') {
  110. started = true;
  111. newFO = S.addSvgElementFromJson({
  112. 'element': 'polygon',
  113. 'attr': {
  114. 'cx': opts.start_x,
  115. 'cy': opts.start_y,
  116. 'id': S.getNextId(),
  117. 'shape': 'star',
  118. 'point': document.getElementById('starNumPoints').value,
  119. 'r': 0,
  120. 'radialshift': document.getElementById('radialShift').value,
  121. 'r2': 0,
  122. 'orient': 'point',
  123. 'fill': rgb,
  124. 'strokecolor': sRgb,
  125. 'strokeWidth': sWidth
  126. }
  127. });
  128. return {
  129. started: true
  130. };
  131. }
  132. },
  133. mouseMove: function(opts){
  134. if (!started) {
  135. return;
  136. }
  137. if (svgCanvas.getMode() == 'star') {
  138. var x = opts.mouse_x;
  139. var y = opts.mouse_y;
  140. var c = $(newFO).attr(['cx', 'cy', 'point', 'orient', 'fill', 'strokecolor', 'strokeWidth', 'radialshift']);
  141. var cx = c.cx, cy = c.cy, fill = c.fill, strokecolor = c.strokecolor, strokewidth = c.strokeWidth, radialShift = c.radialshift, point = c.point, orient = c.orient, circumradius = (Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy))) / 1.5, inradius = circumradius / document.getElementById('starRadiusMulitplier').value;
  142. newFO.setAttributeNS(null, 'r', circumradius);
  143. newFO.setAttributeNS(null, 'r2', inradius);
  144. var polyPoints = '';
  145. var s;
  146. for (s = 0; point >= s; s++) {
  147. var angle = 2.0 * Math.PI * (s / point);
  148. if ('point' == orient) {
  149. angle -= (Math.PI / 2);
  150. } else if ('edge' == orient) {
  151. angle = (angle + (Math.PI / point)) - (Math.PI / 2);
  152. }
  153. x = (circumradius * Math.cos(angle)) + cx;
  154. y = (circumradius * Math.sin(angle)) + cy;
  155. polyPoints += x + ',' + y + ' ';
  156. if (null != inradius) {
  157. angle = (2.0 * Math.PI * (s / point)) + (Math.PI / point);
  158. if ('point' == orient) {
  159. angle -= (Math.PI / 2);
  160. } else if ('edge' == orient) {
  161. angle = (angle + (Math.PI / point)) - (Math.PI / 2);
  162. }
  163. angle += radialShift;
  164. x = (inradius * Math.cos(angle)) + cx;
  165. y = (inradius * Math.sin(angle)) + cy;
  166. polyPoints += x + ',' + y + ' ';
  167. }
  168. }
  169. newFO.setAttributeNS(null, 'points', polyPoints);
  170. newFO.setAttributeNS(null, 'fill', fill);
  171. newFO.setAttributeNS(null, 'stroke', strokecolor);
  172. newFO.setAttributeNS(null, 'stroke-width', strokewidth);
  173. shape = newFO.getAttributeNS(null, 'shape');
  174. return {
  175. started: true
  176. };
  177. }
  178. },
  179. mouseUp: function(){
  180. if (svgCanvas.getMode() == 'star') {
  181. var attrs = $(newFO).attr(['r']);
  182. // svgCanvas.addToSelection([newFO], true);
  183. return {
  184. keep: (attrs.r != 0),
  185. element: newFO
  186. };
  187. }
  188. },
  189. selectedChanged: function(opts){
  190. // Use this to update the current selected elements
  191. selElems = opts.elems;
  192. var i = selElems.length;
  193. while (i--) {
  194. var elem = selElems[i];
  195. if (elem && elem.getAttributeNS(null, 'shape') === 'star') {
  196. if (opts.selectedElement && !opts.multiselected) {
  197. // $('#starRadiusMulitplier').val(elem.getAttribute('r2'));
  198. $('#starNumPoints').val(elem.getAttribute('point'));
  199. $('#radialShift').val(elem.getAttribute('radialshift'));
  200. showPanel(true);
  201. }
  202. else {
  203. showPanel(false);
  204. }
  205. } else {
  206. showPanel(false);
  207. }
  208. }
  209. },
  210. elementChanged: function(opts){
  211. // var elem = opts.elems[0];
  212. }
  213. };
  214. });