mxTooltipHandler.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. /**
  6. * Class: mxTooltipHandler
  7. *
  8. * Graph event handler that displays tooltips. <mxGraph.getTooltip> is used to
  9. * get the tooltip for a cell or handle. This handler is built-into
  10. * <mxGraph.tooltipHandler> and enabled using <mxGraph.setTooltips>.
  11. *
  12. * Example:
  13. *
  14. * (code>
  15. * new mxTooltipHandler(graph);
  16. * (end)
  17. *
  18. * Constructor: mxTooltipHandler
  19. *
  20. * Constructs an event handler that displays tooltips with the specified
  21. * delay (in milliseconds). If no delay is specified then a default delay
  22. * of 500 ms (0.5 sec) is used.
  23. *
  24. * Parameters:
  25. *
  26. * graph - Reference to the enclosing <mxGraph>.
  27. * delay - Optional delay in milliseconds.
  28. */
  29. function mxTooltipHandler(graph, delay)
  30. {
  31. if (graph != null)
  32. {
  33. this.graph = graph;
  34. this.delay = delay || 500;
  35. this.graph.addMouseListener(this);
  36. }
  37. };
  38. /**
  39. * Variable: zIndex
  40. *
  41. * Specifies the zIndex for the tooltip and its shadow. Default is 10005.
  42. */
  43. mxTooltipHandler.prototype.zIndex = 10005;
  44. /**
  45. * Variable: graph
  46. *
  47. * Reference to the enclosing <mxGraph>.
  48. */
  49. mxTooltipHandler.prototype.graph = null;
  50. /**
  51. * Variable: delay
  52. *
  53. * Delay to show the tooltip in milliseconds. Default is 500.
  54. */
  55. mxTooltipHandler.prototype.delay = null;
  56. /**
  57. * Variable: ignoreTouchEvents
  58. *
  59. * Specifies if touch and pen events should be ignored. Default is true.
  60. */
  61. mxTooltipHandler.prototype.ignoreTouchEvents = true;
  62. /**
  63. * Variable: hideOnHover
  64. *
  65. * Specifies if the tooltip should be hidden if the mouse is moved over the
  66. * current cell. Default is false.
  67. */
  68. mxTooltipHandler.prototype.hideOnHover = false;
  69. /**
  70. * Variable: destroyed
  71. *
  72. * True if this handler was destroyed using <destroy>.
  73. */
  74. mxTooltipHandler.prototype.destroyed = false;
  75. /**
  76. * Variable: enabled
  77. *
  78. * Specifies if events are handled. Default is true.
  79. */
  80. mxTooltipHandler.prototype.enabled = true;
  81. /**
  82. * Function: isEnabled
  83. *
  84. * Returns true if events are handled. This implementation
  85. * returns <enabled>.
  86. */
  87. mxTooltipHandler.prototype.isEnabled = function()
  88. {
  89. return this.enabled;
  90. };
  91. /**
  92. * Function: setEnabled
  93. *
  94. * Enables or disables event handling. This implementation
  95. * updates <enabled>.
  96. */
  97. mxTooltipHandler.prototype.setEnabled = function(enabled)
  98. {
  99. this.enabled = enabled;
  100. };
  101. /**
  102. * Function: isHideOnHover
  103. *
  104. * Returns <hideOnHover>.
  105. */
  106. mxTooltipHandler.prototype.isHideOnHover = function()
  107. {
  108. return this.hideOnHover;
  109. };
  110. /**
  111. * Function: setHideOnHover
  112. *
  113. * Sets <hideOnHover>.
  114. */
  115. mxTooltipHandler.prototype.setHideOnHover = function(value)
  116. {
  117. this.hideOnHover = value;
  118. };
  119. /**
  120. * Function: init
  121. *
  122. * Initializes the DOM nodes required for this tooltip handler.
  123. */
  124. mxTooltipHandler.prototype.init = function()
  125. {
  126. if (document.body != null)
  127. {
  128. this.div = document.createElement('div');
  129. this.div.className = 'mxTooltip';
  130. this.div.style.visibility = 'hidden';
  131. document.body.appendChild(this.div);
  132. mxEvent.addGestureListeners(this.div, mxUtils.bind(this, function(evt)
  133. {
  134. var source = mxEvent.getSource(evt);
  135. if (source.nodeName != 'A')
  136. {
  137. this.hideTooltip();
  138. }
  139. }));
  140. }
  141. };
  142. /**
  143. * Function: getStateForEvent
  144. *
  145. * Returns the <mxCellState> to be used for showing a tooltip for this event.
  146. */
  147. mxTooltipHandler.prototype.getStateForEvent = function(me)
  148. {
  149. return me.getState();
  150. };
  151. /**
  152. * Function: mouseDown
  153. *
  154. * Handles the event by initiating a rubberband selection. By consuming the
  155. * event all subsequent events of the gesture are redirected to this
  156. * handler.
  157. */
  158. mxTooltipHandler.prototype.mouseDown = function(sender, me)
  159. {
  160. this.reset(me, false);
  161. this.hideTooltip();
  162. };
  163. /**
  164. * Function: mouseMove
  165. *
  166. * Handles the event by updating the rubberband selection.
  167. */
  168. mxTooltipHandler.prototype.mouseMove = function(sender, me)
  169. {
  170. if (me.getX() != this.lastX || me.getY() != this.lastY)
  171. {
  172. this.reset(me, true);
  173. var state = this.getStateForEvent(me);
  174. if (this.isHideOnHover() || state != this.state || (me.getSource() != this.node &&
  175. (!this.stateSource || (state != null && this.stateSource ==
  176. (me.isSource(state.shape) || !me.isSource(state.text))))))
  177. {
  178. this.hideTooltip();
  179. }
  180. }
  181. this.lastX = me.getX();
  182. this.lastY = me.getY();
  183. };
  184. /**
  185. * Function: mouseUp
  186. *
  187. * Handles the event by resetting the tooltip timer or hiding the existing
  188. * tooltip.
  189. */
  190. mxTooltipHandler.prototype.mouseUp = function(sender, me)
  191. {
  192. this.reset(me, true);
  193. this.hideTooltip();
  194. };
  195. /**
  196. * Function: resetTimer
  197. *
  198. * Resets the timer.
  199. */
  200. mxTooltipHandler.prototype.resetTimer = function()
  201. {
  202. if (this.thread != null)
  203. {
  204. window.clearTimeout(this.thread);
  205. this.thread = null;
  206. }
  207. };
  208. /**
  209. * Function: reset
  210. *
  211. * Resets and/or restarts the timer to trigger the display of the tooltip.
  212. */
  213. mxTooltipHandler.prototype.reset = function(me, restart, state)
  214. {
  215. if (!this.ignoreTouchEvents || mxEvent.isMouseEvent(me.getEvent()))
  216. {
  217. this.resetTimer();
  218. state = (state != null) ? state : this.getStateForEvent(me);
  219. if (restart && this.isEnabled() && state != null && (this.div == null ||
  220. this.div.style.visibility == 'hidden'))
  221. {
  222. var node = me.getSource();
  223. var x = me.getX();
  224. var y = me.getY();
  225. var stateSource = me.isSource(state.shape) || me.isSource(state.text);
  226. this.thread = window.setTimeout(mxUtils.bind(this, function()
  227. {
  228. if (!this.graph.isEditing() && !this.graph.popupMenuHandler.isMenuShowing() && !this.graph.isMouseDown)
  229. {
  230. // Uses information from inside event cause using the event at
  231. // this (delayed) point in time is not possible in IE as it no
  232. // longer contains the required information (member not found)
  233. var tip = this.graph.getTooltip(state, node, x, y);
  234. this.show(tip, x, y);
  235. this.state = state;
  236. this.node = node;
  237. this.stateSource = stateSource;
  238. }
  239. }), this.delay);
  240. }
  241. }
  242. };
  243. /**
  244. * Function: hide
  245. *
  246. * Hides the tooltip and resets the timer.
  247. */
  248. mxTooltipHandler.prototype.hide = function()
  249. {
  250. this.resetTimer();
  251. this.hideTooltip();
  252. };
  253. /**
  254. * Function: hideTooltip
  255. *
  256. * Hides the tooltip.
  257. */
  258. mxTooltipHandler.prototype.hideTooltip = function()
  259. {
  260. if (this.div != null)
  261. {
  262. this.div.style.visibility = 'hidden';
  263. this.div.innerHTML = '';
  264. }
  265. };
  266. /**
  267. * Function: show
  268. *
  269. * Shows the tooltip for the specified cell and optional index at the
  270. * specified location (with a vertical offset of 10 pixels).
  271. */
  272. mxTooltipHandler.prototype.show = function(tip, x, y)
  273. {
  274. if (!this.destroyed && tip != null && tip.length > 0)
  275. {
  276. // Initializes the DOM nodes if required
  277. if (this.div == null)
  278. {
  279. this.init();
  280. }
  281. var origin = mxUtils.getScrollOrigin();
  282. this.div.style.zIndex = this.zIndex;
  283. this.div.style.left = (x + origin.x) + 'px';
  284. this.div.style.top = (y + mxConstants.TOOLTIP_VERTICAL_OFFSET +
  285. origin.y) + 'px';
  286. if (!mxUtils.isNode(tip))
  287. {
  288. this.div.innerHTML = tip.replace(/\n/g, '<br>');
  289. }
  290. else
  291. {
  292. this.div.innerHTML = '';
  293. this.div.appendChild(tip);
  294. }
  295. this.div.style.visibility = '';
  296. mxUtils.fit(this.div);
  297. }
  298. };
  299. /**
  300. * Function: destroy
  301. *
  302. * Destroys the handler and all its resources and DOM nodes.
  303. */
  304. mxTooltipHandler.prototype.destroy = function()
  305. {
  306. if (!this.destroyed)
  307. {
  308. this.graph.removeMouseListener(this);
  309. mxEvent.release(this.div);
  310. if (this.div != null && this.div.parentNode != null)
  311. {
  312. this.div.parentNode.removeChild(this.div);
  313. }
  314. this.destroyed = true;
  315. this.div = null;
  316. }
  317. };
  318. __mxOutput.mxTooltipHandler = typeof mxTooltipHandler !== 'undefined' ? mxTooltipHandler : undefined;