cytoscape / cytoscape.js-automove Goto Github PK

Sometimes you want to treat certain nodes as being dragged along with a particular node when it's grabbed. For example, you might want to drag along an entire component when a node within it is dragged.

Usecase : Dragging interaction participants in Factoid along with an interaction

• reposition: 'drag' enables the mode on nodesMatching -- these are the nodes that get dragged with the master nodes
• dragWith: otherNodes specifies the master nodes that are listened to for drag events
  • otherNodes can be a collection, selector, orfunction( node ){ return trueOrFalse; }

// for `reposition: 'drag'`, specify nodes that when dragged cause the matched nodes to move along
// - a function that returns true for nodes to be listened to for drag events
// - a selector that matches the nodes to be listened to for drag events
// - a collection of nodes to be ignored (very good for performance)
dragWith: function( node ){ return false; }

Otherwise the solitary node becomes undraggable.

Usecase: Dragging interaction nodes in Factoid that haven't yet been connected to any biological entities

I want to be able to drag an arbitrary node, and have it's successors move with it. This is a generally desirable thing in directed graphs (I don't think it's standard functionality though).
I have many plausible ways this might work, but don't; probably due to the execution order of click events. This is the neatest:
cy.automove({nodesMatching: function(node){return node.selected()? node.successors():null}, reposition:'drag',dragWith: cy.nodes()})

Sounds plausible, but nothing is ever detected as being selected. There is a similar problem with this slightly cruder approach:

cy.nodes().on('vmousedown', function(e){
cy.automove("destroy");
  var ele = e.target;
  console.log('clicked ' + ele.id());
cy.automove({nodesMatching: cy.$id(ele.id()).successors(), reposition:'drag',dragWith: cy.$id(ele.id())})
});

So, is there a way to achieve this without resorting to adding every permutation of nodes and successors, as rules? Or do we need a code change?

Thanks

First off thank you this extension, its a real help in working with cytoscape.
I have a rather simple rule to keep my Y-axis fixed and only reposition x on drag (prevent user to change y axis). My graph is fairly large with 200 nodes. When I try this out it fails with Max call stack size error

Hope someone can shed some light on what can be made different to make it not recursively exceed stack size.

this._automoveRule = this.cy.automove({
      nodesMatching: this.cy.nodes(),
      reposition: (node) => {
        return {
          x: node.position().x,
          y: node.data().y
        };
      },
      when: 'matching'
    });

Hi,

In the demo, node #e and #f is restricts to have same y.
I would like to tweak this to keep the same distance in horizontal.

I tried

// Make only #e grabbable but not #f, when I move e, f should always follow e.
{ data: { id: 'f' }, selectable: false, grabbable: false }

cy.automove({
  nodesMatching: '#e, #f',
  reposition: function( node ){
     var pos = node.position();
     if( node.grabbed() ){ return pos; }
     
     var otherNode = eAndF.not( node );
     return {
       x: otherNode.position('x') + 40,
       y: otherNode.position('y')
     };
  },
  when: 'matching'
});

However, this seems to trigger 'matching' rule recursively and results in infinite loop.

I tried to write custom when function but I could not figure out how to bind to some event.
If I don't bind, this only called once and it does not listen for any event.

when: function(update) {
  // some rule
  update();
}

How can I achieve #f node follow #e in same y coordinate and same horizontal distance?

The README and the https://js.cytoscape.org/ demos page link to a URL that shows "Page not found".

https://cytoscape.org/cytoscape.js-automove/

What would be the recommended way to automove an arbitrary collection of elements?

Hi, I am a beginner programmer and I have two problems.

One, I cannot import import automove using the ES import functionality. I am trying to serve a static HTML page containing JS scripts using NodeJS and ExpressJS and in one of my public script files I make the call:

import automove from './cytoscape-automove.js'.

and I get the error: Uncaught SyntaxError: The requested module './cytoscape-automove.js' does not provide an export named 'automove'.

