CODEWITHSUNDEEP
cytoscape.js
Valentin Perrelle
Valentin Perrelle

Reputation: 1353

Layout centered on one node

Is there a way to require that a layout doesn't change the position of one "root" node while considering it during the algorithm ? Or equivalently, is there a way to always center the camera to this node/keep the camera at the same relative position to this node ?

A bit of context. I am working on an iteratively built graph. Each time parts are added to the graph, the layout is completed. The graph may grow too big to be printed on a screen, and alternatives to the fit options are welcome. What is important though, is that the user is able to follow the node he selected. The best would be that this node doesn't move.

Upvotes: 2

Views: 1500

Answers (1)

maxkfranz
maxkfranz

Reputation: 12250

Here is an outline of the general approach. It can be applied with whatever strategy you like re. zoom and pan. The main thing is that you need to know the start and end positions of each node. So you run the layout in a batch, creating a visual nop, and then run a preset layout with the desired zoom and pan.

const clone = obj => Object.assign({}, obj);
const savePos1 = n => n.scratch('_layoutPos1', clone(n.position()));
const savePos2 = n => n.scratch('_layoutPos2', clone(n.position()));
const restorePos1 = n => n.position(n.scratch('_layoutPos1'));
const getPos2 = n => n.scratch('_layoutPos2');

cy.startBatch();

const nodes = cy.nodes();
const layout = cy.layout(myLayoutOptions); // n.b. animate:false
const layoutstop = layout.promiseOn('layoutstop');

nodes.forEach(savePos1); 

layout.run();

await layoutstop;

nodes.forEach(savePos2);

nodes.forEach(restorePos1);

cy.endBatch();

cy.layout({
  name: 'preset',
  animate: true,
  positions: getPos2,

  // specify zoom and pan as desired
  zoom,
  pan
}).run();

Upvotes: 3

Related Questions