Arrange all Nodes - function

[RoHaX]

Hi, i just made a function to arrange all Nodes. Maybe someone could find this useful:

function arrangeAllNodes() {
  var obj = editor.drawflow.drawflow.Home.data;
  var positions = { x: [], y: [] };

  // Capture the positions of all nodes
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      var id = obj[key].id;
      const node = document.getElementById(`node-${id}`);
      var posX = parseInt(node.style.left);
      var posY = parseInt(node.style.top);

      // Insert the positions into the respective arrays
      positions.x.push({ id, posX });
      positions.y.push({ id, posY });
    }
  }

  // Sort the positions
  positions.x.sort((a, b) => a.posX - b.posX);
  positions.y.sort((a, b) => a.posY - b.posY);

  // Align the positions within the tolerance range
  for (var i = 0; i < positions.x.length - 1; i++) {
    if (Math.abs(positions.x[i].posX - positions.x[i + 1].posX) <= 40) {
      const node = document.getElementById(`node-${positions.x[i + 1].id}`);
      console.log("pos_x:" + node.style.top);
      node.style.left = `${positions.x[i].posX}px`;
      editor.drawflow.drawflow[editor.module].data[positions.x[i + 1].id].pos_x = positions.x[i].posX;
      console.log("pos_x:" + node.style.top);
      editor.updateConnectionNodes(`node-${positions.x[i + 1].id}`);
    }
  }

  for (var i = 0; i < positions.y.length - 1; i++) {
    if (Math.abs(positions.y[i].posY - positions.y[i + 1].posY) <= 10) {
      const node = document.getElementById(`node-${positions.y[i + 1].id}`);
      console.log("pos_y:" + node.style.left);
      node.style.top = `${positions.y[i].posY}px`;
      editor.drawflow.drawflow[editor.module].data[positions.y[i + 1].id].pos_y = positions.y[i].posY;
      console.log("pos_y:" + node.style.left);
      editor.updateConnectionNodes(`node-${positions.y[i + 1].id}`);
    }
  }
}

[jerosoler]

Thanks, added a tricks label

[RoHaX]

Thanks, added a tricks label

Great project, btw

I tried to make some kind of snap to nodes, but i could not find out how to move selected Node while moving. Any Ideas to do that?

[jerosoler]

Complicated. Perhaps the "position" function should be modified.

[RoHaX]

Thanks, i managed to modify the postition function in a way to snap to specific positions. I still have some problems because the mouse pointer then moves away from the node. Maybe I'll find a clean solution, then I'll post it here.

[RoHaX]

Hi jerosoler!

I finally managed to implement a snap to grid and snap to node functionality. If you are interested in the code - let me know ;-)

Thanks again for this great Library!

[jerosoler]

Perfect!

If you want you can put the code here, maybe it will be useful to someone.

[tonyalaribe]

Hi jerosoler!

I finally managed to implement a snap to grid and snap to node functionality. If you are interested in the code - let me know ;-)

Thanks again for this great Library!

Please share the code. It would be very useful to me

[vnomohan]

yes please share the code here. i am not manage to complete the rearrange the node, avoid overlapping.

[alirameezq]

@RoHaX have you ever completed the auto-arrange nodes function, if yes, can you please add your complete code here for us to get help from? Thanks.