jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.65k stars 722 forks source link

Automatic position for nodes #450

Closed LucasLopesr closed 2 years ago

LucasLopesr commented 2 years ago

Hi, I'm looking for a simple library to create a diagram and I'm very interested in using Drawflow.

I have a question, if I import data without a position definition for the nodes, does Drawflow organize or assign an automatic position?

if not, how complex would it be to add this?

jerosoler commented 2 years ago

The import has to have the value pos_x and pos_y.

As it's shown in the following:

{
    "drawflow": {
        "Home": {
            "data": {}
        },
        "Other": {
            "data": {
                "16": {
                    "id": 16,
                    "name": "facebook",
                    "data": {},
                    "class": "facebook",
                    "html": "\n        
\n          
 Facebook Message
\n        
\n        ",
                    "inputs": {},
                    "outputs": {
                        "output_1": {
                            "connections": [
                                {
                                    "node": "17",
                                    "output": "input_1"
                                }
                            ]
                        }
                    },
                    "pos_x": 226,
                    "pos_y": 138
                },
                "17": {
                    "id": 17,
                    "name": "log",
                    "data": {},
                    "class": "log",
                    "html": "\n            
\n              
 Save log file
\n            
\n            ",
                    "inputs": {
                        "input_1": {
                            "connections": [
                                {
                                    "node": "16",
                                    "input": "output_1"
                                }
                            ]
                        }
                    },
                    "outputs": {},
                    "pos_x": 690,
                    "pos_y": 129
                }
            }
        }
    }
}

You could transform the positions before importing. I don't think it's very complete. Depending on the type of diagram you want to create.

Another option is to move the nodes once assembled.

LucasLopesr commented 2 years ago

I got it.

Wouldn't it be interesting for the lib to automatically do this positioning based on the parents and number of children? Like this one:

D3MitchTree Demo

For each new node added, its position would be recalculated based on the number of children, without the need for those who consume the library to say where on the canvas the node should appear

jerosoler commented 2 years ago

The library is intended for data flows not for diagrams. One thing is that it can be adapted.

LucasLopesr commented 2 years ago

Okay thank you @jerosoler