Comments (4)
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.
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 :
- 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.
- 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:
- Vertical position is next layers to lowest parent node. it is same to current version.
- 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.
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.
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 :
- 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.
- 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:
- Vertical position is next layers to lowest parent node. it is same to current version.
- 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)
- Output is Not define
- Block name change
- More advanced demo? HOT 7
- Prevent junctions
- Is it possible to implement for nodes to have more than 1 parent? HOT 4
- How to use it in Vuejs ? HOT 3
- Output not getting imported HOT 2
- Can you give me a solution to use it in React js ? HOT 3
- Conditional Snapping Issue HOT 1
- Drag block item when scrolled
- Hey
- Unable to add text box in the flowchart
- Demo Site link working HOT 1
- Live demo link broken HOT 2
- [Feature request] Dark theme
- Create zoom canva preview
- Support? HOT 2
- How to split branches manually
- How to support cyclic relations between blocks in flowy
- Is this project abbandoned.?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flowy.