【Feature】Support Add Node Programmatically Manually Automatically

[wscjxky]

Thank all of you very much for sharing 👍

I tried many ways to build flow through meta nodes json, none of them worked very well. 😟😟😟

SO I developed a set of functions for automatic programmatically adding nodes implemented based on simulated drag and drop
, hoping to help someone.

• First I would create a node json string

let NODE_RELATION = {
        root: [{
            "type": "gongwei",
            "name": "gongwei_1",
            "parent_id": -1,
            "children": [{
                "parent_id": 1,
                "type": "pipeline",
                "name": "pipeline_1",
                "children": [{
                    "type": "analyze",
                    "name": "analyze_1",
                    "parent_id": 3,
                    "children": []
                }]

            }]
        }, {
            "parent_id": -1,
            "type": "gongwei",
            "name": "gongwei_2",
            "children": []
        }]
    }

• In the second part🚗🚗🚗, I will create a function that adds nodes. In this function, the mousedown function will be used,-
• then the flowy.drag object will be dynamically modified (atrr left and top) to move the object's position to the middle of the screen.
• finally, the mouseup function will be used to release drag object.
• It should be noted that offset and px will change according to the screen size.

    function add_node(node_type, node_name, parent_node_id) {
        offset_y = 35
        offset_x = 200

        $(`#${node_type}`).click()

        let evt = new MouseEvent("mousedown", {
            bubbles: true,
            cancelable: true,
            view: window,
        });
 

        $(`input[value="${node_name}"]`).parent()[0].dispatchEvent(evt);
        console.log('flowy.drag()', flowy.drag())
        if (parent_node_id == -1) {
            flowy.drag().style.left = '900px'
            flowy.drag().style.top = '150px'
        } else {
            flowy.drag().style.left = flowy.blocks()[parent_node_id].x + offset_x + "px"
            flowy.drag().style.top = flowy.blocks()[parent_node_id].y + offset_y + "px"
        }

        let evt1 = new MouseEvent("mouseup", {
            bubbles: true,
            cancelable: true,
            view: window,
        });
        $('#canvas')[0].dispatchEvent(evt1);
    }

• Finally, the final flowy can be constructed by the meta node NODE_RELATION data json according to the number of layers.

add_node('root', 'root', -1)
for (let level_1 of NODE_RELATION['root']) {
    add_node(level_1['type'], level_1['name'], level_1['parent_id'])
}

• If you need all the codes you can contact me ❤❤❤

Originally posted by @wscjxky in #110 (comment)

[Dhanuka123]

Hi @wscjxky I'm using flowy for my fyp, I have a need of input flowy node manually Can you please share the full code?

[wscjxky]

No problem, I have uploaded the code to the new demo directory. You can download it and open index.html to view it. The main function is add_node in main.js.
If you have more questions, you can continue to leave me a message

[wscjxky]

Hi @wscjxky I'm using flowy for my fyp, I have a need of input flowy node manually Can you please share the full code?

https://github.com/wscjxky/flowy/tree/master/program_add_node_demo

[eolmsan]

Hi all!,

Thank you @wscjxky for the code it's very helpful. I found this library and it's a pity that is not updated with features, it's simple to use and does most of the functionality, but missing a few ones is a killer.

Could I use your code @wscjxky to have a node with two parents?.

In the flows I need, the user will create flows with parallel branches that merge. It seems that by fixing the parent in whatever position I need it would work, but I don't know if I will run into further issues.

Thank you very much!.

[wscjxky]

Hi all!,

Thank you @wscjxky for the code it's very helpful. I found this library and it's a pity that is not updated with features, it's simple to use and does most of the functionality, but missing a few ones is a killer.

Could I use your code @wscjxky to have a node with two parents?.

In the flows I need, the user will create flows with parallel branches that merge. It seems that by fixing the parent in whatever position I need it would work, but I don't know if I will run into further issues.

Thank you very much!.

I'm glad to help you. 👍
But I think @alyssaxuu didn't support that a node with multiple parent nodes.
Now only supports a node with one parent.

#102

[eolmsan]

Thanks a lot for the quick reply and the link of other people working on the same I appreciate it a lot. From what I saw this is something far from trivial. Would reconsider my choice of going with this library then. Thanks and greetings from Spain!.

…

