PageRenderTime 49ms CodeModel.GetById 23ms RepoModel.GetById 1ms app.codeStats 0ms

/public/js/flowgraph/sprites/Action.js

https://github.com/bingomanatee/flowgraph
JavaScript | 309 lines | 252 code | 55 blank | 2 comment | 31 complexity | 5c3bba8cf97b17e1ec2fd70d5aca4e50 MD5 | raw file
  1. var show_item_form_item;
  2. function show_item_form(item) {
  3. var f = $('#item_form');
  4. f.show();
  5. f.css('top', item.get('top'));
  6. f.css('left', item.get('left'));
  7. $('#item_form_item_name').val(item.get('name'));
  8. $('#item_form_item_id').html(item.get('_id'));
  9. $('#item_form_strength').val(item.get('strength'));
  10. show_item_form_item = item;
  11. }
  12. function update_show_item_form() {
  13. var name = $('#item_form_item_name').val();
  14. if (name) {
  15. show_item_form_item.set('name', name);
  16. }
  17. show_item_form_item.set_strength($('#item_form_strength').val());
  18. var f = $('#item_form');
  19. f.hide();
  20. }
  21. flowgraph.sprites.Action = function () {
  22. /* ************ DRAW PROPS ******************* */
  23. var diamond_offset = 12;
  24. var diamond_size = 6;
  25. var dash_image_loaded = false;
  26. var edit_image_loaded = false;
  27. var edit_icon_offset = 4;
  28. var icon_size = 20;
  29. var stack_order = 0;
  30. function _draw(ctx) {
  31. var props = {};
  32. if (!dash_image_loaded) {
  33. flowgraph.util.action_fills.init_dashed_image(ctx);
  34. dash_image_loaded = true;
  35. }
  36. if (!edit_image_loaded){
  37. flowgraph.util.action_fills.init_edit_image(ctx);
  38. }
  39. var strength = this.get('strength');
  40. var af = flowgraph.util.action_fills;
  41. _.extend(props, af.strength[strength]);
  42. if (this.get('is_selected')) {
  43. _.extend(props, af.SELECTED);
  44. }
  45. if (this.get('is_new')) {
  46. _.extend(props, af.NEW);
  47. }
  48. if (this.get('is_over')) {
  49. _.extend(props, af.OVER);
  50. }
  51. if (this.get('is_moving')) {
  52. _.extend(props, af.MOVING);
  53. }
  54. switch (strength) {
  55. case 'branch':
  56. flowgraph.draw.diamond(ctx, this.dims(), props);
  57. break;
  58. case 'start':
  59. flowgraph.draw.circle_cr(ctx, this.center().to_a(), parseInt(this.get('height')) / 2, props);
  60. break;
  61. default:
  62. flowgraph.draw.roundrect(ctx, this.dims(), props);
  63. }
  64. ctx.save();
  65. ctx.translate(this.get('left'), this.get('top'));
  66. this.draw_label(ctx);
  67. this.draw_diamond(ctx);
  68. this.draw_edit_icon(ctx);
  69. ctx.restore();
  70. }
  71. var Action = Backbone.Model.extend({
  72. type:'item',
  73. idAttribute:"_id",
  74. initialize:function () {
  75. if (!this.get('_id')) {
  76. this.set('_id', flowgraph.next_action_id());
  77. if (this.get('_id') == 1) {
  78. this.set('name', 'START');
  79. this.set('strength', 'start');
  80. } else {
  81. this.set('name', 'Action ' + this.get('_id'));
  82. }
  83. }
  84. if (!this.get('stack_order')) {
  85. this.set('stack_order', ++stack_order);
  86. }
  87. },
  88. defaults:{
  89. top:0,
  90. left:0,
  91. stack_order:0,
  92. width:120,
  93. height:75,
  94. strength:'normal',
  95. name:'untitled',
  96. is_new:false,
  97. is_over:false,
  98. moving:false,
  99. type:'item'
  100. },
  101. _toString:_.template('ACTION <%= strength %> id <%= _id %> (<%= name %>, at <%= left %>, <%= top %>)'),
  102. toString:function () {
  103. var out = this._toString(this.toJSON());
  104. if (this.get('is_new')) {
  105. out += ' new ';
  106. }
  107. if (this.get('is_selected')) {
  108. out += ' sel ';
  109. }
  110. if (this.get('is_over')) {
  111. out += ' over ';
  112. }
  113. return out;
  114. },
  115. toJSON:function () {
  116. return {
  117. name:this.get('name'),
  118. _id:this.get('_id'),
  119. left:this.get('left'),
  120. top:this.get('top'),
  121. style:this.get('style'),
  122. strength:this.get('strength')
  123. }
  124. },
  125. equals:function (item) {
  126. return item.get('_id') == this.get('_id');
  127. },
  128. pa:function () {
  129. return [this.get('left') + this.get('width') / 2, this.get('top') + this.get('height') / 2];
  130. },
  131. set_strength:function (v) {
  132. this.set('strength', v);
  133. },
  134. center:function () {
  135. var out = new flowgraph.util.Point(this.get('left') + this.get('width') / 2, this.get('top') + this.get('height') / 2);
  136. // console.log('center of ', this.get('name'), ':', out.toString());
  137. return out;
  138. },
  139. draw:_draw,
  140. label_pt:function () {
  141. switch (this.get('strength')) {
  142. case 'start':
  143. return [this.get('width') / 2, parseInt(this.get('height')) / 2 + 5];
  144. break;
  145. case 'branch':
  146. return [this.get('width') / 2, parseInt(this.get('height')) / 2 + 5];
  147. break;
  148. default:
  149. return [10, 20];
  150. }
  151. },
  152. draw_label:function (ctx) {
  153. var strength = this.get('strength');
  154. var txt_props = {};
  155. _.extend(txt_props, flowgraph.util.action_fills.label_draw_props[strength]);
  156. flowgraph.draw.text(ctx, this.get('name'), this.label_pt(), txt_props, true);
  157. },
  158. draw_layer:function (ctx) {
  159. var txt_props = {};
  160. var pt = this.label_pt();
  161. pt[1] += 20;
  162. _.extend(txt_props, flowgraph.util.action_fills.label_draw_props, {fill:'rgb(255, 0, 0)'});
  163. flowgraph.draw.text(ctx, this.layer_index, pt, txt_props);
  164. },
  165. draw_diamond:function (ctx) {
  166. ctx.save();
  167. ctx.translate(this.get('width') - diamond_offset, diamond_offset);
  168. ctx.beginPath();
  169. ctx.moveTo(diamond_size, 0);
  170. ctx.lineTo(0, diamond_size);
  171. ctx.lineTo(-diamond_size, 0);
  172. ctx.lineTo(0, -diamond_size);
  173. ctx.lineTo(diamond_size, 0);
  174. ctx.closePath();
  175. flowgraph.draw.paint(ctx, flowgraph.util.action_fills.diamond_style, true);
  176. ctx.restore();
  177. },
  178. draw_edit_icon: function(ctx){
  179. var icon = flowgraph.util.action_fills.icons.edit;
  180. var dims = this.edit_icon_dims();
  181. if (icon.image){
  182. ctx.drawImage(icon.image, dims[0], dims[1]);
  183. }
  184. },
  185. dims:function (relative) {
  186. if (relative) {
  187. return [0, 0, this.get('width'), this.get('height')];
  188. } else {
  189. return [this.get('left'), this.get('top'), this.get('width'), this.get('height')];
  190. }
  191. },
  192. diamond_dims:function (relative) {
  193. var dims = [
  194. this.get('width') - diamond_offset - diamond_size, 0,
  195. this.get('width'), diamond_offset + diamond_size
  196. ];
  197. if (!relative) {
  198. dims[0] += this.get('left');
  199. dims[2] += this.get('left');
  200. dims[1] += this.get('top');
  201. dims[3] += this.get('top');
  202. }
  203. return dims;
  204. },
  205. edit_icon_dims:function (extent) {
  206. var dims = [
  207. this.get('width') - edit_icon_offset - icon_size,
  208. this.get('height') - edit_icon_offset - icon_size,
  209. icon_size,
  210. icon_size
  211. ];
  212. if (extent) {
  213. dims[2] += dims[0];
  214. dims[3] += dims[1];
  215. dims[0] += + this.get('left');
  216. dims[2] += + this.get('left');
  217. dims[1] += + this.get('top');
  218. dims[3] += + this.get('top');
  219. }
  220. return dims;
  221. },
  222. get_right:function () {
  223. return this.get('left') + this.get('width');
  224. },
  225. get_bottom:function () {
  226. return this.get('top') + this.get('height');
  227. },
  228. mouse_over:function () {
  229. return flowgraph.mouse.in_rect(this.get('left'), this.get('top'), this.get_right(), this.get_bottom());
  230. },
  231. mouse_click:function () {
  232. if (flowgraph.mode == 'select') {
  233. if (this.mouse_over()) {
  234. console.log('CLICKED ON ', this.get('name'));
  235. if (flowgraph.mouse.in_rect.apply(flowgraph.mouse, this.diamond_dims())) {
  236. show_item_form(this);
  237. } else if (flowgraph.mouse.in_rect.apply(flowgraph.mouse, this.edit_icon_dims(true))){
  238. document.location = '/flowgraph/' + flowgraph.project_id + '/action/' + this.get('_id');
  239. }
  240. return false;
  241. } else {
  242. return true;
  243. }
  244. } else {
  245. return true;
  246. }
  247. }
  248. });
  249. var Action_model = Backbone.Collection.extend({
  250. model:Action
  251. });
  252. flowgraph.collections.actions = new Action_model();
  253. return Action;
  254. }();