mxConstraintHandler.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. /**
  6. * Class: mxConstraintHandler
  7. *
  8. * Handles constraints on connection targets. This class is in charge of
  9. * showing fixed points when the mouse is over a vertex and handles constraints
  10. * to establish new connections.
  11. *
  12. * Constructor: mxConstraintHandler
  13. *
  14. * Constructs an new constraint handler.
  15. *
  16. * Parameters:
  17. *
  18. * graph - Reference to the enclosing <mxGraph>.
  19. * factoryMethod - Optional function to create the edge. The function takes
  20. * the source and target <mxCell> as the first and second argument and
  21. * returns the <mxCell> that represents the new edge.
  22. */
  23. function mxConstraintHandler(graph)
  24. {
  25. this.graph = graph;
  26. // Adds a graph model listener to update the current focus on changes
  27. this.resetHandler = mxUtils.bind(this, function(sender, evt)
  28. {
  29. if (this.currentFocus != null && this.graph.view.getState(this.currentFocus.cell) == null)
  30. {
  31. this.reset();
  32. }
  33. else
  34. {
  35. this.redraw();
  36. }
  37. });
  38. this.graph.model.addListener(mxEvent.CHANGE, this.resetHandler);
  39. this.graph.view.addListener(mxEvent.SCALE_AND_TRANSLATE, this.resetHandler);
  40. this.graph.view.addListener(mxEvent.TRANSLATE, this.resetHandler);
  41. this.graph.view.addListener(mxEvent.SCALE, this.resetHandler);
  42. this.graph.addListener(mxEvent.ROOT, this.resetHandler);
  43. };
  44. /**
  45. * Variable: pointImage
  46. *
  47. * <mxImage> to be used as the image for fixed connection points.
  48. */
  49. mxConstraintHandler.prototype.pointImage = new mxImage(mxClient.imageBasePath + '/point.gif', 5, 5);
  50. /**
  51. * Variable: graph
  52. *
  53. * Reference to the enclosing <mxGraph>.
  54. */
  55. mxConstraintHandler.prototype.graph = null;
  56. /**
  57. * Variable: enabled
  58. *
  59. * Specifies if events are handled. Default is true.
  60. */
  61. mxConstraintHandler.prototype.enabled = true;
  62. /**
  63. * Variable: highlightColor
  64. *
  65. * Specifies the color for the highlight. Default is <mxConstants.DEFAULT_VALID_COLOR>.
  66. */
  67. mxConstraintHandler.prototype.highlightColor = mxConstants.DEFAULT_VALID_COLOR;
  68. /**
  69. * Function: isEnabled
  70. *
  71. * Returns true if events are handled. This implementation
  72. * returns <enabled>.
  73. */
  74. mxConstraintHandler.prototype.isEnabled = function()
  75. {
  76. return this.enabled;
  77. };
  78. /**
  79. * Function: setEnabled
  80. *
  81. * Enables or disables event handling. This implementation
  82. * updates <enabled>.
  83. *
  84. * Parameters:
  85. *
  86. * enabled - Boolean that specifies the new enabled state.
  87. */
  88. mxConstraintHandler.prototype.setEnabled = function(enabled)
  89. {
  90. this.enabled = enabled;
  91. };
  92. /**
  93. * Function: reset
  94. *
  95. * Resets the state of this handler.
  96. */
  97. mxConstraintHandler.prototype.reset = function()
  98. {
  99. if (this.focusIcons != null)
  100. {
  101. for (var i = 0; i < this.focusIcons.length; i++)
  102. {
  103. this.focusIcons[i].destroy();
  104. }
  105. this.focusIcons = null;
  106. }
  107. if (this.focusHighlight != null)
  108. {
  109. this.focusHighlight.destroy();
  110. this.focusHighlight = null;
  111. }
  112. this.currentConstraint = null;
  113. this.currentFocusArea = null;
  114. this.currentPoint = null;
  115. this.currentFocus = null;
  116. this.focusPoints = null;
  117. };
  118. /**
  119. * Function: getTolerance
  120. *
  121. * Returns the tolerance to be used for intersecting connection points. This
  122. * implementation returns <mxGraph.tolerance>.
  123. *
  124. * Parameters:
  125. *
  126. * me - <mxMouseEvent> whose tolerance should be returned.
  127. */
  128. mxConstraintHandler.prototype.getTolerance = function(me)
  129. {
  130. return this.graph.getTolerance();
  131. };
  132. /**
  133. * Function: getImageForConstraint
  134. *
  135. * Returns the tolerance to be used for intersecting connection points.
  136. */
  137. mxConstraintHandler.prototype.getImageForConstraint = function(state, constraint, point)
  138. {
  139. return this.pointImage;
  140. };
  141. /**
  142. * Function: isEventIgnored
  143. *
  144. * Returns true if the given <mxMouseEvent> should be ignored in <update>. This
  145. * implementation always returns false.
  146. */
  147. mxConstraintHandler.prototype.isEventIgnored = function(me, source)
  148. {
  149. return false;
  150. };
  151. /**
  152. * Function: isStateIgnored
  153. *
  154. * Returns true if the given state should be ignored. This always returns false.
  155. */
  156. mxConstraintHandler.prototype.isStateIgnored = function(state, source)
  157. {
  158. return false;
  159. };
  160. /**
  161. * Function: destroyIcons
  162. *
  163. * Destroys the <focusIcons> if they exist.
  164. */
  165. mxConstraintHandler.prototype.destroyIcons = function()
  166. {
  167. if (this.focusIcons != null)
  168. {
  169. for (var i = 0; i < this.focusIcons.length; i++)
  170. {
  171. this.focusIcons[i].destroy();
  172. }
  173. this.focusIcons = null;
  174. this.focusPoints = null;
  175. }
  176. };
  177. /**
  178. * Function: destroyFocusHighlight
  179. *
  180. * Destroys the <focusHighlight> if one exists.
  181. */
  182. mxConstraintHandler.prototype.destroyFocusHighlight = function()
  183. {
  184. if (this.focusHighlight != null)
  185. {
  186. this.focusHighlight.destroy();
  187. this.focusHighlight = null;
  188. }
  189. };
  190. /**
  191. * Function: isKeepFocusEvent
  192. *
  193. * Returns true if the current focused state should not be changed for the given event.
  194. * This returns true if shift is pressed and alt is not pressed.
  195. */
  196. mxConstraintHandler.prototype.isKeepFocusEvent = function(me)
  197. {
  198. return mxEvent.isShiftDown(me.getEvent()) && !mxEvent.isAltDown(me.getEvent());
  199. };
  200. /**
  201. * Function: getCellForEvent
  202. *
  203. * Returns the cell for the given event.
  204. */
  205. mxConstraintHandler.prototype.getCellForEvent = function(me, point)
  206. {
  207. var cell = me.getCell();
  208. // Gets cell under actual point if different from event location
  209. if (cell == null && point != null && (me.getGraphX() != point.x || me.getGraphY() != point.y))
  210. {
  211. cell = this.graph.getCellAt(point.x, point.y);
  212. }
  213. // Uses connectable parent vertex if one exists
  214. if (cell != null && !this.graph.isCellConnectable(cell))
  215. {
  216. var parent = this.graph.getModel().getParent(cell);
  217. if (this.graph.getModel().isVertex(parent) && this.graph.isCellConnectable(parent))
  218. {
  219. cell = parent;
  220. }
  221. }
  222. return (this.graph.isCellLocked(cell)) ? null : cell;
  223. };
  224. /**
  225. * Function: update
  226. *
  227. * Updates the state of this handler based on the given <mxMouseEvent>.
  228. * Source is a boolean indicating if the cell is a source or target.
  229. */
  230. mxConstraintHandler.prototype.update = function(me, source, existingEdge, point)
  231. {
  232. if (this.isEnabled() && !this.isEventIgnored(me))
  233. {
  234. // Lazy installation of mouseleave handler
  235. if (this.mouseleaveHandler == null && this.graph.container != null)
  236. {
  237. this.mouseleaveHandler = mxUtils.bind(this, function()
  238. {
  239. this.reset();
  240. });
  241. mxEvent.addListener(this.graph.container, 'mouseleave', this.resetHandler);
  242. }
  243. var tol = this.getTolerance(me);
  244. var x = (point != null) ? point.x : me.getGraphX();
  245. var y = (point != null) ? point.y : me.getGraphY();
  246. var grid = new mxRectangle(x - tol, y - tol, 2 * tol, 2 * tol);
  247. var mouse = new mxRectangle(me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol);
  248. var state = this.graph.view.getState(this.getCellForEvent(me, point));
  249. // Keeps focus icons visible while over vertex bounds and no other cell under mouse or shift is pressed
  250. if (!this.isKeepFocusEvent(me) && (this.currentFocusArea == null || this.currentFocus == null ||
  251. (state != null) || !this.graph.getModel().isVertex(this.currentFocus.cell) ||
  252. !mxUtils.intersects(this.currentFocusArea, mouse)) && (state != this.currentFocus))
  253. {
  254. this.currentFocusArea = null;
  255. this.currentFocus = null;
  256. this.setFocus(me, state, source);
  257. }
  258. this.currentConstraint = null;
  259. this.currentPoint = null;
  260. var minDistSq = null;
  261. if (this.focusIcons != null && this.constraints != null &&
  262. (state == null || this.currentFocus == state))
  263. {
  264. var cx = mouse.getCenterX();
  265. var cy = mouse.getCenterY();
  266. for (var i = 0; i < this.focusIcons.length; i++)
  267. {
  268. var dx = cx - this.focusIcons[i].bounds.getCenterX();
  269. var dy = cy - this.focusIcons[i].bounds.getCenterY();
  270. var tmp = dx * dx + dy * dy;
  271. if ((this.intersects(this.focusIcons[i], mouse, source, existingEdge) || (point != null &&
  272. this.intersects(this.focusIcons[i], grid, source, existingEdge))) &&
  273. (minDistSq == null || tmp < minDistSq))
  274. {
  275. this.currentConstraint = this.constraints[i];
  276. this.currentPoint = this.focusPoints[i];
  277. minDistSq = tmp;
  278. var tmp = this.focusIcons[i].bounds.clone();
  279. tmp.grow(mxConstants.HIGHLIGHT_SIZE + 1);
  280. tmp.width -= 1;
  281. tmp.height -= 1;
  282. if (this.focusHighlight == null)
  283. {
  284. var hl = this.createHighlightShape();
  285. hl.dialect = mxConstants.DIALECT_SVG;
  286. hl.pointerEvents = false;
  287. hl.init(this.graph.getView().getOverlayPane());
  288. this.focusHighlight = hl;
  289. var getState = mxUtils.bind(this, function()
  290. {
  291. return (this.currentFocus != null) ? this.currentFocus : state;
  292. });
  293. mxEvent.redirectMouseEvents(hl.node, this.graph, getState);
  294. }
  295. this.focusHighlight.bounds = tmp;
  296. this.focusHighlight.redraw();
  297. }
  298. }
  299. }
  300. if (this.currentConstraint == null)
  301. {
  302. this.destroyFocusHighlight();
  303. }
  304. }
  305. else
  306. {
  307. this.currentConstraint = null;
  308. this.currentFocus = null;
  309. this.currentPoint = null;
  310. }
  311. };
  312. /**
  313. * Function: redraw
  314. *
  315. * Transfers the focus to the given state as a source or target terminal. If
  316. * the handler is not enabled then the outline is painted, but the constraints
  317. * are ignored.
  318. */
  319. mxConstraintHandler.prototype.redraw = function()
  320. {
  321. if (this.currentFocus != null && this.constraints != null && this.focusIcons != null)
  322. {
  323. var state = this.graph.view.getState(this.currentFocus.cell);
  324. this.currentFocus = state;
  325. this.currentFocusArea = new mxRectangle(state.x, state.y, state.width, state.height);
  326. for (var i = 0; i < this.constraints.length; i++)
  327. {
  328. var cp = this.graph.getConnectionPoint(state, this.constraints[i]);
  329. var img = this.getImageForConstraint(state, this.constraints[i], cp);
  330. var bounds = new mxRectangle(Math.round(cp.x - img.width / 2),
  331. Math.round(cp.y - img.height / 2), img.width, img.height);
  332. this.focusIcons[i].bounds = bounds;
  333. this.focusIcons[i].redraw();
  334. this.currentFocusArea.add(this.focusIcons[i].bounds);
  335. this.focusPoints[i] = cp;
  336. }
  337. }
  338. };
  339. /**
  340. * Function: setFocus
  341. *
  342. * Transfers the focus to the given state as a source or target terminal. If
  343. * the handler is not enabled then the outline is painted, but the constraints
  344. * are ignored.
  345. */
  346. mxConstraintHandler.prototype.setFocus = function(me, state, source)
  347. {
  348. this.constraints = (state != null && !this.isStateIgnored(state, source) &&
  349. this.graph.isCellConnectable(state.cell)) ? ((this.isEnabled()) ?
  350. (this.graph.getAllConnectionConstraints(state, source) || []) : []) : null;
  351. // Only uses cells which have constraints
  352. if (this.constraints != null)
  353. {
  354. this.currentFocus = state;
  355. this.currentFocusArea = new mxRectangle(state.x, state.y, state.width, state.height);
  356. if (this.focusIcons != null)
  357. {
  358. for (var i = 0; i < this.focusIcons.length; i++)
  359. {
  360. this.focusIcons[i].destroy();
  361. }
  362. this.focusIcons = null;
  363. this.focusPoints = null;
  364. }
  365. this.focusPoints = [];
  366. this.focusIcons = [];
  367. for (var i = 0; i < this.constraints.length; i++)
  368. {
  369. var cp = this.graph.getConnectionPoint(state, this.constraints[i]);
  370. var img = this.getImageForConstraint(state, this.constraints[i], cp);
  371. var src = img.src;
  372. var bounds = new mxRectangle(Math.round(cp.x - img.width / 2),
  373. Math.round(cp.y - img.height / 2), img.width, img.height);
  374. var icon = new mxImageShape(bounds, src);
  375. icon.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ?
  376. mxConstants.DIALECT_MIXEDHTML : mxConstants.DIALECT_SVG;
  377. icon.preserveImageAspect = false;
  378. icon.init(this.graph.getView().getDecoratorPane());
  379. // Move the icon behind all other overlays
  380. if (icon.node.previousSibling != null)
  381. {
  382. icon.node.parentNode.insertBefore(icon.node, icon.node.parentNode.firstChild);
  383. }
  384. var getState = mxUtils.bind(this, function()
  385. {
  386. return (this.currentFocus != null) ? this.currentFocus : state;
  387. });
  388. icon.redraw();
  389. mxEvent.redirectMouseEvents(icon.node, this.graph, getState);
  390. this.currentFocusArea.add(icon.bounds);
  391. this.focusIcons.push(icon);
  392. this.focusPoints.push(cp);
  393. }
  394. this.currentFocusArea.grow(this.getTolerance(me));
  395. }
  396. else
  397. {
  398. this.destroyIcons();
  399. this.destroyFocusHighlight();
  400. }
  401. };
  402. /**
  403. * Function: createHighlightShape
  404. *
  405. * Create the shape used to paint the highlight.
  406. *
  407. * Returns true if the given icon intersects the given point.
  408. */
  409. mxConstraintHandler.prototype.createHighlightShape = function()
  410. {
  411. var hl = new mxRectangleShape(null, this.highlightColor, this.highlightColor, mxConstants.HIGHLIGHT_STROKEWIDTH);
  412. hl.opacity = mxConstants.HIGHLIGHT_OPACITY;
  413. return hl;
  414. };
  415. /**
  416. * Function: intersects
  417. *
  418. * Returns true if the given icon intersects the given rectangle.
  419. */
  420. mxConstraintHandler.prototype.intersects = function(icon, mouse, source, existingEdge)
  421. {
  422. return mxUtils.intersects(icon.bounds, mouse);
  423. };
  424. /**
  425. * Function: destroy
  426. *
  427. * Destroy this handler.
  428. */
  429. mxConstraintHandler.prototype.destroy = function()
  430. {
  431. this.reset();
  432. if (this.resetHandler != null)
  433. {
  434. this.graph.model.removeListener(this.resetHandler);
  435. this.graph.view.removeListener(this.resetHandler);
  436. this.graph.removeListener(this.resetHandler);
  437. this.resetHandler = null;
  438. }
  439. if (this.mouseleaveHandler != null && this.graph.container != null)
  440. {
  441. mxEvent.removeListener(this.graph.container, 'mouseleave', this.mouseleaveHandler);
  442. this.mouseleaveHandler = null;
  443. }
  444. };