search

jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.41k stars 713 forks source link

How can I create a connection when clicking on an element other than the output element? #835

Open Caalb opened 3 months ago

Caalb commented 3 months ago

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

Screenshot from 2024-03-19 14-19-20

jerosoler commented 3 months ago

Simulate click in output?

Or addConection ??

Caalb commented 3 months ago

@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

image

jerosoler commented 3 months ago

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>
Caalb commented 3 months ago

@jerosoler Thank you very much, it worked correctly.

Caalb commented 3 months ago

@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?

jerosoler commented 3 months ago

Exist 

editor.force_first_input = true;

Try to see if this method works.

Caalb commented 3 months ago

@jerosoler I tried this way, however, the way I'm using (https://github.com/jerosoler/Drawflow/issues/835#issuecomment-2007952795) it isn't working.

jerosoler commented 3 months ago

And work

    const editor = new Drawflow(id);
    editor.force_first_input = true;
    editor.start();
Caalb commented 3 months ago

@jerosoler It's not working, I believe it's because I'm using Vue

image

jerosoler commented 3 months ago

With vue there should be no problem. Review the events.

Caalb commented 3 months ago

@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.

jerosoler commented 3 months ago

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.

Caalb commented 3 months ago

@jerosoler I tried to add the click listener to the label as an example in this issue: https://github.com/jerosoler/Drawflow/issues/18#issuecomment-991615989 but it didn't work, apparently it can't add it and make it clickable.