yui.jsPlumb-1.3.6-RC1.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. /*
  2. * jsPlumb
  3. *
  4. * Title:jsPlumb 1.3.6
  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 YUI3 adapter.
  10. *
  11. * Copyright (c) 2010 - 2012 Simon Porritt (http://jsplumb.org)
  12. *
  13. * http://jsplumb.org
  14. * http://github.com/sporritt/jsplumb
  15. * http://code.google.com/p/jsplumb
  16. *
  17. * Dual licensed under the MIT and GPL2 licenses.
  18. */
  19. /**
  20. * addClass adds a class to the given element
  21. * animate calls the underlying library's animate functionality
  22. * appendElement appends a child element to a parent element.
  23. * bind binds some event to an element
  24. * dragEvents a dictionary of event names
  25. * extend extend some js object with another. probably not overly necessary; jsPlumb could just do this internally.
  26. * getAttribute gets some attribute from an element
  27. * getDragObject gets the object that is being dragged, by extracting it from the arguments passed to a drag callback
  28. * getDragScope gets the drag scope for a given element.
  29. * getElementObject turns an id or dom element into an element object of the underlying library's type.
  30. * getOffset gets an element's offset
  31. * getScrollLeft gets an element's scroll left. TODO: is this actually used? will it be?
  32. * getScrollTop gets an element's scroll top. TODO: is this actually used? will it be?
  33. * getSize gets an element's size.
  34. * getUIPosition gets the position of some element that is currently being dragged, by extracting it from the arguments passed to a drag callback.
  35. * initDraggable initializes an element to be draggable
  36. * initDroppable initializes an element to be droppable
  37. * isDragSupported returns whether or not drag is supported for some element.
  38. * isDropSupported returns whether or not drop is supported for some element.
  39. * removeClass removes a class from a given element.
  40. * removeElement removes some element completely from the DOM.
  41. * setAttribute sets an attribute on some element.
  42. * setDraggable sets whether or not some element should be draggable.
  43. * setDragScope sets the drag scope for a given element.
  44. * setOffset sets the offset of some element.
  45. */
  46. (function() {
  47. if (!Array.prototype.indexOf) {
  48. Array.prototype.indexOf = function( v, b, s ) {
  49. for( var i = +b || 0, l = this.length; i < l; i++ ) {
  50. if( this[i]===v || s && this[i]==v ) { return i; }
  51. }
  52. return -1;
  53. };
  54. }
  55. var Y;
  56. YUI().use('node', 'dd', 'anim', 'node-event-simulate', function(_Y) {
  57. Y = _Y;
  58. Y.on("domready", function() { jsPlumb.init(); });
  59. });
  60. /**
  61. * adds the given value to the given list, with the given scope. creates the scoped list
  62. * if necessary.
  63. * used by initDraggable and initDroppable.
  64. */
  65. var _add = function(list, scope, value) {
  66. var l = list[scope];
  67. if (!l) {
  68. l = [];
  69. list[scope] = l;
  70. }
  71. l.push(value);
  72. },
  73. ddEvents = [ "drag:mouseDown", "drag:afterMouseDown", "drag:mouseup",
  74. "drag:align", "drag:removeHandle", "drag:addHandle", "drag:removeInvalid", "drag:addInvalid",
  75. "drag:start", "drag:end", "drag:drag", "drag:over", "drag:enter",
  76. "drag:exit", "drag:drophit", "drag:dropmiss", "drop:over", "drop:enter", "drop:exit", "drop:hit"
  77. ],
  78. animEvents = [ "tween" ],
  79. /**
  80. * helper function to curry callbacks for some element.
  81. */
  82. _wrapper = function(fn) {
  83. return function() {
  84. try {
  85. return fn.apply(this, arguments);
  86. }
  87. catch (e) { }
  88. };
  89. },
  90. /**
  91. * extracts options from the given options object, leaving out event handlers.
  92. */
  93. _getDDOptions = function(options) {
  94. var o = {};
  95. for (var i in options) if (ddEvents.indexOf(i) == -1) o[i] = options[i];
  96. return o;
  97. },
  98. /**
  99. * attaches all event handlers found in options to the given dragdrop object, and registering
  100. * the given el as the element of interest.
  101. */
  102. _attachListeners = function(dd, options, eventList) {
  103. for (var ev in options) {
  104. if (eventList.indexOf(ev) != -1) {
  105. var w = _wrapper(options[ev]);
  106. dd.on(ev, w);
  107. }
  108. }
  109. },
  110. _droppables = {},
  111. _droppableOptions = {},
  112. _draggablesByScope = {},
  113. _draggablesById = {},
  114. _droppableScopesById = {},
  115. _checkHover = function(el, entering) {
  116. if (el) {
  117. var id = el.get("id");
  118. if (id) {
  119. var options = _droppableOptions[id];
  120. if (options) {
  121. if (options['hoverClass']) {
  122. if (entering) el.addClass(options['hoverClass']);
  123. else el.removeClass(options['hoverClass']);
  124. }
  125. }
  126. }
  127. }
  128. },
  129. _lastDragObject = null,
  130. _extend = function(o1, o2) {
  131. for (var i in o2)
  132. o1[i] = o2[i];
  133. return o1;
  134. },
  135. _getAttribute = function(el, attributeId) {
  136. return el.getAttribute(attributeId);
  137. },
  138. _getElementObject = function(el) {
  139. if (el == null) return null;
  140. var eee = null;
  141. eee = typeof el == 'string' ? Y.one('#' + el) : el._node ? el : Y.one(el);
  142. return eee;
  143. };
  144. jsPlumb.CurrentLibrary = {
  145. addClass : function(el, clazz) {
  146. jsPlumb.CurrentLibrary.getElementObject(el).addClass(clazz);
  147. },
  148. /**
  149. * animates the given element.
  150. */
  151. animate : function(el, properties, options) {
  152. var o = _extend({node:el, to:properties}, options);
  153. var id = _getAttribute(el, "id");
  154. o["tween"] = jsPlumb.wrap(properties["tween"], function() {
  155. jsPlumb.repaint(id);
  156. });
  157. var a = new Y.Anim(o);
  158. _attachListeners(a, o, animEvents);
  159. a.run();
  160. },
  161. appendElement : function(child, parent) {
  162. _getElementObject (parent).append(child);
  163. },
  164. /**
  165. * event binding wrapper.
  166. */
  167. bind : function(el, event, callback) {
  168. _getElementObject(el).on(event, callback);
  169. },
  170. dragEvents : {
  171. "start":"drag:start", "stop":"drag:end", "drag":"drag:drag", "step":"step",
  172. "over":"drop:enter", "out":"drop:exit", "drop":"drop:hit"
  173. },
  174. extend : _extend,
  175. getAttribute : _getAttribute,
  176. getClientXY : function(eventObject) {
  177. return [eventObject.clientX, eventObject.clientY];
  178. },
  179. /**
  180. * takes the args passed to an event function and returns you an object representing that which is being dragged.
  181. */
  182. getDragObject : function(eventArgs) {
  183. // this is a workaround for the unfortunate fact that in YUI3, the 'drop:exit' event does
  184. // not contain a reference to the drag that just exited. single-threaded js to the
  185. // rescue: we'll just keep it for ourselves.
  186. if (eventArgs[0].drag) _lastDragObject = eventArgs[0].drag.el;
  187. return _lastDragObject;
  188. },
  189. getDragScope : function(el) {
  190. var id = jsPlumb.getId(el);
  191. var dd = _draggablesById[id];
  192. return dd.scope;
  193. },
  194. getDropScope : function(el) {
  195. var id = jsPlumb.getId(el);
  196. return _droppableScopesById[id];
  197. },
  198. getDOMElement : function(el) {
  199. if (typeof(el) == "String")
  200. return document.getElementById(el);
  201. else if (el._node)
  202. return el._node;
  203. else return el;
  204. },
  205. getElementObject : _getElementObject,
  206. getOffset : function(el) {
  207. var o = Y.DOM.getXY(el._node);
  208. return {left:o[0], top:o[1]};
  209. },
  210. getPageXY : function(eventObject) {
  211. return [eventObject.pageX, eventObject.pageY];
  212. },
  213. getParent : function(el) {
  214. return jsPlumb.CurrentLibrary.getElementObject(el).get("parentNode");
  215. },
  216. getScrollLeft : function(el) {
  217. return 0;
  218. },
  219. getScrollTop : function(el) {
  220. return 0;
  221. },
  222. getSelector : function(spec) {
  223. var s = Y.all(spec);
  224. return s && s ._nodes ? s._nodes : [];
  225. },
  226. getSize : function(el) {
  227. return [ el._node.offsetWidth, el._node.offsetHeight ];
  228. },
  229. getTagName : function(el) {
  230. var e = jsPlumb.CurrentLibrary.getElementObject(el);
  231. return e != null && e._node != null ? e._node.tagName : null;
  232. },
  233. getUIPosition : function(args) {
  234. var n = args[0].currentTarget.el._node,
  235. o = Y.DOM.getXY(n);
  236. return {left:o[0], top:o[1]};
  237. },
  238. hasClass : function(el, clazz) {
  239. return el.hasClass(clazz);
  240. },
  241. initDraggable : function(el, options) {
  242. var _opts = _getDDOptions(options);
  243. var id = jsPlumb.getId(el);
  244. _opts.node = "#" + id;
  245. var dd = new Y.DD.Drag(_opts);
  246. dd.el = el;
  247. var scope = options['scope'] || jsPlumb.Defaults.Scope;
  248. dd.scope = scope;
  249. _draggablesById[id] = dd;
  250. _add(_draggablesByScope, scope, dd);
  251. _attachListeners(dd, options, ddEvents);
  252. },
  253. initDroppable : function(el, options) {
  254. var _opts = _getDDOptions(options);
  255. var id = jsPlumb.getId(el);
  256. _opts.node = "#" + id;
  257. var dd = new Y.DD.Drop(_opts);
  258. _droppableOptions[id] = options;
  259. options = _extend({}, options);
  260. var scope = options['scope'] || jsPlumb.Defaults.Scope;
  261. _droppableScopesById[id] = scope;
  262. options["drop:enter"] = jsPlumb.wrap(options["drop:enter"], function(e) {
  263. if (e.drag.scope !== scope) return true;
  264. _checkHover(el, true);
  265. }, true);
  266. options["drop:exit"] = jsPlumb.wrap(options["drop:exit"], function(e) {
  267. _checkHover(el, false);
  268. });
  269. options["drop:hit"] = jsPlumb.wrap(options["drop:hit"], function(e) {
  270. if (e.drag.scope !== scope) return true;
  271. _checkHover(el, false);
  272. }, true);
  273. _attachListeners(dd, options, ddEvents);
  274. },
  275. isAlreadyDraggable : function(el) {
  276. el = _getElementObject(el);
  277. return el.hasClass("yui3-dd-draggable");
  278. },
  279. isDragSupported : function(el) { return true; },
  280. isDropSupported : function(el) { return true; },
  281. removeClass : function(el, clazz) {
  282. jsPlumb.CurrentLibrary.getElementObject(el).removeClass(clazz);
  283. },
  284. removeElement : function(el) { _getElementObject(el).remove(); },
  285. setAttribute : function(el, attributeName, attributeValue) {
  286. el.setAttribute(attributeName, attributeValue);
  287. },
  288. /**
  289. * sets the draggable state for the given element
  290. */
  291. setDraggable : function(el, draggable) {
  292. var id = jsPlumb.getId(el);
  293. var dd = _draggablesById[id];
  294. if (dd) dd.set("lock", !draggable);
  295. },
  296. setDragScope : function(el, scope) {
  297. var id = jsPlumb.getId(el);
  298. var dd = _draggablesById[id];
  299. if (dd) dd.scope = scope;
  300. },
  301. setOffset : function(el, o) {
  302. el = _getElementObject(el);
  303. el.set("top", o.top);
  304. el.set("left", o.left);
  305. },
  306. stopDrag : function() {
  307. Y.DD.DDM.stopDrag();
  308. },
  309. trigger : function(el, event, originalEvent) {
  310. originalEvent.stopPropagation();
  311. _getElementObject(el).simulate(event, {
  312. pageX:originalEvent.pageX,
  313. pageY:originalEvent.pageY,
  314. clientX:originalEvent.clientX,
  315. clientY:originalEvent.clientY
  316. });
  317. },
  318. /**
  319. * event unbinding wrapper.
  320. */
  321. unbind : function(el, event, callback) {
  322. _getElementObject(el).detach(event, callback);
  323. }
  324. };
  325. })();