alyssaxuu / flowy

The minimal javascript library to create flowcharts ✨
MIT License
11.45k stars 994 forks source link

【Feature】Support Add Node Programmatically Manually Automatically #148

Open wscjxky opened 7 months ago

wscjxky commented 7 months ago

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.


    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);
    }
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'])
}

image

Originally posted by @wscjxky in https://github.com/alyssaxuu/flowy/issues/110#issuecomment-2046970507

Dhanuka123 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 https://github.com/alyssaxuu/flowy/issues/102

— Reply to this email directly, view it on GitHub https://github.com/alyssaxuu/flowy/issues/148#issuecomment-2079027244, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS3KRUX62KEED2XKJFLQH5DY7IO4BAVCNFSM6AAAAABGABKWLGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANZZGAZDOMRUGQ . You are receiving this because you commented.Message ID: @.***>

wscjxky commented 6 months ago

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 commented 1 month ago

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 commented 1 month ago

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

AdamMiltonBarker commented 1 month ago

@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 commented 1 week ago

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

kdhrubo commented 1 week ago

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 https://github.com/alyssaxuu/flowy/issues/148#issuecomment-2450555857, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAISPRAT6Q5GE27ATPHVAD3Z6JYYNAVCNFSM6AAAAABGABKWLGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJQGU2TKOBVG4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

SilverFoxA commented 1 week ago

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 commented 1 week ago

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