jquery.jsPlumb-1.3.3-RC1.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. /*
  2. * jsPlumb
  3. *
  4. * Title:jsPlumb 1.3.2
  5. *
  6. * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
  7. * elements, or VML.
  8. *
  9. * This file contains the jQuery adapter.
  10. *
  11. * Copyright (c) 2010 - 2011 Simon Porritt (http://jsplumb.org)
  12. *
  13. * http://jsplumb.org
  14. * http://code.google.com/p/jsplumb
  15. *
  16. * Triple licensed under the MIT, GPL2 and Beer licenses.
  17. */
  18. /*
  19. * the library specific functions, such as find offset, get id, get attribute, extend etc.
  20. * the full list is:
  21. *
  22. * addClass adds a class to the given element
  23. * animate calls the underlying library's animate functionality
  24. * appendElement appends a child element to a parent element.
  25. * bind binds some event to an element
  26. * dragEvents a dictionary of event names
  27. * extend extend some js object with another. probably not overly necessary; jsPlumb could just do this internally.
  28. * getAttribute gets some attribute from an element
  29. * getDragObject gets the object that is being dragged, by extracting it from the arguments passed to a drag callback
  30. * getDragScope gets the drag scope for a given element.
  31. * getDropScope gets the drop scope for a given element.
  32. * getElementObject turns an id or dom element into an element object of the underlying library's type.
  33. * getOffset gets an element's offset
  34. * getPageXY gets the page event's xy location.
  35. * getParent gets the parent of some element.
  36. * getScrollLeft gets an element's scroll left. TODO: is this actually used? will it be?
  37. * getScrollTop gets an element's scroll top. TODO: is this actually used? will it be?
  38. * getSize gets an element's size.
  39. * getUIPosition gets the position of some element that is currently being dragged, by extracting it from the arguments passed to a drag callback.
  40. * hasClass returns whether or not the given element has the given class.
  41. * initDraggable initializes an element to be draggable
  42. * initDroppable initializes an element to be droppable
  43. * isDragSupported returns whether or not drag is supported for some element.
  44. * isDropSupported returns whether or not drop is supported for some element.
  45. * removeClass removes a class from a given element.
  46. * removeElement removes some element completely from the DOM.
  47. * setAttribute sets an attribute on some element.
  48. * setDraggable sets whether or not some element should be draggable.
  49. * setDragScope sets the drag scope for a given element.
  50. * setOffset sets the offset of some element.
  51. */
  52. (function($) {
  53. //var getBoundingClientRectSupported = "getBoundingClientRect" in document.documentElement;
  54. jsPlumb.CurrentLibrary = {
  55. /**
  56. * adds the given class to the element object.
  57. */
  58. addClass : function(el, clazz) {
  59. el.addClass(clazz);
  60. },
  61. /**
  62. * animates the given element.
  63. */
  64. animate : function(el, properties, options) {
  65. el.animate(properties, options);
  66. },
  67. /**
  68. * appends the given child to the given parent.
  69. */
  70. appendElement : function(child, parent) {
  71. jsPlumb.CurrentLibrary.getElementObject(parent).append(child);
  72. },
  73. /**
  74. * event binding wrapper. it just so happens that jQuery uses 'bind' also. yui3, for example,
  75. * uses 'on'.
  76. */
  77. bind : function(el, event, callback) {
  78. el = jsPlumb.CurrentLibrary.getElementObject(el);
  79. el.bind(event, callback);
  80. },
  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. /**
  89. * wrapper around the library's 'extend' functionality (which it hopefully has.
  90. * otherwise you'll have to do it yourself). perhaps jsPlumb could do this for you
  91. * instead. it's not like its hard.
  92. */
  93. extend : function(o1, o2) {
  94. return $.extend(o1, o2);
  95. },
  96. /**
  97. * gets the named attribute from the given element object.
  98. */
  99. getAttribute : function(el, attName) {
  100. return el.attr(attName);
  101. },
  102. getClientXY : function(eventObject) {
  103. return [eventObject.clientX, eventObject.clientY];
  104. },
  105. getDocumentElement : function() { return document; },
  106. /**
  107. * takes the args passed to an event function and returns you an object representing that which is being dragged.
  108. */
  109. getDragObject : function(eventArgs) {
  110. return eventArgs[1].draggable;
  111. },
  112. getDragScope : function(el) {
  113. return el.draggable("option", "scope");
  114. },
  115. getDropScope : function(el) {
  116. return el.droppable("option", "scope");
  117. },
  118. /**
  119. * gets an "element object" from the given input. this means an object that is used by the
  120. * underlying library on which jsPlumb is running. 'el' may already be one of these objects,
  121. * in which case it is returned as-is. otherwise, 'el' is a String, the library's lookup
  122. * function is used to find the element, using the given String as the element's id.
  123. *
  124. */
  125. getElementObject : function(el) {
  126. return typeof(el)=='string' ? $("#" + el) : $(el);
  127. },
  128. /**
  129. * gets the offset for the element object. this should return a js object like this:
  130. *
  131. * { left:xxx, top: xxx }
  132. */
  133. getOffset : function(el) {
  134. return el.offset();
  135. },
  136. getPageXY : function(eventObject) {
  137. return [eventObject.pageX, eventObject.pageY];
  138. },
  139. getParent : function(el) {
  140. return jsPlumb.CurrentLibrary.getElementObject(el).parent();
  141. },
  142. getScrollLeft : function(el) {
  143. return el.scrollLeft();
  144. },
  145. getScrollTop : function(el) {
  146. return el.scrollTop();
  147. },
  148. /**
  149. * gets the size for the element object, in an array : [ width, height ].
  150. */
  151. getSize : function(el) {
  152. return [el.outerWidth(), el.outerHeight()];
  153. },
  154. /**
  155. * takes the args passed to an event function and returns you an object that gives the
  156. * position of the object being moved, as a js object with the same params as the result of
  157. * getOffset, ie: { left: xxx, top: xxx }.
  158. *
  159. * different libraries have different signatures for their event callbacks.
  160. * see getDragObject as well
  161. */
  162. getUIPosition : function(eventArgs) {
  163. // this code is a workaround for the case that the element being dragged has a margin set on it. jquery UI passes
  164. // in the wrong offset if the element has a margin (it doesn't take the margin into account). the getBoundingClientRect
  165. // method, which is in pretty much all browsers now, reports the right numbers. but it introduces a noticeable lag, which
  166. // i don't like.
  167. /*if ( getBoundingClientRectSupported ) {
  168. var r = eventArgs[1].helper[0].getBoundingClientRect();
  169. return { left : r.left, top: r.top };
  170. } else {*/
  171. var ui = eventArgs[1], _offset = ui.offset;
  172. return _offset || ui.absolutePosition;
  173. //}
  174. },
  175. hasClass : function(el, clazz) {
  176. return el.hasClass(clazz);
  177. },
  178. /**
  179. * initialises the given element to be draggable.
  180. */
  181. initDraggable : function(el, options) {
  182. // remove helper directive if present.
  183. options.helper = null;
  184. options['scope'] = options['scope'] || jsPlumb.Defaults.Scope;
  185. el.draggable(options);
  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. isAlreadyDraggable : function(el) {
  195. el = jsPlumb.CurrentLibrary.getElementObject(el);
  196. return el.hasClass("ui-draggable");
  197. },
  198. /**
  199. * returns whether or not drag is supported (by the library, not whether or not it is disabled) for the given element.
  200. */
  201. isDragSupported : function(el, options) {
  202. return el.draggable;
  203. },
  204. /**
  205. * returns whether or not drop is supported (by the library, not whether or not it is disabled) for the given element.
  206. */
  207. isDropSupported : function(el, options) {
  208. return el.droppable;
  209. },
  210. /**
  211. * removes the given class from the element object.
  212. */
  213. removeClass : function(el, clazz) {
  214. el.removeClass(clazz);
  215. },
  216. removeElement : function(element, parent) {
  217. jsPlumb.CurrentLibrary.getElementObject(element).remove();
  218. },
  219. /**
  220. * sets the named attribute on the given element object.
  221. */
  222. setAttribute : function(el, attName, attValue) {
  223. el.attr(attName, attValue);
  224. },
  225. /**
  226. * sets the draggable state for the given element
  227. */
  228. setDraggable : function(el, draggable) {
  229. el.draggable("option", "disabled", !draggable);
  230. },
  231. /**
  232. * sets the drag scope. probably time for a setDragOption method (roll this and the one above together)
  233. * @param el
  234. * @param scope
  235. */
  236. setDragScope : function(el, scope) {
  237. el.draggable("option", "scope", scope);
  238. },
  239. setOffset : function(el, o) {
  240. jsPlumb.CurrentLibrary.getElementObject(el).offset(o);
  241. }
  242. };
  243. $(document).ready(jsPlumb.init);
  244. })(jQuery);