Comments (9)
Hello @freesix
Thanks! ❤️
An input could be restricted with functions and events. Or you can modify the library.
For example:
editor.on("connectionCreated", function(info) {
const nodeInfo = editor.getNodeFromId(info.input_id);
if(nodeInfo.inputs[info.input_class].connections.length > 1) {
const removeConnectionInfo = nodeInfo.inputs[info.input_class].connections[0];
editor.removeSingleConnection(removeConnectionInfo.node, info.input_id, removeConnectionInfo.input, info.input_class);
}
});
This example deletes the first connection and only keeps the last one.
from drawflow.
Thank you @jerosoler
it worked
Best Regards
from drawflow.
Thank you @jerosoler
How can we do the same for output. Output only to bind to an input
from drawflow.
Hello @muratcim
Following the example above.
For example:
editor.on("connectionCreated", function(info) {
const nodeInfo = editor.getNodeFromId(info.output_id);
if(nodeInfo.outputs[info.output_class].connections.length > 1) {
const removeConnectionInfo = nodeInfo.outputs[info.output_class].connections[0];
editor.removeSingleConnection(info.output_id, removeConnectionInfo.node, info.output_class, removeConnectionInfo.output);
}
});
from drawflow.
@jerosoler
I'm so glad I found this tutorial.
But there is a problem as follows:
I want to catch delete event and call api( when use delete on keyboard and right click to connection)
this.editor.on('connectionRemoved', (info) => { // call delete api })
But according to the instructions above,
every times restrict the node, it will automatically call the api.
from drawflow.
It is only called if a connection is deleted.
from drawflow.
It is only called if a connection is deleted.
@jerosoler
yes sir, i just want to call the api when delete key is pressed or when right click. But when have more than one connection on input, it will automatically call the method removeSingleConnection
.
from drawflow.
You can create something like this.
let deleteConnectionAuto = false;
editor.on("connectionCreated", function(info) {
const nodeInfo = editor.getNodeFromId(info.output_id);
if(nodeInfo.outputs[info.output_class].connections.length > 1) {
const removeConnectionInfo = nodeInfo.outputs[info.output_class].connections[0];
deleteConnectionAuto = true;
editor.removeSingleConnection(info.output_id, removeConnectionInfo.node, info.output_class, removeConnectionInfo.output);
}
});
this.editor.on('connectionRemoved', (info) => {
if(!deleteConnectionAuto) {
// call delete api
} else {
deleteConnectionAuto = false;
}
})
from drawflow.
@jerosoler i loving you !!!!
from drawflow.
Related Issues (20)
- Issue for this.editor.createCurvature in angular HOT 10
- dynamic value added in input field is not avalible in export HOT 1
- How to disable movement of a Node [QUESTION] HOT 1
- How Can i show cross icon using click instated of right click. In line between two node HOT 4
- How can i make only single input and single output for all node. HOT 7
- drawflow NODES connections HOT 7
- Adding event listener to button inside drawflow node HOT 1
- Suggestion to get exact mouse position
- "view" editor mode disables translate click/drag HOT 2
- Is it possible to create a drawflow connection with a different curvature than the others? HOT 1
- Can we have a before node delete event in angular? HOT 2
- Cannot read properties of undefined (reading 'inputs') HOT 3
- After setting zoom out manually and then zoomrefresh() so the connected lines of each node gets disconnected. HOT 3
- When input type = "password" the node can't be drag from list HOT 4
- [question] How to dynamically add point? HOT 1
- How to lock the full screen nodes and move into the area HOT 1
- Component return click event goes out of the canvas HOT 1
- Mouse gets stuck when leaving parent container HOT 1
- How to do a right click context menu on the connection links HOT 2
- How to place Inputs/Outputs at top & bottom instead of left and right HOT 1
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 drawflow.