jquery.jsPlumb-1.2.4-RC1.js 7.4 KB

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