add dynamic width for drawflow-node

Hi! @iFixxer

I think that is external to the library.

But I have created a small example of how you could get it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <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>
</head>
<body>
<div id="drawflow"></div>
  <style>
    #drawflow { 
      position: relative;
      text-align:initial;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }
    .drawflow .drawflow-node {
        min-width: 150px;
        width: auto;
    }
    .drawflow .drawflow-node input {
        min-width: 150px;
    }
</style>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.line_path = 1;
    editor.start();

    editor.addNode('aaa', 0, 1, 100, 300, 'aaa', {}, '<input type="text">' );
    editor.addNode('bbb', 1, 0, 200, 400, 'bbb', {}, 'bbb' );
    editor.addNode('ccc', 1, 0, 500, 500, 'ccc', {}, 'ccc' );
    editor.addConnection(1, 2, 'output_1', 'input_1');

var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

function resizeInput() {
  this.style.width = this.value.length + "ch";
  editor.updateConnectionNodes('node-'+this.closest(".drawflow_content_node").parentElement.id.slice(5))
}

</script>
</body>
</html>

jerosoler / Drawflow

add dynamic width for drawflow-node #318