Using Drawflow library create nodes but they are not visible

Question

I'm trying to use the amazing Drawflow library (Javascript) from:

Here is my code:

<head>
    {% load static %}
    <link rel="stylesheet" href="{% static 'drawflow/src/drawflow.css' %}">
</head>

<body>

    <div id="drawflow"></div>

    <script type='module'>
        // The minified version is build as an UMD module, so it cannot be imported
        // It should be rebuild eventually.
        // https://stackoverflow.com/questions/75514648/uncaught-syntaxerror-the-requested-module-does-not-provide-an-export-named-dra
        import Drawflow from "{% static 'drawflow/src/drawflow.js' %}";
        import sheet from "{% static 'drawflow/src/drawflow.css' %}" assert { type: 'css'};
        import { h, getCurrentInstance, render } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        const Vue = { version: 3, h, render };

        const container = document.getElementById("drawflow");
        var editor = new Drawflow(container);

        editor.reroute = true;
        editor.editor_mode = 'edit';
        editor.start();
        editor.addModule('nameNewModule');
        
        const nodeData = {
          id: 'node-1',
          name: 'My Node',
          module: 'nameNewModule',
          x: 500,
          y: 100,
          class: '',
          html: function() {
            return '<div>' + this.name + '</div>';
          } ,
          inputs: {
            input_1: {
              label: 'Input 1',
            },
          },
          outputs: {
            output_1: {
              label: 'Output 1',
            },
          },
          data: {
            command: 'Run command',
          },
        };

        editor.addNode(nodeData.module, 
            Object.keys(nodeData.inputs).length,
            Object.keys(nodeData.outputs).length,
            nodeData.x, nodeData.y,
            nodeData.class, nodeData.data, nodeData.html());
    </script>

</body>

However, when I run this (using a Django server), I don't get any error, neither on the server nor in the console, and I checked the library is loaded, but I don't see anything.

However, I know the elements are properly created as we can see here:

If I turn off the property "position: absolute" on the element, I get something like this:

Now the node is visible but I can't do much with it and it has the wrong geometry. I can't drag it or do anything, and it's way too large and in the wrong position.

I don't really understand what is going on. When going on the live demo linked in the GitHub repo, it works, so I don't think it's a browser issue (I tried with Chrome, Opera, and Firefox).

I even try to get the source code of the live demo from the GitHub repo, and it didn't really work:

If anyone can help, or see if they can reproduce this with the same code, thanks.

Edit: After further investigation, I kind of made it worked by turning off the properties "display: flex" and "overflow: hidden" in the parent-drawflow class. But I don't understand why I have to do this, and could I make it work without having to turn this off. Why does it work well in the live demo and not with me?

Edit 2: I manage to make this work by adding a <div class='wrapper'> around the <div id='drawflow'> and using the beautiful.css stylesheet from the live demo example. It seems the wrapper set the size, which wasn't done in the drawflow class.

Using Drawflow library create nodes but they are not visible

0 Answers0