The second problem is if I try to load cytoscape-automove.js through an HTML <script type = 'module'> tag, I get the error: cytoscape-automove.js:9 Uncaught TypeError: Cannot set property 'cytoscapeAutomove' of undefined.

Looking through the code, I see that an argument of this is provided to the webpackUniversalModuleDefinition function and I would naively think that this is just a reference to the global object but unfortunately I am not familiar with webpack and how it bundles assets.

Add a set of options that make it such that dragging a node drags along its component with it. This builds from #16.

This could be a nice-to-have feature in future. It's easy for the dev to implement this on his own if the graph is static, but it's better to have a built-in preset for the dynamic case to be performant.

Hello,

I just found this repo and it's been super useful. I am dynamically creating nodes in cytoscape and rules to go along with them. Basically I'm working with clusters where the root node has a layer of leaf nodes around it and they should move freely individually, but when the root moves, every leaf moves with it. It's been working quite well with the following:

var rules = cy.automove({ nodesMatching: cy.$("#"+port.id()), reposition: 'drag', dragWith: cy.$("#"+obj.id()) });

My problem now is that when I run rules.destroy() I expected the rules to stop their effect. Unfortunately I must be missing how to actually undo rules that were set into place. I couldn't figure it out and would appreciate any tips. Thanks!

I would like to use this extension to enable dragging of groups of nodes

but leaving aside how I will select them for the moment, I can't get anything to work.

when I download and run your demo.html -- nothing seems to work.

#mid starts way off-screen

#d isn't limited to a box

#e and #f aren't bounded and don't move together

#g can be dragged out of the window, then zoom out shows it again

(tried chrome 59 over mac os x 10.12.3)
(tried safari 10.0.3 over mac os x 10.12.3)
(tried opera 43 over mac os x 10.12.3)

I create a rule upon firing a "grab" event and then call automove("destroy") upon "free" event and get the following exception:
Uncaught TypeError: n.destroy is not a function

I managed to recreate the issue in jsFiddle: http://jsfiddle.net/mvg9bdef/

Sometimes, you don't want a particular node to affect the automoved node's position in reposition: 'mean'. For example, you may not want the ghost node to shift an intermediate node (i.e. edgeType === 'node') when used with the edgehandles extension.

Usecase : Editing interaction participants in Factoid

// for `reposition: 'mean'`, specify nodes that should be ignored in the mean calculation
// - a function that returns true for nodes to be ignored
// - a selector that matches the nodes to be ignored
// - a collection of nodes to be ignored (very good for performance)
meanIgnores: function( node ){ return false; }

Useful when listening to position and drag events isn't fine-grained enough.

Usecase : Factoid

Useful for enforcing a rule just after creating it as some when conditions wouldn't apply at init.

Usecase : Factoid

I can't seem to get this extension to work. On load I immediately get an error:

Uncaught TypeError: rule.listener is not a function
    at addRule (cytoscape-automove.js:388)
    at Core.automove (cytoscape-automove.js:489)
    ...

Here's what my setup looks like:

import cytoscape from 'cytoscape';
import automove from 'cytoscape-automove';

cytoscape.use(automove);

export default function CytoscapeGraph({ height }) {
	const graphRef = React.useRef();

	React.useEffect(() => {
		const cy = cytoscape({
			userZoomingEnabled: false,
			userPanningEnabled: false,
			style: { ... },
		});

		if (graphRef.current) {
			// this is where all the nodes and edges are added using cy.add()
			buildGraphFromActions(cy, actions);
			cy.mount(graphRef.current);
			cy.layout({ ... }).run();
			cy.automove({
				nodesMatching: cy.nodes(),
				reposition: node => {
					const pos = node.position();
					return { y: pos.y };
				},
			});
			cy.fit(cy.elements());
		}
		...
		return () => {
			cy.destroy();
		};
	}, [...]);

	return <div ref={graphRef} />;
}

If I add a when: update => update(), things don't blow up, but I don't see my reposition function get called at all. Does all this have something to do with the fact that I am building my graph after my initial cytoscape({ ... }) call?