jquery.jsPlumb-1.2.5-RC1.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. /*
  2. * jquery.jsPlumb 1.2.5-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. * the full list is:
  91. *
  92. * addClass adds a class to the given element
  93. * animate calls the underlying library's animate functionality
  94. * appendElement appends a child element to a parent element.
  95. * bind binds some event to an element
  96. * dragEvents a dictionary of event names
  97. * extend extend some js object with another. probably not overly necessary; jsPlumb could just do this internally.
  98. * getAttribute gets some attribute from an element
  99. * getDragObject gets the object that is being dragged, by extracting it from the arguments passed to a drag callback
  100. * getElementObject turns an id or dom element into an element object of the underlying library's type.
  101. * getOffset gets an element's offset
  102. * getScrollLeft gets an element's scroll left. TODO: is this actually used? will it be?
  103. * getScrollTop gets an element's scroll top. TODO: is this actually used? will it be?
  104. * getSize gets an element's size.
  105. * getUIPosition gets the position of some element that is currently being dragged, by extracting it from the arguments passed to a drag callback.
  106. * initDraggable initializes an element to be draggable
  107. * initDroppable initializes an element to be droppable
  108. * isDragSupported returns whether or not drag is supported for some element.
  109. * isDropSupported returns whether or not drop is supported for some element.
  110. * removeClass removes a class from a given element.
  111. * removeElement removes some element completely from the DOM.
  112. * setAttribute sets an attribute on some element.
  113. * setDraggable sets whether or not some element should be draggable.
  114. * setOffset sets the offset of some element.
  115. */
  116. (function($) {
  117. jsPlumb.CurrentLibrary = {
  118. /**
  119. * adds the given class to the element object.
  120. */
  121. addClass : function(el, clazz) {
  122. el.addClass(clazz);
  123. },
  124. /**
  125. * animates the given element.
  126. */
  127. animate : function(el, properties, options) {
  128. el.animate(properties, options);
  129. },
  130. /**
  131. * appends the given child to the given parent.
  132. */
  133. appendElement : function(child, parent) {
  134. jsPlumb.CurrentLibrary.getElementObject(parent).append(child);
  135. },
  136. /**
  137. * event binding wrapper. it just so happens that jQuery uses 'bind' also. yui3, for example,
  138. * uses 'on'.
  139. */
  140. bind : function(el, event, callback) {
  141. el = jsPlumb.CurrentLibrary.getElementObject(el);
  142. el.bind(event, callback);
  143. },
  144. /**
  145. * mapping of drag events for jQuery
  146. */
  147. dragEvents : {
  148. 'start':'start', 'stop':'stop', 'drag':'drag', 'step':'step',
  149. 'over':'over', 'out':'out', 'drop':'drop', 'complete':'complete'
  150. },
  151. /**
  152. * wrapper around the library's 'extend' functionality (which it hopefully has.
  153. * otherwise you'll have to do it yourself). perhaps jsPlumb could do this for you
  154. * instead. it's not like its hard.
  155. */
  156. extend : function(o1, o2) {
  157. return $.extend(o1, o2);
  158. },
  159. /**
  160. * gets the named attribute from the given element object.
  161. */
  162. getAttribute : function(el, attName) {
  163. return el.attr(attName);
  164. },
  165. /**
  166. * takes the args passed to an event function and returns you an object representing that which is being dragged.
  167. */
  168. getDragObject : function(eventArgs) {
  169. return eventArgs[1].draggable;
  170. },
  171. /**
  172. * gets an "element object" from the given input. this means an object that is used by the
  173. * underlying library on which jsPlumb is running. 'el' may already be one of these objects,
  174. * in which case it is returned as-is. otherwise, 'el' is a String, the library's lookup
  175. * function is used to find the element, using the given String as the element's id.
  176. *
  177. */
  178. getElementObject : function(el) {
  179. return typeof(el)=='string' ? $("#" + el) : $(el);
  180. },
  181. /**
  182. * gets the offset for the element object. this should return a js object like this:
  183. *
  184. * { left:xxx, top: xxx }
  185. */
  186. getOffset : function(el) {
  187. return el.offset();
  188. },
  189. getScrollLeft : function(el) {
  190. return el.scrollLeft();
  191. },
  192. getScrollTop : function(el) {
  193. return el.scrollTop();
  194. },
  195. /**
  196. * gets the size for the element object, in an array : [ width, height ].
  197. */
  198. getSize : function(el) {
  199. return [el.outerWidth(), el.outerHeight()];
  200. },
  201. /**
  202. * takes the args passed to an event function and returns you an object that gives the
  203. * position of the object being moved, as a js object with the same params as the result of
  204. * getOffset, ie: { left: xxx, top: xxx }.
  205. *
  206. * different libraries have different signatures for their event callbacks.
  207. * see getDragObject as well
  208. */
  209. getUIPosition : function(eventArgs) {
  210. var ui = eventArgs[1];
  211. //return ui.absolutePosition || ui.offset;
  212. return ui.offset || ui.absolutePosition;
  213. },
  214. /**
  215. * initialises the given element to be draggable.
  216. */
  217. initDraggable : function(el, options) {
  218. // remove helper directive if present.
  219. options.helper = null;
  220. //TODO: if 'revert' is set on the options it causes end points to animate back to
  221. // where they came from, if the connection is aborted. do we care? probably not.
  222. // the todo is to decide whether we care or not.
  223. options['scope'] = options['scope'] || jsPlumb.Defaults.Scope;
  224. el.draggable(options);
  225. },
  226. /**
  227. * initialises the given element to be droppable.
  228. */
  229. initDroppable : function(el, options) {
  230. options['scope'] = options['scope'] || jsPlumb.Defaults.Scope;
  231. el.droppable(options);
  232. },
  233. isAlreadyDraggable : function(el) {
  234. el = jsPlumb.CurrentLibrary.getElementObject(el);
  235. return el.hasClass("ui-draggable");
  236. },
  237. /**
  238. * returns whether or not drag is supported (by the library, not whether or not it is disabled) for the given element.
  239. */
  240. isDragSupported : function(el, options) {
  241. return el.draggable;
  242. },
  243. /**
  244. * returns whether or not drop is supported (by the library, not whether or not it is disabled) for the given element.
  245. */
  246. isDropSupported : function(el, options) {
  247. return el.droppable;
  248. },
  249. /**
  250. * removes the given class from the element object.
  251. */
  252. removeClass : function(el, clazz) {
  253. el.removeClass(clazz);
  254. },
  255. removeElement : function(element, parent) {
  256. jsPlumb.CurrentLibrary.getElementObject(element).remove();
  257. },
  258. /**
  259. * sets the named attribute on the given element object.
  260. */
  261. setAttribute : function(el, attName, attValue) {
  262. el.attr(attName, attValue);
  263. },
  264. /**
  265. * sets the draggable state for the given element
  266. */
  267. setDraggable : function(el, draggable) {
  268. el.draggable("option", "disabled", !draggable);
  269. },
  270. setOffset : function(el, o) {
  271. jsPlumb.CurrentLibrary.getElementObject(el).offset(o);
  272. }
  273. };
  274. })(jQuery);