jquery.jsPlumb-1.2-RC1.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. // jQuery plugin code
  2. (function($){
  3. /**
  4. * plumbs the results of the selector to some target, using the given options if supplied,
  5. * or the defaults otherwise.
  6. */
  7. $.fn.plumb = function(options) {
  8. var options = $.extend({}, options);
  9. return this.each(function()
  10. {
  11. var params = $.extend({source:$(this)}, options);
  12. jsPlumb.connect(params);
  13. });
  14. };
  15. /**
  16. * detaches the results of the selector from the given target or list of targets - 'target'
  17. * may be a String or a List.
  18. */
  19. $.fn.detach = function(target) {
  20. return this.each(function()
  21. {
  22. var id = $(this).attr("id");
  23. if (typeof target == 'string') target = [target];
  24. for (var i = 0; i < target.length; i++)
  25. jsPlumb.detach(id, target[i]);
  26. });
  27. };
  28. /**
  29. * detaches the results from the selector from all connections.
  30. */
  31. $.fn.detachAll = function() {
  32. return this.each(function()
  33. {
  34. var id = $(this).attr("id");
  35. jsPlumb.detachAll(id);
  36. });
  37. };
  38. /**
  39. * adds an endpoint to the elements resulting from the selector. options may be null,
  40. * in which case jsPlumb will use the default options. see documentation.
  41. */
  42. $.fn.addEndpoint = function(options) {
  43. var addedEndpoints = [];
  44. this.each(function()
  45. {
  46. addedEndpoints.push(jsPlumb.addEndpoint($(this).attr("id"), options));
  47. });
  48. return addedEndpoints[0];
  49. };
  50. /**
  51. * adds a list of endpoints to the elements resulting from the selector. options may be null,
  52. * in which case jsPlumb will use the default options. see documentation.
  53. */
  54. $.fn.addEndpoints = function(endpoints) {
  55. var addedEndpoints = [];
  56. return this.each(function()
  57. {
  58. var e = jsPlumb.addEndpoints($(this).attr("id"), endpoints);
  59. for (var i = 0; i < e.length; i++) addedEndpoints.push(e[i]);
  60. });
  61. return addedEndpoints;
  62. };
  63. /**
  64. * remove the endpoint, if it exists, deleting its UI elements etc.
  65. */
  66. $.fn.removeEndpoint = function(endpoint) {
  67. this.each(function()
  68. {
  69. jsPlumb.removeEndpoint($(this).attr("id"), endpoint);
  70. });
  71. };
  72. })(jQuery);
  73. /*
  74. * the library agnostic functions, such as find offset, get id, get attribute, extend etc.
  75. */
  76. (function() {
  77. jsPlumb.CurrentLibrary = {
  78. /**
  79. * mapping of drag events for jQuery
  80. */
  81. dragEvents : {
  82. 'start':'start', 'stop':'stop', 'drag':'drag', 'step':'step',
  83. 'over':'over', 'out':'out', 'drop':'drop'
  84. },
  85. /**
  86. * wrapper around the library's 'extend' functionality (which it hopefully has.
  87. * otherwise you'll have to do it yourself). perhaps jsPlumb could do this for you
  88. * instead. it's not like its hard.
  89. */
  90. extend : function(o1, o2) {
  91. return $.extend(o1, o2);
  92. },
  93. /**
  94. * gets an "element object" from the given input. this means an object that is used by the
  95. * underlying library on which jsPlumb is running. 'el' may already be one of these objects,
  96. * in which case it is returned as-is. otherwise, 'el' is a String, the library's lookup
  97. * function is used to find the element, using the given String as the element's id.
  98. */
  99. getElementObject : function(el) {
  100. return typeof(el)=='string' ? $("#" + el) : $(el);
  101. },
  102. /**
  103. * gets the offset for the element object. this should return a js object like this:
  104. *
  105. * { left:xxx, top: xxx }
  106. */
  107. getOffset : function(el) {
  108. return el.offset();
  109. },
  110. /**
  111. * gets the size for the element object, in an array : [ width, height ].
  112. */
  113. getSize : function(el) {
  114. return [el.outerWidth(), el.outerHeight()];
  115. },
  116. /**
  117. * gets the named attribute from the given element object.
  118. */
  119. getAttribute : function(el, attName) {
  120. return el.attr(attName);
  121. },
  122. /**
  123. * sets the named attribute on the given element object.
  124. */
  125. setAttribute : function(el, attName, attValue) {
  126. el.attr(attName, attValue);
  127. },
  128. /**
  129. * adds the given class to the element object.
  130. */
  131. addClass : function(el, clazz) {
  132. el.addClass(clazz);
  133. },
  134. /**
  135. * initialises the given element to be draggable.
  136. */
  137. initDraggable : function(el, options) {
  138. // remove helper directive if present. we know what's best!
  139. options.helper = null;
  140. //TODO: if 'revert' is set on the options it causes end points to animate back to
  141. // where they came from, if the connection is aborted. do we care? probably not.
  142. // the todo is to decide whether we care or not.
  143. options['scope'] = options['scope'] || jsPlumb.Defaults.Scope;
  144. el.draggable(options);
  145. },
  146. /**
  147. * returns whether or not drag is supported (by the library, not whether or not it is disabled) for the given element.
  148. */
  149. isDragSupported : function(el, options) {
  150. return el.draggable;
  151. },
  152. /**
  153. * sets the draggable state for the given element
  154. */
  155. setDraggable : function(el, draggable) {
  156. el.draggable("option", "disabled", !draggable);
  157. },
  158. /**
  159. * initialises the given element to be droppable.
  160. */
  161. initDroppable : function(el, options) {
  162. options['scope'] = options['scope'] || jsPlumb.Defaults.Scope;
  163. el.droppable(options);
  164. },
  165. /**
  166. * returns whether or not drop is supported (by the library, not whether or not it is disabled) for the given element.
  167. */
  168. isDropSupported : function(el, options) {
  169. return el.droppable;
  170. },
  171. /**
  172. * animates the given element.
  173. */
  174. animate : function(el, properties, options) {
  175. el.animate(properties, options);
  176. },
  177. /**
  178. * takes the args passed to an event function and returns you an object that gives the
  179. * position of the object being moved, as a js object with the same params as the result of
  180. * getOffset, ie: { left: xxx, top: xxx }.
  181. *
  182. * different libraries have different signatures for their event callbacks.
  183. * see getDragObject as well
  184. */
  185. getUIPosition : function(eventArgs) {
  186. var ui = eventArgs[1];
  187. return ui.absolutePosition || ui.offset;
  188. },
  189. /**
  190. * takes the args passed to an event function and returns you an object representing that which is being dragged.
  191. */
  192. getDragObject : function(eventArgs) {
  193. return eventArgs[1].draggable;
  194. }
  195. };
  196. })();