Open menu programmatically at mouse position about cytoscape.js-cxtmenu HOT 7 CLOSED

A naive solution would be to add a renderedPosition parameter to the extension's event handler and use it like this:

function (e, renderedPosition) {
  ...
  rp = e.renderedPosition || e.cyRenderedPosition || renderedPosition;
}

or more generic:

function (e, params) {
  ...
  rp = e.renderedPosition || e.cyRenderedPosition || params && params.renderedPosition;
}

Should I create a pull request?

from cytoscape.js-cxtmenu.

@jri Sorry for the delayed response. I've been busy, among other things, with cytoscape/cytoscape.js#2059. That affects all users of Cytoscape.js on Chrome v64 (latest).

Yes, something along those lines makes sense. What do you think about this API?

options.renderedPosition: function( target ){ // target is cy or ele, depending on `options.selector`
  return { x: 100, y: 200 };
}

defaults.renderedPosition = function(){ return null; } // s.t. the node/event's position is used

I'm not sure that your example would work, if I understand it correctly, as e.renderedPosition would always be defined at least for the selector: 'core' case.

from cytoscape.js-cxtmenu.

The main benefit of using the function versus a plain position object is that you could control the position per node.

from cytoscape.js-cxtmenu.

Thanks for reply!
But this is not what I'm talked about.

My application needs to open the menu programmatically, that is not by interacting with a node directly, but by calling something like node.openMenu(x, y). My current approach is to emulate that by emitting a cxttapstart event. That works. The only problem is I can't pass x, y coordinates then.

Let me explain the use case: in my application a node can be in "expanded" or "collapsed" mode. When in expanded mode an HTML overlay is positioned above the node, with various info and form elements.

• The overlay DOM is a sibling element to the Cytoscape container element.
• (The overlay's position and zoom factor is kept in-sync with the Cytoscape graph.)
• (When in expanded mode the node's width and height style is adapted to the actual overlay size.)

A node's context menu is supposed to be still openable by the user, also when the node is in expanded mode. But in this case the node is obscured by the overlay, and click events will not bubble to the canvas (as the overlay is a sibling element).

To solve that I intend to add a "handle" element to the overlay through which the user can invoke the node's context menu (as well as move the node, but that's a different pending issue). When the user clicks the handle the application would call node.openMenu(x, y) passing the mouse coordinates. The context menu is supposed to appear at mouse position, that is at the handle element.

I'm almost there already. Currently I "emulate" the openMenu() call by emitting a cxttapstart event. What is missing is the opportunity to pass coordinates along with it, like:

node.emit('cxttapstart', {renderedPosition: {x: 100, y: 200}})

The coordinates are supposed to be handled by the cxtmenu extension, as sketched above.

from cytoscape.js-cxtmenu.

Yes, I understand what you mean. I neglected to mention that you'd need functions like menu.open() and menu.close(). Having renderedPosition in options as opposed to an argument to open() means that it's useful for the default (non-manual) case as well.

The edgehandles extension is an example of this: Most things stay in options but there are some functions for managing the progression of the gesture manually (e.g. start() in edgehandles).

from cytoscape.js-cxtmenu.

This issue has been automatically marked as stale, because it has not had activity within the past 30 days. It will be closed if no further activity occurs within the next 30 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

from cytoscape.js-cxtmenu.

@jri - Not sure if you've found a better solution but just wanted to let you know what worked for me:

cy.emit({
            originalEvent: e,
            type: "taphold",
            position: {
                x:  lastDragOver.layerX,
                y:  lastDragOver.layerY,
            },
        });

This simulates a taphold (which opens cxtmenu) at a specific position. Depends how you determine that position, I'm getting it from the DragEvent give by dragOver.

I noticed this undocumented way of calling cy.emit from:
cytoscape\dist\cytoscape.cjs.js /around Ln 24618.
The official documentation shows only an example with the event name: https://js.cytoscape.org/#cy.emit

from cytoscape.js-cxtmenu.