How can I create a connection when clicking on an element other than the output element? #835
Comments
|
Simulate click in output? Or addConection ?? |
|
@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.webmthis is my code
|
|
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> |
|
@jerosoler Thank you very much, it worked correctly. |
|
@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? |
|
Exist editor.force_first_input = true;Try to see if this method works. |
|
@jerosoler I tried this way, however, the way I'm using (#835 (comment)) it isn't working. |
|
And work const editor = new Drawflow(id);
editor.force_first_input = true;
editor.start(); |
|
@jerosoler It's not working, I believe it's because I'm using Vue
|
|
With vue there should be no problem. |
|
@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. |
|
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. |
|
@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. |
I need to create a connection when clicking on an icon, I cannot move the position of the output element. When I click on the icon, it should create a line that the mouse has to follow and if I click on an input element, it should connect.
The output element is the red ball, the line has to come out of it when I click on the left icon and I have to follow the mouse until it reaches the input element
The text was updated successfully, but these errors were encountered: