【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?