Comments (13)
Exist
editor.force_first_input = true;
Try to see if this method works.
from drawflow.
Simulate click in output?
Or addConection ??
from drawflow.
@jerosoler I believe it's to simulate, I managed to do it this way, but when I "release" the click, it doesn't connect to the input correctly
Screencast.from.19-03-2024.15.17.51.webm
this is my code
from drawflow.
The problem is connection is creating in mouseup event.
Solved this, complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css" />
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
<style>
#drawflow {
position: relative;
width: 100%;
height: 800px;
border: 1px solid red;
}
.buble {
position: relative;
top: -100px;
width: 40px;
height: 40px;
background: red;
text-align: center;
border-radius: 50%;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<div id="drawflow"></div>
</div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
let creatingNewConnection = false;
editor.on("click", (e) => {
if(creatingNewConnection) {
creatingNewConnection = false;
editor.dragEnd(e);
}
})
function handleClick() {
var evt = new MouseEvent("mousedown", {
view: window,
bubbles: true,
cancelable: false,
});
const target = document.querySelector(`#node-1 .outputs .output_1`)
target.dispatchEvent(evt);
creatingNewConnection = true;
}
editor.addNode('test1', 1, 1, 100, 200, 'test1', {}, '<div>Node!!! <div class="buble" onclick="handleClick(event)">+</div></div>');
editor.addNode('test1', 1, 1, 400, 200, 'test1', {}, '<div>Node!!!</div>');
</script>
</body>
</html>
from drawflow.
@jerosoler Thank you very much, it worked correctly.
from drawflow.
@jerosoler is it possible for me to add the connection just by dropping the line anywhere in the node, other than directly in the input?
from drawflow.
@jerosoler I tried this way, however, the way I'm using (#835 (comment)) it isn't working.
from drawflow.
And work
const editor = new Drawflow(id);
editor.force_first_input = true;
editor.start();
from drawflow.
@jerosoler It's not working, I believe it's because I'm using Vue
from drawflow.
With vue there should be no problem.
Review the events.
from drawflow.
@jerosoler Ok, thank you very much for help. One question, is it possible to make a connection have a dashed line, but it would be in a specific case and also, I would like to know if it is possible to add a Vue component in the middle of that line, it would not be for label, it would be a component that would basically be a icon to delete the connection between nodes.
from drawflow.
For dash view:
I find a vue component a bit complicated. But maybe you can add an icon or svg and detect the click.
You can use the same technique as the lines but add an icon.
from drawflow.
@jerosoler I tried to add the click listener to the label as an example in this issue: #18 (comment) but it didn't work, apparently it can't add it and make it clickable.
from drawflow.
Related Issues (20)
- 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
- how can distribute flow in 2 part HOT 4
- Any way to designate True/False outputs for custom nodes? HOT 1
- newest npm package HOT 5
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.