plotly / react-cytoscapejs

React component for Cytoscape.js network visualisations
MIT License
465 stars 69 forks source link

Locked nodes #47

Open code247 opened 4 years ago

code247 commented 4 years ago

Trying out the README example which renders the nodes but not able to move the nodes individually no matter what. Entire layout (two nodes and the edge) move in unison whenever I click on either nodes. What am I missing in order to grab individual nodes and move?

import React from 'react';
import CytoscapeComponent from 'react-cytoscapejs';

export default class Cyto extends React.Component {
    constructor(props){
        super(props);
    }

    render(){
        const elements = [
            { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },
            { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } },
            { data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' } }
        ];

        const layout = {
            name: 'grid'
        }

        return <CytoscapeComponent elements={elements} style={{ height: '600px' }} layout={layout} />;
    }
}
sgratzl commented 4 years ago

can you create an example on e.g. codesandbox to illustrate the behavior, cause in my test it works as expected