GithubHelp home page GithubHelp logo

Join multiple nodes to one about flowy HOT 4 OPEN

alyssaxuu avatar alyssaxuu commented on May 19, 2024 2
Join multiple nodes to one

from flowy.

Comments (4)

chaitanyya avatar chaitanyya commented on May 19, 2024 5

This according to me is a must have feature for the flowchart. I'll go through the code and see if I can create a pull request for the same.

from flowy.

alyssaxuu avatar alyssaxuu commented on May 19, 2024 3

The amazing part of Flowy is connecting node is more natural and elegant, comparing to drawing link . I hope we can stay current operation 。
My idea is :
Firstly drag block to canvas . it will connect to first parent node . And There are two possible options to connect more parent nodes :

  1. By dragging node to overlay intended parent block . Currently dragging linked node will loss link and delete node . I hope that "dragging node to others nodes" will connect additional parent node. And deleting node and link by selecting and pressing button/key . Beacuase we may drag nodes carelessly ,and it is horrible loss many nodes by a tiny drag.
  2. Connect more nodes by "Select a node, hold shift and select another node." . I found the idea from project "https://github.com/mariusbrataas/flowpoints.js". And deleting node like option 1.

I prefer option 1.

Alignment Algorithm:

  1. Vertical position is next layers to lowest parent node. it is same to current version.
  2. Horizontal position is kind difficult to resolved . I have some ideas .
    a) Treat node as child of the lowest parent node like current version.
    b) Align the block horizontally to middle position of the multiple parent nodes. If there are many noodes in same layer. It will need to rebalance the position. This algorithm makes graph looks elegant when having few nodes , thinking about diamond shape.

Not really keen on dragging nodes myself (as the arrows are automatically generated & spaced accordingly, wouldn't be very intuitive from a user perspective as you couldn't "draw" them or drag to connect). So both options don't really seem that great to me to use in the library, personally. I would have to think about it I suppose, the only option that I could consider is to allow the joining of nodes to one for all last blocks in a flowchart (so having the option to create blocks that have this special behaviour, when dragged all the last blocks would automatically attach to it, and you could then continue attaching blocks if you wanted below this one).

The idea is that I want to ensure all blocks connect when you drop them on the canvas, so I don't want to have users place a block and then manually connect the nodes. Maybe a possibility I could also consider is to hold shift/press control key while dragging a block over a potential parent (with the blue indicator showing), and then being able to drag said block under other blocks and "locking" those (the indicator would still be visible). Just an idea, let me know what you think ^^

from flowy.

alyssaxuu avatar alyssaxuu commented on May 19, 2024

I understand how this could be useful, but I just don't see how this could be implemented without rewriting Flowy entirely. I want to keep it simple, with automatic snapping and the blocks being properly aligned.

I suppose if you have an idea on how this could be done, from a UX perspective, I would be definitely interested and might actually implement it if I think it would fit with the library.

from flowy.

kkyon avatar kkyon commented on May 19, 2024

The amazing part of Flowy is connecting node is more natural and elegant, comparing to drawing link . I hope we can stay current operation 。
My idea is :
Firstly drag block to canvas . it will connect to first parent node . And There are two possible options to connect more parent nodes :

  1. By dragging node to overlay intended parent block . Currently dragging linked node will loss link and delete node . I hope that "dragging node to others nodes" will connect additional parent node. And deleting node and link by selecting and pressing button/key . Beacuase we may drag nodes carelessly ,and it is horrible loss many nodes by a tiny drag.
  2. Connect more nodes by "Select a node, hold shift and select another node." . I found the idea from project "https://github.com/mariusbrataas/flowpoints.js". And deleting node like option 1.

I prefer option 1.

Alignment Algorithm:

  1. Vertical position is next layers to lowest parent node. it is same to current version.
  2. Horizontal position is kind difficult to resolved . I have some ideas .
    a) Treat node as child of the lowest parent node like current version.
    b) Align the block horizontally to middle position of the multiple parent nodes. If there are many noodes in same layer. It will need to rebalance the position. This algorithm makes graph looks elegant when having few nodes , thinking about diamond shape.

from flowy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.