jquery.jsPlumb-1.2.1-RC1.js 7.1 KB

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