On Fri, Apr 26, 2024, 11:45 Stanley ***@***.***> wrote: Hi all!, Thank you @wscjxky <https://github.com/wscjxky> for the code it's very helpful. I found this library and it's a pity that is not updated with features, it's simple to use and does most of the functionality, but missing a few ones is a killer. Could I use your code @wscjxky <https://github.com/wscjxky> to have a node with two parents?. In the flows I need, the user will create flows with parallel branches that merge. It seems that by fixing the parent in whatever position I need it would work, but I don't know if I will run into further issues. Thank you very much!. I'm glad to help you. 👍 But I think @alyssaxuu <https://github.com/alyssaxuu> didn't support that a node with multiple parent nodes. Now only supports a node with one parent. #102 <#102> — Reply to this email directly, view it on GitHub <#148 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AS3KRUX62KEED2XKJFLQH5DY7IO4BAVCNFSM6AAAAABGABKWLGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANZZGAZDOMRUGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[wscjxky]

Thanks a lot for the quick reply and the link of other people working on the same I appreciate it a lot. From what I saw this is something far from trivial. Would reconsider my choice of going with this library then. Thanks and greetings from Spain!.
…
On Fri, Apr 26, 2024, 11:45 Stanley @.> wrote: Hi all!, Thank you @wscjxky https://github.com/wscjxky for the code it's very helpful. I found this library and it's a pity that is not updated with features, it's simple to use and does most of the functionality, but missing a few ones is a killer. Could I use your code @wscjxky https://github.com/wscjxky to have a node with two parents?. In the flows I need, the user will create flows with parallel branches that merge. It seems that by fixing the parent in whatever position I need it would work, but I don't know if I will run into further issues. Thank you very much!. I'm glad to help you. 👍 But I think @alyssaxuu https://github.com/alyssaxuu didn't support that a node with multiple parent nodes. Now only supports a node with one parent. #102 <#102> — Reply to this email directly, view it on GitHub <#148 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS3KRUX62KEED2XKJFLQH5DY7IO4BAVCNFSM6AAAAABGABKWLGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANZZGAZDOMRUGQ . You are receiving this because you commented.Message ID: @.>

Thanks，If you achieve multiple parent nodes, you can share it~
Or maybe you can read this repository Drawflow

[wscjxky]

Hi @wscjxky I'm using flowy for my fyp, I have a need of input flowy node manually Can you please share the full code?

https://github.com/wscjxky/flowy/tree/master/program_add_node_demo

It doesn't work?

it's works, u can try on yout browser

[AdamMiltonBarker]

@wscjxky yer sorry I deleted my comment. This will be helpful. Thanks.

[AdamMiltonBarker]

@wscjxky it's a great start, I have implemented code based on yours that pulls the schemas from a database, its not very intuitive clicking the tabs, loading the HTML, then clicking the first tab again to load back. I take it this is due to restrictions with underlying library?

[SilverFoxA]

The plugin is great and thanks to the creator.
Unfortunately, there are too many limitations, so I decided to create a React version for myself with branching and manual block links. I'm still working on it, and once it's complete, I will create an open-source version of it.

[kdhrubo]

Looking forward to it Abhijit.

…

On Thu, Oct 31, 2024, 1:25 PM Abhijit Das ***@***.***> wrote: The plugin is great and thanks to the creator. Unfortunately, there are too many limitations, so I decided to create a React version for myself with branching and manual block links. I'm still working on it, and once it's complete, I will create an open-source version of it. Screenshot.2024-10-31.at.11.52.02.PM.png (view on web) <https://github.com/user-attachments/assets/2f153af7-f367-4f51-9810-b83c948a2c73> — Reply to this email directly, view it on GitHub <#148 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAISPRAT6Q5GE27ATPHVAD3Z6JYYNAVCNFSM6AAAAABGABKWLGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJQGU2TKOBVG4> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[SilverFoxA]

Hi everyone!

I’m excited to announce that I’m now building this project in public: @madgeek_in/react-flow-builder

If you're interested in contributing or have ideas to improve the flow builder, I'd really appreciate some pull requests and any help you can offer. Let’s work together to make this tool as useful and flexible as possible for the community. Thank you for your support and contributions!

[arnoldligtvoet]

Looks interesting. I think if it’s based on Flowy you could (or should) give some credit to the original project in your documentation.