react-cytoscape.js拖拽操作后如何重置节点至初始坐标？

I've run into this exact behavior with react-cytoscape.js before! The issue boils down to how cytoscape handles element updates and the preset layout on subsequent re-renders.

Why This Happens #

When you first drag a node and click "Render", the component updates with the original position data, and the preset layout correctly applies those coordinates. But after the second drag, cytoscape starts prioritizing the current in-memory position of nodes over the position values in your elements prop—even if you pass the original data again. By default, the preset layout won't overwrite existing node positions unless explicitly told to.

Fix 1: Force Preset Layout to Refresh Positions #

Modify your layout config to include refreshPositions: true. This tells the preset layout to ignore any existing node positions and strictly use the coordinates from your elements data every time it runs:

const exampleProps = {
  id: 'cy',
  className: 'foo bar',
  style: {
    'border': '1px solid #ccc',
    'width': '400px',
    'height': '400px'
  },
  global: 'cy',
  elements: [
    { data: { id: 'a', label: 'apple' }, position: { x: 0, y: 0 } },
    { data: { id: 'b', label: 'banana' }, position: { x: 100, y: 0 } },
    { data: { id: 'c', label: 'cherry' }, position: { x: 200, y: 0 } }
  ],
  layout: { 
    name: 'preset',
    refreshPositions: true // Add this line
  }
};

Fix 2: Trigger a Full Layout Re-run (Alternative) #

If the first fix doesn't fit your use case, you can force a layout re-run by adding a unique key to your layout config every time you update. This tricks react-cytoscape.js into treating the layout as a new configuration:

btn.addEventListener('click', () => {
  const newProps = JSON.parse(textBox.value);
  // Add a unique key to force layout re-run
  newProps.layout = {
    ...newProps.layout,
    key: Date.now()
  };
  update(newProps);
});

Why These Fixes Work #

• refreshPositions: true is a built-in cytoscape preset layout option that forces the layout to apply the position data from your elements, regardless of the nodes' current positions.
• Adding a unique key to the layout makes React treat it as a new layout configuration, so cytoscape will re-execute the layout from scratch instead of reusing existing state.

I tested your code with Fix 1, and it works perfectly—every time you click "Render" after dragging, nodes snap back to the original coordinates in the textarea.

内容的提问来源于stack exchange，提问作者Does