Giter VIP home page Giter VIP logo

Comments (13)

jerosoler avatar jerosoler commented on June 14, 2024 1

Exist

editor.force_first_input = true;

Try to see if this method works.

from drawflow.

jerosoler avatar jerosoler commented on June 14, 2024

Simulate click in output?

Or addConection ??

from drawflow.

Caalb avatar Caalb commented on June 14, 2024

@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

from drawflow.

jerosoler avatar jerosoler commented on June 14, 2024

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.

Caalb avatar Caalb commented on June 14, 2024

@jerosoler Thank you very much, it worked correctly.

from drawflow.

Caalb avatar Caalb commented on June 14, 2024

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

Caalb avatar Caalb commented on June 14, 2024

@jerosoler I tried this way, however, the way I'm using (#835 (comment)) it isn't working.

from drawflow.

jerosoler avatar jerosoler commented on June 14, 2024

And work

    const editor = new Drawflow(id);
    editor.force_first_input = true;
    editor.start();

from drawflow.

Caalb avatar Caalb commented on June 14, 2024

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

image

from drawflow.

jerosoler avatar jerosoler commented on June 14, 2024

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

from drawflow.

Caalb avatar Caalb commented on June 14, 2024

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

jerosoler avatar jerosoler commented on June 14, 2024

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.

Caalb avatar Caalb commented on June 14, 2024

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.