jquery.jsPlumb-1.2.2-RC1.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. /*
  2. * jquery.jsPlumb 1.2.2-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. return addedEndpoints;
  74. };
  75. /**
  76. * remove the endpoint, if it exists, deleting its UI elements etc.
  77. */
  78. $.fn.removeEndpoint = function(endpoint) {
  79. this.each(function() {
  80. jsPlumb.removeEndpoint($(this).attr("id"), endpoint);
  81. });
  82. };
  83. })(jQuery);
  84. /*TODO: abstract this out from jQuery too! but how...because jsPlumb is not loaded yet.
  85. $(window).bind('resize', function() {
  86. if (resizeTimer) clearTimeout(resizeTimer);
  87. resizeTimer = setTimeout(repaintEverything, 100);
  88. });*/
  89. /*
  90. * the library agnostic functions, such as find offset, get id, get attribute, extend etc.
  91. */
  92. (function($) {
  93. jsPlumb.CurrentLibrary = {
  94. /**
  95. * mapping of drag events for jQuery
  96. */
  97. dragEvents : {
  98. 'start':'start', 'stop':'stop', 'drag':'drag', 'step':'step',
  99. 'over':'over', 'out':'out', 'drop':'drop', 'complete':'complete'
  100. },
  101. appendElement : function(child, parent) {
  102. jsPlumb.CurrentLibrary.getElementObject(parent).append(child);
  103. },
  104. /**
  105. * wrapper around the library's 'extend' functionality (which it hopefully has.
  106. * otherwise you'll have to do it yourself). perhaps jsPlumb could do this for you
  107. * instead. it's not like its hard.
  108. */
  109. extend : function(o1, o2) {
  110. return $.extend(o1, o2);
  111. },
  112. /**
  113. * gets an "element object" from the given input. this means an object that is used by the
  114. * underlying library on which jsPlumb is running. 'el' may already be one of these objects,
  115. * in which case it is returned as-is. otherwise, 'el' is a String, the library's lookup
  116. * function is used to find the element, using the given String as the element's id.
  117. *
  118. */
  119. getElementObject : function(el) {
  120. return typeof(el)=='string' ? $("#" + el) : $(el);
  121. },
  122. /**
  123. * gets the offset for the element object. this should return a js object like this:
  124. *
  125. * { left:xxx, top: xxx }
  126. */
  127. getOffset : function(el) {
  128. return el.offset();
  129. },
  130. /**
  131. * gets the size for the element object, in an array : [ width, height ].
  132. */
  133. getSize : function(el) {
  134. return [el.outerWidth(), el.outerHeight()];
  135. },
  136. /**
  137. * gets the named attribute from the given element object.
  138. */
  139. getAttribute : function(el, attName) {
  140. return el.attr(attName);
  141. },
  142. /**
  143. * sets the named attribute on the given element object.
  144. */
  145. setAttribute : function(el, attName, attValue) {
  146. el.attr(attName, attValue);
  147. },
  148. /**
  149. * adds the given class to the element object.
  150. */
  151. addClass : function(el, clazz) {
  152. el.addClass(clazz);
  153. },
  154. /**
  155. * initialises the given element to be draggable.
  156. */
  157. initDraggable : function(el, options) {
  158. // remove helper directive if present. we know what's best!
  159. options.helper = null;
  160. //TODO: if 'revert' is set on the options it causes end points to animate back to
  161. // where they came from, if the connection is aborted. do we care? probably not.
  162. // the todo is to decide whether we care or not.
  163. options['scope'] = options['scope'] || jsPlumb.Defaults.Scope;
  164. el.draggable(options);
  165. },
  166. /**
  167. * returns whether or not drag is supported (by the library, not whether or not it is disabled) for the given element.
  168. */
  169. isDragSupported : function(el, options) {
  170. return el.draggable;
  171. },
  172. /**
  173. * sets the draggable state for the given element
  174. */
  175. setDraggable : function(el, draggable) {
  176. el.draggable("option", "disabled", !draggable);
  177. },
  178. /**
  179. * initialises the given element to be droppable.
  180. */
  181. initDroppable : function(el, options) {
  182. options['scope'] = options['scope'] || jsPlumb.Defaults.Scope;
  183. el.droppable(options);
  184. },
  185. /**
  186. * returns whether or not drop is supported (by the library, not whether or not it is disabled) for the given element.
  187. */
  188. isDropSupported : function(el, options) {
  189. return el.droppable;
  190. },
  191. /**
  192. * animates the given element.
  193. */
  194. animate : function(el, properties, options) {
  195. el.animate(properties, options);
  196. },
  197. /**
  198. * takes the args passed to an event function and returns you an object that gives the
  199. * position of the object being moved, as a js object with the same params as the result of
  200. * getOffset, ie: { left: xxx, top: xxx }.
  201. *
  202. * different libraries have different signatures for their event callbacks.
  203. * see getDragObject as well
  204. */
  205. getUIPosition : function(eventArgs) {
  206. var ui = eventArgs[1];
  207. return ui.absolutePosition || ui.offset;
  208. },
  209. /**
  210. * takes the args passed to an event function and returns you an object representing that which is being dragged.
  211. */
  212. getDragObject : function(eventArgs) {
  213. return eventArgs[1].draggable;
  214. },
  215. removeElement : function(element, parent) {
  216. jsPlumb.CurrentLibrary.getElementObject(element).remove();
  217. },
  218. getScrollLeft : function(el) {
  219. return el.scrollLeft();
  220. },
  221. getScrollTop : function(el) {
  222. return el.scrollTop();
  223. }
  224. };
  225. })(jQuery);