vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

710 lines
22 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. let util = require('../../util');
  2. import NavigationHandler from './components/NavigationHandler'
  3. import Popup from './components/Popup'
  4. class InteractionHandler {
  5. constructor(body, canvas, selectionHandler) {
  6. this.body = body;
  7. this.canvas = canvas;
  8. this.selectionHandler = selectionHandler;
  9. this.navigationHandler = new NavigationHandler(body,canvas);
  10. // bind the events from hammer to functions in this object
  11. this.body.eventListeners.onTap = this.onTap.bind(this);
  12. this.body.eventListeners.onTouch = this.onTouch.bind(this);
  13. this.body.eventListeners.onDoubleTap = this.onDoubleTap.bind(this);
  14. this.body.eventListeners.onHold = this.onHold.bind(this);
  15. this.body.eventListeners.onDragStart = this.onDragStart.bind(this);
  16. this.body.eventListeners.onDrag = this.onDrag.bind(this);
  17. this.body.eventListeners.onDragEnd = this.onDragEnd.bind(this);
  18. this.body.eventListeners.onMouseWheel = this.onMouseWheel.bind(this);
  19. this.body.eventListeners.onPinch = this.onPinch.bind(this);
  20. this.body.eventListeners.onMouseMove = this.onMouseMove.bind(this);
  21. this.body.eventListeners.onRelease = this.onRelease.bind(this);
  22. this.body.eventListeners.onContext = this.onContext.bind(this);
  23. this.touchTime = 0;
  24. this.drag = {};
  25. this.pinch = {};
  26. this.popup = undefined;
  27. this.popupObj = undefined;
  28. this.popupTimer = undefined;
  29. this.body.functions.getPointer = this.getPointer.bind(this);
  30. this.options = {};
  31. this.defaultOptions = {
  32. dragNodes:true,
  33. dragView: true,
  34. hover: false,
  35. keyboard: {
  36. enabled: false,
  37. speed: {x: 10, y: 10, zoom: 0.02},
  38. bindToWindow: true
  39. },
  40. navigationButtons: false,
  41. tooltipDelay: 300,
  42. zoomView: true
  43. };
  44. util.extend(this.options,this.defaultOptions);
  45. this.bindEventListeners()
  46. }
  47. bindEventListeners() {
  48. this.body.emitter.on('destroy', () => {
  49. clearTimeout(this.popupTimer);
  50. delete this.body.functions.getPointer;
  51. })
  52. }
  53. setOptions(options) {
  54. if (options !== undefined) {
  55. // extend all but the values in fields
  56. let fields = ['hideEdgesOnDrag','hideNodesOnDrag','keyboard','multiselect','selectable','selectConnectedEdges'];
  57. util.selectiveNotDeepExtend(fields, this.options, options);
  58. // merge the keyboard options in.
  59. util.mergeOptions(this.options, options, 'keyboard');
  60. if (options.tooltip) {
  61. util.extend(this.options.tooltip, options.tooltip);
  62. if (options.tooltip.color) {
  63. this.options.tooltip.color = util.parseColor(options.tooltip.color);
  64. }
  65. }
  66. }
  67. this.navigationHandler.setOptions(this.options);
  68. }
  69. /**
  70. * Get the pointer location from a touch location
  71. * @param {{x: Number, y: Number}} touch
  72. * @return {{x: Number, y: Number}} pointer
  73. * @private
  74. */
  75. getPointer(touch) {
  76. return {
  77. x: touch.x - util.getAbsoluteLeft(this.canvas.frame.canvas),
  78. y: touch.y - util.getAbsoluteTop(this.canvas.frame.canvas)
  79. };
  80. }
  81. /**
  82. * On start of a touch gesture, store the pointer
  83. * @param event
  84. * @private
  85. */
  86. onTouch(event) {
  87. if (new Date().valueOf() - this.touchTime > 50) {
  88. this.drag.pointer = this.getPointer(event.center);
  89. this.drag.pinched = false;
  90. this.pinch.scale = this.body.view.scale;
  91. // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
  92. this.touchTime = new Date().valueOf();
  93. }
  94. }
  95. /**
  96. * handle tap/click event: select/unselect a node
  97. * @private
  98. */
  99. onTap(event) {
  100. let pointer = this.getPointer(event.center);
  101. let multiselect = this.selectionHandler.options.multiselect &&
  102. (event.changedPointers[0].ctrlKey || event.changedPointers[0].metaKey);
  103. this.checkSelectionChanges(pointer, event, multiselect);
  104. this.selectionHandler._generateClickEvent('click', event, pointer);
  105. }
  106. /**
  107. * handle doubletap event
  108. * @private
  109. */
  110. onDoubleTap(event) {
  111. let pointer = this.getPointer(event.center);
  112. this.selectionHandler._generateClickEvent('doubleClick', event, pointer);
  113. }
  114. /**
  115. * handle long tap event: multi select nodes
  116. * @private
  117. */
  118. onHold(event) {
  119. let pointer = this.getPointer(event.center);
  120. let multiselect = this.selectionHandler.options.multiselect;
  121. this.checkSelectionChanges(pointer, event, multiselect);
  122. this.selectionHandler._generateClickEvent('click', event, pointer);
  123. this.selectionHandler._generateClickEvent('hold', event, pointer);
  124. }
  125. /**
  126. * handle the release of the screen
  127. *
  128. * @private
  129. */
  130. onRelease(event) {
  131. if (new Date().valueOf() - this.touchTime > 10) {
  132. let pointer = this.getPointer(event.center);
  133. this.selectionHandler._generateClickEvent('release', event, pointer);
  134. // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
  135. this.touchTime = new Date().valueOf();
  136. }
  137. }
  138. onContext(event) {
  139. let pointer = this.getPointer({x:event.clientX, y:event.clientY});
  140. this.selectionHandler._generateClickEvent('oncontext', event, pointer);
  141. }
  142. /**
  143. *
  144. * @param pointer
  145. * @param add
  146. */
  147. checkSelectionChanges(pointer, event, add = false) {
  148. let previouslySelectedEdgeCount = this.selectionHandler._getSelectedEdgeCount();
  149. let previouslySelectedNodeCount = this.selectionHandler._getSelectedNodeCount();
  150. let previousSelection = this.selectionHandler.getSelection();
  151. let selected;
  152. if (add === true) {
  153. selected = this.selectionHandler.selectAdditionalOnPoint(pointer);
  154. }
  155. else {
  156. selected = this.selectionHandler.selectOnPoint(pointer);
  157. }
  158. let selectedEdgesCount = this.selectionHandler._getSelectedEdgeCount();
  159. let selectedNodesCount = this.selectionHandler._getSelectedNodeCount();
  160. let currentSelection = this.selectionHandler.getSelection();
  161. let {nodesChanges, edgesChanges} = this._determineIfDifferent(previousSelection, currentSelection);
  162. if (selectedNodesCount - previouslySelectedNodeCount > 0) { // node was selected
  163. this.selectionHandler._generateClickEvent('selectNode', event, pointer);
  164. selected = true;
  165. }
  166. else if (selectedNodesCount - previouslySelectedNodeCount < 0) { // node was deselected
  167. this.selectionHandler._generateClickEvent('deselectNode', event, pointer, previousSelection);
  168. selected = true;
  169. }
  170. else if (selectedNodesCount === previouslySelectedNodeCount && nodesChanges === true) {
  171. this.selectionHandler._generateClickEvent('deselectNode', event, pointer, previousSelection);
  172. this.selectionHandler._generateClickEvent('selectNode', event, pointer);
  173. selected = true;
  174. }
  175. if (selectedEdgesCount - previouslySelectedEdgeCount > 0) { // edge was selected
  176. this.selectionHandler._generateClickEvent('selectEdge', event, pointer);
  177. selected = true;
  178. }
  179. else if (selectedEdgesCount - previouslySelectedEdgeCount < 0) { // edge was deselected
  180. this.selectionHandler._generateClickEvent('deselectEdge', event, pointer, previousSelection);
  181. selected = true;
  182. }
  183. else if (selectedEdgesCount === previouslySelectedEdgeCount && edgesChanges === true) {
  184. this.selectionHandler._generateClickEvent('deselectEdge', event, pointer, previousSelection);
  185. this.selectionHandler._generateClickEvent('selectEdge', event, pointer);
  186. selected = true;
  187. }
  188. if (selected === true) { // select or unselect
  189. this.selectionHandler._generateClickEvent('select', event, pointer);
  190. }
  191. }
  192. /**
  193. * This function checks if the nodes and edges previously selected have changed.
  194. * @param previousSelection
  195. * @param currentSelection
  196. * @returns {{nodesChanges: boolean, edgesChanges: boolean}}
  197. * @private
  198. */
  199. _determineIfDifferent(previousSelection,currentSelection) {
  200. let nodesChanges = false;
  201. let edgesChanges = false;
  202. for (let i = 0; i < previousSelection.nodes.length; i++) {
  203. if (currentSelection.nodes.indexOf(previousSelection.nodes[i]) === -1) {
  204. nodesChanges = true;
  205. }
  206. }
  207. for (let i = 0; i < currentSelection.nodes.length; i++) {
  208. if (previousSelection.nodes.indexOf(previousSelection.nodes[i]) === -1) {
  209. nodesChanges = true;
  210. }
  211. }
  212. for (let i = 0; i < previousSelection.edges.length; i++) {
  213. if (currentSelection.edges.indexOf(previousSelection.edges[i]) === -1) {
  214. edgesChanges = true;
  215. }
  216. }
  217. for (let i = 0; i < currentSelection.edges.length; i++) {
  218. if (previousSelection.edges.indexOf(previousSelection.edges[i]) === -1) {
  219. edgesChanges = true;
  220. }
  221. }
  222. return {nodesChanges, edgesChanges};
  223. }
  224. /**
  225. * This function is called by onDragStart.
  226. * It is separated out because we can then overload it for the datamanipulation system.
  227. *
  228. * @private
  229. */
  230. onDragStart(event) {
  231. //in case the touch event was triggered on an external div, do the initial touch now.
  232. if (this.drag.pointer === undefined) {
  233. this.onTouch(event);
  234. }
  235. // note: drag.pointer is set in onTouch to get the initial touch location
  236. let node = this.selectionHandler.getNodeAt(this.drag.pointer);
  237. this.drag.dragging = true;
  238. this.drag.selection = [];
  239. this.drag.translation = util.extend({},this.body.view.translation); // copy the object
  240. this.drag.nodeId = undefined;
  241. if (node !== undefined && this.options.dragNodes === true) {
  242. this.drag.nodeId = node.id;
  243. // select the clicked node if not yet selected
  244. if (node.isSelected() === false) {
  245. this.selectionHandler.unselectAll();
  246. this.selectionHandler.selectObject(node);
  247. }
  248. // after select to contain the node
  249. this.selectionHandler._generateClickEvent('dragStart', event, this.drag.pointer);
  250. let selection = this.selectionHandler.selectionObj.nodes;
  251. // create an array with the selected nodes and their original location and status
  252. for (let nodeId in selection) {
  253. if (selection.hasOwnProperty(nodeId)) {
  254. let object = selection[nodeId];
  255. let s = {
  256. id: object.id,
  257. node: object,
  258. // store original x, y, xFixed and yFixed, make the node temporarily Fixed
  259. x: object.x,
  260. y: object.y,
  261. xFixed: object.options.fixed.x,
  262. yFixed: object.options.fixed.y
  263. };
  264. object.options.fixed.x = true;
  265. object.options.fixed.y = true;
  266. this.drag.selection.push(s);
  267. }
  268. }
  269. }
  270. else {
  271. // fallback if no node is selected and thus the view is dragged.
  272. this.selectionHandler._generateClickEvent('dragStart', event, this.drag.pointer, undefined, true);
  273. }
  274. }
  275. /**
  276. * handle drag event
  277. * @private
  278. */
  279. onDrag(event) {
  280. if (this.drag.pinched === true) {
  281. return;
  282. }
  283. // remove the focus on node if it is focussed on by the focusOnNode
  284. this.body.emitter.emit('unlockNode');
  285. let pointer = this.getPointer(event.center);
  286. let selection = this.drag.selection;
  287. if (selection && selection.length && this.options.dragNodes === true) {
  288. this.selectionHandler._generateClickEvent('dragging', event, pointer);
  289. // calculate delta's and new location
  290. let deltaX = pointer.x - this.drag.pointer.x;
  291. let deltaY = pointer.y - this.drag.pointer.y;
  292. // update position of all selected nodes
  293. selection.forEach((selection) => {
  294. let node = selection.node;
  295. // only move the node if it was not fixed initially
  296. if (selection.xFixed === false) {
  297. node.x = this.canvas._XconvertDOMtoCanvas(this.canvas._XconvertCanvasToDOM(selection.x) + deltaX);
  298. }
  299. // only move the node if it was not fixed initially
  300. if (selection.yFixed === false) {
  301. node.y = this.canvas._YconvertDOMtoCanvas(this.canvas._YconvertCanvasToDOM(selection.y) + deltaY);
  302. }
  303. });
  304. // start the simulation of the physics
  305. this.body.emitter.emit('startSimulation');
  306. }
  307. else {
  308. // move the network
  309. if (this.options.dragView === true) {
  310. this.selectionHandler._generateClickEvent('dragging', event, pointer, undefined, true);
  311. // if the drag was not started properly because the click started outside the network div, start it now.
  312. if (this.drag.pointer === undefined) {
  313. this._handleDragStart(event);
  314. return;
  315. }
  316. let diffX = pointer.x - this.drag.pointer.x;
  317. let diffY = pointer.y - this.drag.pointer.y;
  318. this.body.view.translation = {x:this.drag.translation.x + diffX, y:this.drag.translation.y + diffY};
  319. this.body.emitter.emit('_redraw');
  320. }
  321. }
  322. }
  323. /**
  324. * handle drag start event
  325. * @private
  326. */
  327. onDragEnd(event) {
  328. this.drag.dragging = false;
  329. let selection = this.drag.selection;
  330. if (selection && selection.length) {
  331. selection.forEach(function (s) {
  332. // restore original xFixed and yFixed
  333. s.node.options.fixed.x = s.xFixed;
  334. s.node.options.fixed.y = s.yFixed;
  335. });
  336. this.selectionHandler._generateClickEvent('dragEnd', event, this.getPointer(event.center));
  337. this.body.emitter.emit('startSimulation');
  338. }
  339. else {
  340. this.selectionHandler._generateClickEvent('dragEnd', event, this.getPointer(event.center), undefined, true);
  341. this.body.emitter.emit('_requestRedraw');
  342. }
  343. }
  344. /**
  345. * Handle pinch event
  346. * @param event
  347. * @private
  348. */
  349. onPinch(event) {
  350. let pointer = this.getPointer(event.center);
  351. this.drag.pinched = true;
  352. if (this.pinch['scale'] === undefined) {
  353. this.pinch.scale = 1;
  354. }
  355. // TODO: enabled moving while pinching?
  356. let scale = this.pinch.scale * event.scale;
  357. this.zoom(scale, pointer)
  358. }
  359. /**
  360. * Zoom the network in or out
  361. * @param {Number} scale a number around 1, and between 0.01 and 10
  362. * @param {{x: Number, y: Number}} pointer Position on screen
  363. * @return {Number} appliedScale scale is limited within the boundaries
  364. * @private
  365. */
  366. zoom(scale, pointer) {
  367. if (this.options.zoomView === true) {
  368. let scaleOld = this.body.view.scale;
  369. if (scale < 0.00001) {
  370. scale = 0.00001;
  371. }
  372. if (scale > 10) {
  373. scale = 10;
  374. }
  375. let preScaleDragPointer = undefined;
  376. if (this.drag !== undefined) {
  377. if (this.drag.dragging === true) {
  378. preScaleDragPointer = this.canvas.DOMtoCanvas(this.drag.pointer);
  379. }
  380. }
  381. // + this.canvas.frame.canvas.clientHeight / 2
  382. let translation = this.body.view.translation;
  383. let scaleFrac = scale / scaleOld;
  384. let tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
  385. let ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
  386. this.body.view.scale = scale;
  387. this.body.view.translation = {x:tx, y:ty};
  388. if (preScaleDragPointer != undefined) {
  389. let postScaleDragPointer = this.canvas.canvasToDOM(preScaleDragPointer);
  390. this.drag.pointer.x = postScaleDragPointer.x;
  391. this.drag.pointer.y = postScaleDragPointer.y;
  392. }
  393. this.body.emitter.emit('_requestRedraw');
  394. if (scaleOld < scale) {
  395. this.body.emitter.emit('zoom', {direction: '+', scale: this.body.view.scale});
  396. }
  397. else {
  398. this.body.emitter.emit('zoom', {direction: '-', scale: this.body.view.scale});
  399. }
  400. }
  401. }
  402. /**
  403. * Event handler for mouse wheel event, used to zoom the timeline
  404. * See http://adomas.org/javascript-mouse-wheel/
  405. * https://github.com/EightMedia/hammer.js/issues/256
  406. * @param {MouseEvent} event
  407. * @private
  408. */
  409. onMouseWheel(event) {
  410. // retrieve delta
  411. let delta = 0;
  412. if (event.wheelDelta) { /* IE/Opera. */
  413. delta = event.wheelDelta / 120;
  414. } else if (event.detail) { /* Mozilla case. */
  415. // In Mozilla, sign of delta is different than in IE.
  416. // Also, delta is multiple of 3.
  417. delta = -event.detail / 3;
  418. }
  419. // If delta is nonzero, handle it.
  420. // Basically, delta is now positive if wheel was scrolled up,
  421. // and negative, if wheel was scrolled down.
  422. if (delta !== 0) {
  423. // calculate the new scale
  424. let scale = this.body.view.scale;
  425. let zoom = delta / 10;
  426. if (delta < 0) {
  427. zoom = zoom / (1 - zoom);
  428. }
  429. scale *= (1 + zoom);
  430. // calculate the pointer location
  431. let pointer = this.getPointer({x:event.clientX, y:event.clientY});
  432. // apply the new scale
  433. this.zoom(scale, pointer);
  434. }
  435. // Prevent default actions caused by mouse wheel.
  436. event.preventDefault();
  437. }
  438. /**
  439. * Mouse move handler for checking whether the title moves over a node with a title.
  440. * @param {Event} event
  441. * @private
  442. */
  443. onMouseMove(event) {
  444. let pointer = this.getPointer({x:event.clientX, y:event.clientY});
  445. let popupVisible = false;
  446. // check if the previously selected node is still selected
  447. if (this.popup !== undefined) {
  448. if (this.popup.hidden === false) {
  449. this._checkHidePopup(pointer);
  450. }
  451. // if the popup was not hidden above
  452. if (this.popup.hidden === false) {
  453. popupVisible = true;
  454. this.popup.setPosition(pointer.x + 3, pointer.y - 5);
  455. this.popup.show();
  456. }
  457. }
  458. // if we bind the keyboard to the div, we have to highlight it to use it. This highlights it on mouse over.
  459. if (this.options.keyboard.bindToWindow === false && this.options.keyboard.enabled === true) {
  460. this.canvas.frame.focus();
  461. }
  462. // start a timeout that will check if the mouse is positioned above an element
  463. if (popupVisible === false) {
  464. if (this.popupTimer !== undefined) {
  465. clearInterval(this.popupTimer); // stop any running calculationTimer
  466. this.popupTimer = undefined;
  467. }
  468. if (!this.drag.dragging) {
  469. this.popupTimer = setTimeout(() => this._checkShowPopup(pointer), this.options.tooltipDelay);
  470. }
  471. }
  472. /**
  473. * Adding hover highlights
  474. */
  475. if (this.options.hover === true) {
  476. // adding hover highlights
  477. let obj = this.selectionHandler.getNodeAt(pointer);
  478. if (obj === undefined) {
  479. obj = this.selectionHandler.getEdgeAt(pointer);
  480. }
  481. this.selectionHandler.hoverObject(obj);
  482. }
  483. }
  484. /**
  485. * Check if there is an element on the given position in the network
  486. * (a node or edge). If so, and if this element has a title,
  487. * show a popup window with its title.
  488. *
  489. * @param {{x:Number, y:Number}} pointer
  490. * @private
  491. */
  492. _checkShowPopup(pointer) {
  493. let x = this.canvas._XconvertDOMtoCanvas(pointer.x);
  494. let y = this.canvas._YconvertDOMtoCanvas(pointer.y);
  495. let pointerObj = {
  496. left: x,
  497. top: y,
  498. right: x,
  499. bottom: y
  500. };
  501. let previousPopupObjId = this.popupObj === undefined ? undefined : this.popupObj.id;
  502. let nodeUnderCursor = false;
  503. let popupType = 'node';
  504. // check if a node is under the cursor.
  505. if (this.popupObj === undefined) {
  506. // search the nodes for overlap, select the top one in case of multiple nodes
  507. let nodeIndices = this.body.nodeIndices;
  508. let nodes = this.body.nodes;
  509. let node;
  510. let overlappingNodes = [];
  511. for (let i = 0; i < nodeIndices.length; i++) {
  512. node = nodes[nodeIndices[i]];
  513. if (node.isOverlappingWith(pointerObj) === true) {
  514. if (node.getTitle() !== undefined) {
  515. overlappingNodes.push(nodeIndices[i]);
  516. }
  517. }
  518. }
  519. if (overlappingNodes.length > 0) {
  520. // if there are overlapping nodes, select the last one, this is the one which is drawn on top of the others
  521. this.popupObj = nodes[overlappingNodes[overlappingNodes.length - 1]];
  522. // if you hover over a node, the title of the edge is not supposed to be shown.
  523. nodeUnderCursor = true;
  524. }
  525. }
  526. if (this.popupObj === undefined && nodeUnderCursor === false) {
  527. // search the edges for overlap
  528. let edgeIndices = this.body.edgeIndices;
  529. let edges = this.body.edges;
  530. let edge;
  531. let overlappingEdges = [];
  532. for (let i = 0; i < edgeIndices.length; i++) {
  533. edge = edges[edgeIndices[i]];
  534. if (edge.isOverlappingWith(pointerObj) === true) {
  535. if (edge.connected === true && edge.getTitle() !== undefined) {
  536. overlappingEdges.push(edgeIndices[i]);
  537. }
  538. }
  539. }
  540. if (overlappingEdges.length > 0) {
  541. this.popupObj = edges[overlappingEdges[overlappingEdges.length - 1]];
  542. popupType = 'edge';
  543. }
  544. }
  545. if (this.popupObj !== undefined) {
  546. // show popup message window
  547. if (this.popupObj.id !== previousPopupObjId) {
  548. if (this.popup === undefined) {
  549. this.popup = new Popup(this.canvas.frame);
  550. }
  551. this.popup.popupTargetType = popupType;
  552. this.popup.popupTargetId = this.popupObj.id;
  553. // adjust a small offset such that the mouse cursor is located in the
  554. // bottom left location of the popup, and you can easily move over the
  555. // popup area
  556. this.popup.setPosition(pointer.x + 3, pointer.y - 5);
  557. this.popup.setText(this.popupObj.getTitle());
  558. this.popup.show();
  559. this.body.emitter.emit('showPopup',this.popupObj.id);
  560. }
  561. }
  562. else {
  563. if (this.popup !== undefined) {
  564. this.popup.hide();
  565. this.body.emitter.emit('hidePopup');
  566. }
  567. }
  568. }
  569. /**
  570. * Check if the popup must be hidden, which is the case when the mouse is no
  571. * longer hovering on the object
  572. * @param {{x:Number, y:Number}} pointer
  573. * @private
  574. */
  575. _checkHidePopup(pointer) {
  576. let pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
  577. let stillOnObj = false;
  578. if (this.popup.popupTargetType === 'node') {
  579. if (this.body.nodes[this.popup.popupTargetId] !== undefined) {
  580. stillOnObj = this.body.nodes[this.popup.popupTargetId].isOverlappingWith(pointerObj);
  581. // if the mouse is still one the node, we have to check if it is not also on one that is drawn on top of it.
  582. // we initially only check stillOnObj because this is much faster.
  583. if (stillOnObj === true) {
  584. let overNode = this.selectionHandler.getNodeAt(pointer);
  585. stillOnObj = overNode.id === this.popup.popupTargetId;
  586. }
  587. }
  588. }
  589. else {
  590. if (this.selectionHandler.getNodeAt(pointer) === undefined) {
  591. if (this.body.edges[this.popup.popupTargetId] !== undefined) {
  592. stillOnObj = this.body.edges[this.popup.popupTargetId].isOverlappingWith(pointerObj);
  593. }
  594. }
  595. }
  596. if (stillOnObj === false) {
  597. this.popupObj = undefined;
  598. this.popup.hide();
  599. this.body.emitter.emit('hidePopup');
  600. }
  601. }
  602. }
  603. export default InteractionHandler;