search

jerosoler / Drawflow

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

Newbie & exemple... #756

Closed Tirguy closed 10 months ago

Tirguy commented 10 months ago

Hello,

Sorry to ask my question here, but I don't know where else to ask it: I also have to say that I'm a javascript newbie ;-) !

I'm looking to use the Drawflow library in a basic way: first, I just want to display 1 box (node) offering 2 inputs and 2 outputs...

My plan is to display a lot more later on, but that's another subject ;-)

My big problem is that I'm having trouble getting started with this library, despite the examples. Note that I don't use the Vue.js library and create my pages using home-made HTML and CSS code.

To give an example of what I've done, here's the code for an example page I've tried to write but which doesn't work :

<!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>Drawflow | Test de page</title>
    </head>
    <body>
    <script type="module" src="lib/drawflow/drawflow.min.js"></script>
    <link rel="stylesheet" href="lib/drawflow/drawflow.css">

    <div id="mydrawflow"></div>

    <script>

        // Initialize the flowchart builder.
               var id = document.getElementById("mydrawflow");
               const editor = new Drawflow(id);

        // Start editing the flowchart.
        editor.start();

        // Register nodes.
        var html = document.createElement("div");
        html.innerHTML =  "Hello World !";
        editor.registerNode('myNode', html);
        editor.addNode('newNode', 2, 2, 150, 300, 'newNode', data, 'myNode', true);

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

The name of my page is "test.php": when I execute it, nothing appears on the page, not a single box or text... Worse, when I look at the Javascript debugger, it tells me "Uncaught ReferenceError: Drawflow is not defined". I'm on Firefox 102...

Note : I've added the 'type="module"' option to the drawflow.js file loading line because it was causing an error that seems to have been corrected ("Uncaught ReferenceError: data is not defined").

Is it possible for someone to give me a simple page that works? Or explain to me what's wrong with my page... I've read and reread the documentation several times, tried to find examples on the Internet (Goggle could have been my friend... but not in this case :-( ).

Thank you very much, Sincerely, Thierry

Tirguy commented 10 months ago

PS: I forgot, but is it also possible to display the name of a node's input or output?

jerosoler commented 10 months ago

Minal example template:

<!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;
      }
      </style>
  </head>
  <body>
    <div>
        <div id="drawflow"></div>  
    </div>
    <script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();
    editor.addNode('test1', 2, 2, 50, 25, 'test1', {}, '<div>Hola</div>');
</script> 
  </body>
</html>

View this issue for display name of node input / outputs

Tirguy commented 10 months ago

Thank's a lot... too speed ! :-D It works ;-) I continue to test... and come back if another problem will appear ! OK, I will look for the name of node also in your link... Thank's again...

Thierry