joyceworks / flowchart-vue Goto Github PK
View Code? Open in Web Editor NEWFlowchart & designer component for Vue.js.
License: MIT License
Flowchart & designer component for Vue.js.
License: MIT License
Is there any way so that I can stop some specific node from drag or move its position but I can add a connection to or from that node?
When charts exceed the max-width and/or height we have no ability to navigate the canvas, i.e.scrolling?
Bigger flowcharts unfortunately won't fit. Is there any solution known for this need.?
I am new to flowchart-vue
and trying to create a simple application that consists of just Nodes
and Connectors
. All I want to do is let the user draw the Nodes
anywhere on the Chart
based on the click of the Add Node
button and create the connections between them using the Add Connector
button. I want users to create as many as Nodes
and Connectors
based on their requirements.
I have completed my sourcecode so far: CodeSandbox
I tried a couple of things but nothing seems to work for me. Can you please explain if this is possible? If so can you guide me on what to do? Following is something I am trying to achieve:
When i add a new node with $refs.chart.add
the nodes list are not updated
the same thing with connections list
Is your feature request related to a problem? Please describe.
Rendering custom SVG/Component through node's prop.
Describe the solution you'd like
I have a set of icons/components that I would love to use as a display for some of the nodes.
Describe alternatives you've considered
None as of the moment as there's no exposed API to achieve this state.
Additional context
I have already forked the project, I will try to implement the feature there, and I more than happy to contribute to this wonderful project if it will be deemed appropriate.
Hi! I would like to customise the node and add dropdowns for the title and body (where the approvers are shown). How do I proceed with this? I saw from the past issues that we can customise the nodes in a render function but I noted that it has been removed in the later commits. Thanks!
Hello, @iamppz,
I want the to user can't draw a reverse arrow. How can I prevent this?
Also, how can I force use start and end to the? And the user shouldn't multiple connections to one node, how can I prevent this too?
I would be very happy if you can explain how I can make these requests.
Thanks.
Describe the bug
A small typo in
To Reproduce
Steps to reproduce the behavior:
Read README.md:
handleChartSave(nodes, connections) {
// axios.post(url, {nodes, connection}).then(resp => { // <===============
// this.nodes = resp.nodes;
// this.connections = resp.connections;
// // Flowchart will refresh after this.nodes and this.connections changed
// });
Expected behavior
Should be:
handleChartSave(nodes, connections) {
// axios.post(url, {nodes, connections}).then(resp => { // <===============
// this.nodes = resp.nodes;
// this.connections = resp.connections;
// // Flowchart will refresh after this.nodes and this.connections changed
// });
Hello, I am new to the library so trying to use this in one of my Nuxt/Vuejs
applications but I wanted to know if there is any possibility to include the labels for each connection that has been created using this library?
I would like to create the connections
for the nodes
dynamically based on user preference. For each of the connector
I would like to have 3 labels
something like this:
Can someone please let me know if it's possible and how to achieve the same?
Hello. i am currently learning this library and how i can add custom a popup display or select template. Thank you for reading and sharing
I want to use different colors for each node based on node.status
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
hello I want to clone the node for example
I select the node then click on clone button so it will clone the another node for me
thanks in advance
I want to make a connection in both directions which means a connection that has an arrow at both endpoints.
Can you please guide me on how can I achieve this?
i am a little bit confused about how to use "nodesdragged" event
hello,
is there a way to style the nodes? (for example change their shape and color)
Hey nice work first ;)
i noticed that the task node titles are not rendered correctly. the rect is not given a style (width/height).
to reproduce you can have a look at the demo.
i think the missing part ist on flowchart component at line 86
current: style('width', node.width);
should be: style('width', node.width + 'px').style('height','20px');
Describe the bug
Connecting between two nodes is overlapping on another node if there is any node in between.
To Reproduce
I tried to connect the D4 to J6, in between there is J8 and connection line is overlapping
Please check the below screen shot.
Expected behavior
The connection line between the D4 and J6 should go from above or below the J8 node.
Can we provide in place edit for a node on the flow chart ? Something like, when double click happens on a rect, it should provide an in place text edit field instead of popup.
Thanks
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
I need below functionality
select node -> click on button ->get all details of selected node (editnode function is already used)
(i want to delete that node from chart and database )
kindly please help
is there any call back events for node creation, deletion ,connection creation and connection deletion?
Describe the bug
mouseup event doesn't work in Flowchart.vue .
When the Process function "handleChartMouseDown($event)" of event mousedown is activated, one of nodes is selected. When the left click of mouse is up, handleChartMouseUp is not activated. Why ? Is it a bug? Because of the async feature of function handleChartMouseUp ?
Expected behavior
I wish that you can refind the problem and solve it.
hello, is there a way to get the information about which node is selected currently?
Added nodes, then drag the link two nodes to report errors
I want to draw a diamond with following code:
let body = g.append("polygon");
body.attr("class", "body")
body.attr("cx", node.x + node.width / 2);
body.attr("cy", node.y + node.height / 2);
body.attr("rx", node.width / 2);
body.attr("ry", node.height / 2);
body.style("fill", "white");
body.style("stroke-width", "1px");
body.attr("points", "69.445,125 125,28.774 180.556,125 125,221.227");
body.classed(node.type, true);
body.attr("stroke", borderColor);
This will draw diamond as expected, but the issue here is that now polygon is fixed on and is not affected by drag event. Even, connector dots appear away from the polygon. When I click on polygon and start the drag event, connector dots move but the polygon is not moving.
Am I missing something here?
Canvas (start, end, operation) can be dragged out of the svg area.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
svg area should have boundaries (therefore canvas cannot exit svg area) or svg area should be scrollable
Hey Joyce,
great work! I've check quiet a lot of flowchart libraries and yours is the closest to my needs.
One thing that would really help me would be to have a generic data field in each node where I could put whatever I want (title in another language, content, etc.) and that doesn't necessarily need to be displayed on the screen. It could be edited on a sidebar on a click event on the node for example.
That would be really helpful, I hope you can build it :)
I'm looking for something like your project to build a conversational bot builder for Telegram Messanger. The library you developing is very nice for me.
Please tell me еру way, how I can create more complex custom nodes like described in the attached image.
Here I show a simple message with three inline buttons. A button can be connected only to one message, but the message can be triggered by any number of buttons from other messages.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.